第二天 CSS网页布局基本属性（position、display、float、z-index、clear、margin、padding、border）

css盒子模型

css盒子模型包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
内边距是指元素内容与边框的距离，边框（border）有宽度属性，外边距是指边框与其它盒子模型或网页body的距离。内外边距在使用时按照上（top）、右（right）、下（bottom）、左（left）分别赋值。

外边距合并：两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。

box-sizing : content-box|border-box|inherit，box-sizing是用户界面属性里的一种，跟盒子模型有关，在css reset中有可能会用到它。

content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width。

border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容。即总宽度=margin+width。很多CSS框架，都会对盒子模型的计算方法进行简化。

inherit ,规定应从父元素继承 box-sizing 属性的值。

position

position有absolute、relative、fixed三个常用属性值，absolute是指生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；relative是指生成相对定位的元素，相对于其正常位置进行定位；fixed是指生成绝对定位的元素，相对于浏览器窗口进行定位，鼠标滚动时，元素始终与窗口保持固定的距离。

display

display常用的属性值有none、block、inline、inline-block，none：此元素不会被显示；block：此元素将显示为块级元素，此元素前后会带有换行符，使用block时元素后会换行；inline：默认，此元素会被显示为内联元素，元素前后没有换行符；inline-block 行内块元素，相当于一行内的一个块元素，元素高度会增大至行高。

float

float 定义元素在哪个方向浮动，float可以控制同一等级下之后的所有元素都向该方向浮动，后面的元素会逐一朝一个方向挨着，当空间不够时就进入下一行。

z-index

z-index可以控制页面元素在z轴方向上的前后，数值大的元素在上面，数值小的元素在下面。

clear

clear：both可以用来清除同一等级的前面的第一个float的效果。