一.CSS行高的测量和水平居中
1.line-height：可以垂直居中
方式：line-height 等于 元素整个内容区 居中显示
小于 ，那么内容偏上显示。
大于 ，那么内容偏下显示。
此外三种取值：top middle bottom，分别可以，上，中，下显示。
2.text-align：center，水平居中
此外三种取值：left center right，分别左，中，右显示。
二：CSS的三大特性
1.层叠性：
当CSS的属性和属性值重复时；最后写的值会覆盖之前CSS属性，如代码所示，最后显示棕色
p {
font-size: 56px;
font-weight: bold;
color: red;
color: blue;
color: brown;
}
2.继承性：
（1）即后代可以继承父元素的特性。
（2）元素本身的样式大于继承的样式。
（3）继承最近的父元素样式。
3.选择器的优先级和权重性
（1）权重值以及比较：0<1<10<100<1000<10000
*<标签=伪元素选择器<类名选择器=属性选择器=伪类选择器<id<内联样式<!important
（2）判断权重顺序精简版本：
判断选择器是否选中的是同一个元素：
否：使用元素对应的选择器，再使用此选择器的样式。
是：首先判断权重，权重大的样式生效，权重相同，判断是否层叠，层叠，则之后的样式覆盖之前的样式。
另外：如果有多层div嵌套，name通过后代选择器选中的div是最里层的div，如代码，两个选择器选择的都是<div id="box3" class="c3"></div>。
div #box3 {
color:green;
}
#box1 div {
color:yellow;
}
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
三：背景属性
.box2 {
background-color: rgb(255,0,0);
background-color: rgba(255,0,0,0.5);
opacity: 0.5;
background-image: url("http://newsimg.5054399.com/uploads/userup/2011/1015302T150.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right top;
}
四.盒子模型和内外边距及边框，圆角
1.盒子有三部分组成，分别是内边距padding，边框border，外边距margin。
一般设置宽高，设置的是内容的大小，不包括padding
2.边框border
可以为上左下右分别赋值，代码如下
border-top-width: 10px;
border-top-color: blue;
border-top-style: double;
border-left-color: yellow;
border-left-width: 10px;
border-left-style: dotted;
border-bottom-width: 10px;
border-bottom-color: lightgreen;
border-bottom-style: dashed;
border-right-width: 10px;
border-right-color: #000;
border-right-style: solid;
border: 1px solid black;
3.内边距padding，作用是可以填充上下左右边框与内容之间的距离，代码。
padding-top: 20px;
padding-left: 40px;
padding-bottom: 100px;
padding-right: 200px;
padding: 20px 40px 60px 100px;
padding: 20px 40px 100px;
padding: 20px 40px;
padding: 20px;
4.圆角
border-radius：有两种值
width: 300px;
height: 300px;
border-radius: 150px;
border-radius: 50%;
五.内容和盒子居中问题
1.text-align:center;
内容水平居中，即内容相当于当前块状元素的宽度水平居中
内容包括：1.文本内容，2.行内元素，3.行内块元素，4.块状元素
注意：如果内容是一个设置了宽度的块状元素，想要此种块状元素居中，就必须设置属性，margin:auto;否则不能居中
2.line-height:高度值;
内容垂直居中，即内容相当于当前块状元素的高度垂直居中。
内容包括：1.文本内容，2.行内元素，3.可以让input元素居中，但是，不可以使图片居中。
块状元素垂直居中：通过属性margin-top:高度值;进行调整，使元素居中。
六.外边距合并/塌陷
1.相邻块状元素塌陷问题
当垂直方向相邻的两个元素，在没有边框和内边距的时候，他们的垂直相邻外边距（第一个的margin-bottom和的第二个的margin-top）会发生塌陷。即他们的外边距会取两个元素的最大值，这种现象塌陷，如代码，其中，两个div的距离是70px。
.box1 {
width: 400px;
height: 300px;
background-color: red;
margin-bottom: 70px;
overflow: hidden;
}
.box2 {
width: 400px;
height: 300px;
background-color: blue;
margin-top: 50px;
}
<div class="box1"></div>
<div class="box2"></div>
2.嵌套块状元素塌陷问题
当垂直方向牵嵌套的父子元素，在没有上边框和上内边距的时候，他们的垂直方向的边距发生合并（子元素的margin-top:70px;会使父元素向父元素的相邻元素进行下移70像素，除非父元素也设置了martop-top:100px，这样才会使父元素向上平移100像素），解决这种塌陷，三种方法。1.为父元素添加上边框，2.为父元素添加上内边距，3.给父元素添加overflow属性。代码如下
.outer {
width: 400px;
height: 300px;
background-color: brown;
margin-top: 100px;
}
.inner {
width: 100px;
height: 100px;
background-color: grey;
margin-top: 70px;
}
<div class="outer">
<div class="inner">
</div>
</div>
七.浮动
1.浮动解释：
脱离标准流，浮动起来。
2.浮动后块状元素的特点
1.浮动的元素，可以遮蔽了未浮动的元素。
2.浮动的元素，不会占据标准流的位置。
3.所有浮动的元素，都会在浮动流显示，在同一平面上展示出来
4.浮动后的元素，不会超过父元素的内容范围。
5.浮动后的元素，不会覆盖也不会超出父元素的边框和内边距。
6.由于多个浮动后的元素，在同一行显示，又可以设置宽和高，所以就不是块状元素，变为了行内块元素。
3.清除浮动
原因：因为浮动对其他元素带来了影响，如代码，带outer类名的div会消失不见
.outer {
width: 800px;
background-color: red;
}
.inner1 {
width: 200px;
height: 300px;
background-color: #fff;
float: left;
}
.inner2 {
width: 200px;
height: 300px;
background-color: blue;
float: left;
}
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
清除浮动方法：
1.额外标签方法：在父元素中添加额外的子元素,并带有clear:left属性就可以清除浮动
优点：通俗易懂，书写方便。
缺点：有影响，添加新的无意义子元素，结构语义化会很差。
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div style="clear: left;"></div>
</div>
2.给父元素添加overflow:hidden;
优点：代码简单
缺点：元素内容增多，会造成不会自动换行而导致内容被隐藏掉，无法显示需要溢出的元素。
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div style="clear: left;"></div>
</div>
3.父元素添加伪元素清除浮动::after { content: "";display: block;clear: both;}
优点：不会对结构和内容产生影响
缺点：不知IE6及之前的版本
.clearfix::after {
content: "";
display: block;
clear: both;
}
<div class="outer clearfix">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
4.双伪元素清除浮动::after和:before，即两个伪元素一起使用，触发BFC来清除浮动。
.clearfix::after,
.clearfix::before {
content: "";
display:table;
clear: both;
}
<div class="outer clearfix">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
八.四种定位及其特点
1.静态定位-position: static;即处于标准流
标准流-就是所有元素按照本身的特征显示的区域，如，块状元素独占一行，行内块元素可以和行内元素一行显示。
边偏移量：top: 30px;right: 30px;bottom: 30px;left: 30px;
1.无法定位。2.不能使用边偏移量。3.没有脱离标准流。4.占据标准流原位置。
2.相对定位-position: relative;
1.相对于元素本身原占据位置进行定位。
2.可以是使用边偏移量。
3.原位置存在与标准流，没有脱离标准流。
4.元素占据标准流本身原位置，同时，元素会显示在被定位的区域。
5.定位子元素显示可以超出父元素的范围。
3.绝对定位，position: absolute；
1.祖先元素有定位，则相对有定位的最近祖先定位元素进行定位，或无定位元素时，相对于浏览器可视区域进行定位。
2.可以是使用边偏移量。
3.已经脱离标准流，不在占据标准流位置。
4.不占据标准流元素本身原位置。
5.定位子元素可以超出父元素的显示范围。
4.固定定位，position:fixed
1.相对浏览器进行定位。
2.可以是使用边偏移量。
3.已经脱离标准流。
4.不占据标准流元素本身原位置。
5.定位子元素可以超出父元素的显示范围
5.层叠属性，z-index
可以认为：
即平面宽为x，向右为正方向
平面高为y，向下为正方向
我们看显示器的视线为z，我们所在方向为正方向。
z-index：
1.需要配合定位使用。
2.随着取值增大，越靠近我们方向。
1171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
