1，三特性
1）层叠性：同标签同权重下，样式冲突，后面的样式会覆盖前面的。
2）继承性： 给父元素设置样式的时候，子元素在默认没有样式的情况下会受父元素的样式影响。注意宽高不能继承。
可继承的属性：
◇文字颜色可以被继承 color
◇与文字相关的属性都可以被继承
◆行高（line-height） 可以被继承
◆text-align
特殊情况：
a 标签默认情况下不会受父级元素的颜色影响
常见的在制作nav 中给li 设置颜色a标签不起作用，原因是受到浏览器默认的样式影响 color: -webkit-link。
h1-h6 默认单位是em 具体大小要乘积运算
3）优先级：
标签选择器<类选择器 <ID选择器 < 行内样式 <! Important
2，Margin 的特点：
1）垂直外边距合并（取大的）
2）垂直外边距塌陷？
解决方法：
给父元素设置边框。
给父元素设置 overflow:hidden（触发bfc）
3,Padding值特殊性
在块级元素中，如果默认子元素没有设置宽度，给当前子元素设置padding值，不会影响当前子盒子的宽度。（“继承”的盒子padding值不会影响）
4,浮动
为什么用浮动？
开始是作为 图片文字环绕效果设计现在多用在布局和导航 制作
什么时候清理浮动？
1，父容器没有设置高度
2，父容器所有子元素都设置浮动
如何清理浮动？（这里介绍常见的4种）
1，clear：both;
2,给父元素设置overflow：hidden;(父元素没有定位)
3，使用伪元素
|
1 2 3 4 5 6 7 8 9 10 11 12 |
|
4,display: table;
|
1 2 3 4 5 6 7 8 9 10 |
|
定位：
1，静态（static）标准流下的显示方式，可转换成其他定位方式
2，绝对 （absolute） ：
1）标准流下的盒子，设置绝对定位以body 为参照
2）除了父盒子设置static ，其他定位方式，子盒子以父盒子为参照
3）绝对定位的元素脱标
4）实现模式转换的效果
使用场景：1，盒子压盒子 2，绝对定位可以使用margin padding
3，相对（relative）：相对自己作为参照，不会脱标
使用子绝父相
4，固定（fixed）：
1）以body标签可视区域作为参照
2）脱标
3）实现模式转换的效果
层级：
1）定位的元素有层级关系
2）只有给定位的元素才能设z-index
特点：
1）元素设置定位后有个默认的z-index ：auto（除去static）
2）z-index 值相同 元素后来居上
3）z-index 值越大 当前的元素层级越高
4）父元素的z-index值越大 当前的元素层级越高简单
绝对定位如何居中？
◆通过设置left:50% ; 父元素宽度的一半
◆设置margin-left: -元素自己宽度一半；
双飞翼布局
目的：加载文档时先加载中间区域，再加载左右两边
特点：两侧固定，中间自适应
|
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 <style>
2 body {
3 min-width: 1000px;
4 }
5
6 .columns {
7 height: 250px;
8 float: left;
9 }
10
11 .container {
12 height: 250px;
13 border: 1px solid red;
14 }
15
16 .mainbox {
17 width: 100%;
18 background: yellow;
19 }
20
21 .inner {
22 margin: 0 300px 0 250px;
23 word-break: break-all;
24 }
25
26 .leftbox {
27 width: 250px;
28 background: red;
29 margin-left: -100%;
30 }
31
32 .rightbox {
33 width: 300px;
34 background: blue;
35 margin-left: -300px;
36 }
37 </style>
本文转自：http://www.cnblogs.com/yiyefusheng/archive/2016/11/28/6104359.html