1.什么是CSS盒模型
我们的网页就是通过一个一个盒子组成的。
2.一个盒子拥有的属性：宽和高（width和height）、内边距（padding）、边框（border）、外边距（margin）
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
3.宽和高
1）宽和高只作用于内容区
2）一般不指定高度，因为我们的内容可以把我们的盒子给撑开
3）CSS2开始对我们的宽高引入了百分比值
4）行内样式是不能设置宽高的
4.内边距
1）盒子的背景颜色是可以延伸到padding区域的
2）如果你设置了border，那么你最好也设置padding，以免边框紧紧挤压内容。
3）padding不允许有负值
4）padding设置值的顺序是上、右、下、左（顺时针记忆）
5）Padding不会重合（和margin相比较的）
设置一个左内边距为20px；上右下内边距为30px的盒子
6）一些元素，默认带有padding，比如ul标签。
所以我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding和margin
*{ margin: 0; padding: 0; }
5.边框
1）边框有三个特征可以指定：样式、宽度以及颜色，颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。
2）分开写的话写作：
border- 1px;
border-style: solid;
border-color: red;
border属性能够被拆开，有两大种拆开的方式：
1） 按3要素:border-width、border-style、border-color
2） 按方向：border-top、border-right、border-bottom、border-left
如果不觉得蛋疼的话，还可以拆成12条语句
合着写的话：border: 1px solid red;
6.外边距
1）外边距总是透明的，不能设置颜色，强调没有margin-color这个属性（当然也没有padding-color这个属性）
2）外边距是可以为负值的
3）margin塌陷现象（margin重叠）：上下重叠，取最大值，左右不重叠
4）Margin：0 auto 居中原理
注意：
使用margin:0 auto; 的盒子，必须有width，有明确的width
只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
margin:0 auto;是在居中盒子，不是居中文本。文本居中要是有text-align：center；
7.正常流布局
宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
1）从上到下（块级），从左到右（行内）的格式布局
2）正常流是做不出来网页的
8.块级元素和内嵌元素的相互转换
块级元素可以设置为行内元素
行内元素可以设置为块级元素
display是“显示模式”的意思，用来改变元素的行内、块级性质（inline，block）
9.元素浮动
浮动是CSS里面布局用的最多的属性。
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
1）当元素浮动时，元素会被视为块级（拿a标签距离）
浮动元素脱标，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
2）只有横向浮动，并没有纵向浮动。
3）浮动元素相互贴靠
结论：假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
float的属性值有none、left、right，有几个要点：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
4）浮动元素的字围效果
10.利用浮动来制作导航栏
11.清除浮动
浮动对页面的影响是什么？
解决高度塌陷，会去追尾
12.定位的几种类型：静态定位、相对定位、绝对定位、固定定位
静态定位：就是我们的标准流
相对定位：不脱标 形影分离
默认被设置为auto
在文档流中所占据的的空间被保留，用途一般有两个
1）用来微调元素
2）和绝对定位一起来使用
绝对定位：脱标
绝对定位的元素完全从文档流中脱离出来，所占空间不保留
固定定位：脱标
13.处理溢出
Overflow:hidden
14.设置元素的可见性
visibility:visible(可见)、hidden(隐藏)、inherit(继承)(默认)
15.visibility:hidden;和display:none;区别：
visibility:hidden;在隐藏时其空间仍存在，而display:none;在隐藏时其空间不存在(即完全消失)。
16.处理元素的重叠
使用z-index属性可以设置元素的高低，这个属性仅在position为absolute或relative时有效