Day21-CSS属性
2018-08-15 本文已影响41人
周zau1
1、选择器的权重
<!--选择器的权重
类型选择器(元素名) 0001
class选择器 0010
id选择器 0100
伪类选择器 0001
层级(包含)选择器 多个选择器的权重之和
群组选择器 分开看每个选择器的权重
谁的权重的值大，谁的优先级就高
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body #d1{
color: peru;
}
.c1{
color: darkblue;
}
#d1{
color: green;
}
a{
color: red;
}
</style>
</head>
<body>
<a href="" id="d1" class="c1">百度</a>
</body>
</html>
2、浮动
<!--
标准流:块标签一个占一行，从上往下布局。
行内标签，一行可以显示多个，从左往右布局，直到遇到边界，自动换行
脱流:浮动、定位
1.浮动:就是让竖着显示的标签横着来，块的，默认宽度是内容的宽度
float:left和right
注意:1.如果要使用浮动，那么同一级的所有标签都要浮动
2.如果父标签浮动，那么子标签的位置会跟着一起动
3.布局的基本顺序:从上往下,从左往右
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top{
float: left;
background-color: green;
width: 100%;
height: 150px;
}
#m1{
float: left;
background-color: deeppink;
height: 600px;
width: 20%;
}
#m2{
float: left;
background-color: dodgerblue;
height: 600px;
width: 60%;
}
#m3{
float: left;
background-color: yellow;
height: 600px;
width: 20%;
}
#up{
float: left;
background-color: palegreen;
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="up"></div>
</body>
</html>
3、文字环绕
<!--
文字环绕:被文字环绕的标签浮动，文字标签不浮动
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
/*被环绕的对象浮动*/
float: left;
width: 80px;
height: 80px;
background-color: yellow;
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
富家大室粉红色的大花我还得仓插卡机 发了啊洒积分看不到深V空格一年大幅VB对话框是是的科技部不耐烦进口量 家科技法拉第很烦 科技分公司的客户吧，没VB速度快承诺的履vk上的那个快十点半，嘛
</div>
</body>
</html>
4、清除浮动
<!--
1.清除浮动:是指清除因为浮动而产生的问题(高度塌陷)---问题不是什么时候都会产生的
2.怎么清除浮动？
a.添加空的div
在父标签(高度塌陷的标签)的最后添加一个空的div，并且设置这个div的样式表:clear：both
可能会产生大量的代码
b.设置overflow
在父标签中设置样式表的overflow的值为hidden
c.万能清除法
.clearfloat{zoom:1;}
.clearfloat:after{content:".";display:block;visibility:hidden;height:0;clear:both;}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*2.清除浮动方案2*/
/*.clear{
overflow: hidden;
}*/
/*3.清除浮动方案3*/
.clear:after{
display: block;
clear: both;
content:"";
visibility: hidden;
height: 0;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div style="height: 100px;background-color: red;"></div>
<div style="background-color: royalblue;" class="clear">
<div style="width: 30%;background-color: peru;height: 200px;float: left;"></div>
<div style="width: 30%;background-color: peachpuff;height: 200px;float: left;"></div>
<!--1.清除浮动方案1-->
<!--<div id="" style="clear: both;"></div>-->
</div>
<div style="height: 100px;background-color: green;"></div>
</body>
</html>
5、display
<!--
HTML中标签分为块和行内
CSS中标签分为3类:块标签、行内块标签、行内标签(display)
（在标准流中）
block：块(一个占一行，默认宽度是100%，高度默认根据内容来确定；直接设置宽高有效)
inline-block：行内块（一行可以有多个，默认宽高是内容的宽高；直接设置宽高有效）
inline：行内(一行可以有多个，默认宽高是内容的宽高；设置宽高无效)
通过改变标签的display的值，可以让一个标签在块、行内块、行内之间任意切换
注意：inline-block标签的右边默认都有一个间隙，不能和其它标签无缝连接(这个间隙目前无法清除)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: block;
background-color: hotpink;
width:100px ;
height: 100px;
}
</style>
</head>
<body>
<div id="">
aaa <br />
bbb
</div>
</body>
</html>
6、定位
<!--1.定位
1.距离
top：标签顶部距离其他标签的位置
bottom：标签的底部距离其他标签的位置
lef：标签的左边距离其他标签的位置
right：标签的右边到其他标签的位置
2.position
想要设置标签的top，bottom，left，right的值有效，必须设置标签的参考方法
initial(默认值)没有参考对象
absolute：相对第一个position的值是非static,非initial的父标签进行定位
relative:正常位置定位(按照标准流定位)
fixed：相对于浏览器定位
sticky:滚动的时候，按标准流布局，滚动的时候相对浏览器定位
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: deepskyblue;
/*margin-top:320px ;*/
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: greenyellow;
/*top: 100px;*/
right:20px ;
bottom: 50px;
}
#d3{
position: sticky;
/*top: 120px;*/
width: 100px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
<div id="" style="height: 20px; background-color: yellow;width: 200%;">
</div>
<div id="d3" style="height: 60px;background-color: peru;">
</div>
</div>
</body>
</html>
7、盒子模型
<!--
每一个标签都是由4个部分组成：
1.内容：显示标签的内容的部分，可见的(设置宽和高的值，就是设置内容部分的大小)
2.内边距(padding)：可见的，不能显示内容(通过设置padding改变其值，默认是0)
3.边框(border):可见的，如果有内边距边框就显示在内边距上，否则显示在内容上
4.外边距(margin)：不可见的，但是会占据浏览器的空间
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意：以后在写网页的时候，在样式表的最前面关闭自带的所有的margin和padding*/
*{
margin: 0;
padding: 0;
}
div{
background-color: greenyellow;
/*1.设置内容大小*/
width: 100px;
height: 100px;
/*2.padding的值有四个
可以单独设，也可以一起设
*/
/*padding-left: 20px;
padding-top: 20px;*/
padding: 20px; /*上下左右的内边距都是20px*/
padding：20px 40px;/*上下是20px，左右是40px*/
/*3.边框
* 可以单独设，也可以一起设
* 格式：宽度 样式 颜色
* a.样式 solid代表的是实线 dotted代表的是点状线 double代表的是双线
*/
/*单独设置一条边框的宽度、样式和颜色*/
/*border-left:5px solid red;
border-bottom: 5px solid red;*/
/*同时设置四条边框的宽度、样式和颜色*/
border: 3px solid bisque;
/*设置边框圆角的弧度*/
border-bottom-left-radius: 30px;
/*4.外边距*/
/*单独设置每个外边距*/
/*margin-top: 100px;
margin-left: 100px;*/
/*给所有的外边距设置一样的值*/
/*margin:上 右 下 左
margin：上/下 右/左
*/
margin: 20px;
/*5.设置圆角*/
/*border-radius: 10px;*/
}
</style>
</head>
<body>
<div>
abc
</div>
</body>
</html>
8、居中
<!--1.垂直居中
a.固定标签高度
b.设置line-height的值和高度一样
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
/*line-height: 100px;*/
background-color: darkgoldenrod;
text-align: center;
}
p{
display: inline-block;
/*垂直居中*/
height: 50px;
line-height: 50px;
width: 300px;
background-color: greenyellow;
/*水平居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<p>小荷才露尖尖角，早有蜻蜓立上头</p>
</div>
</body>
</html>
