盒子模型
1、宽高所划分的区域 contents
2、内边距 padding
3、边框 border
4、外边距 margin
box-sizing: border-box; //以边界为尺寸内容 content-box 以内容为边界
-moz-box-sizing: border-box; //firefox
-webkit-box-sizing: border-box; //chrome、Safari
-ms-box-sizing: border-box; //IE8以下
-o-box-sizing: border-box; //presto opera
4上 右 下 左
3上 左右 下
2上下 左右
1上下左右都是这个值
body 的margin值
IE8 -->上下16px,左右8px;
IE7 -->上下16px,左右11px;
定 位
绝对定位 position：absolute
与 left/right top/bottom 组合使用 /前后只能选其一
绝对定位就相当于在现有文档层新开了一个层
<div class='box1'>
<div class='box2'>
<div class='box3'></div>
</div>
</div>
.box1{width:300px;height:300px;background-color:green;margin:100px;}
.box2{width:200px;height:200px;background-color:blue;margin:50px}
.box3{width:100px;height:100px;background-color:red;
positon:absolute;}
这时box3往上找，box2没有定位元素，box1也没有，所以box3在HTML文档里定位在全局定位.。这时如果box1 的 position：relative|absolute的话，box3在box1里定位.同理，如果box2有position就在box2里
相对定位 position：relative
浮动：float
浮动流，块级元素（不带浮动和溢出隐藏属性的块级元素）无法识别浮动流元素的位置
内联、内联块、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置
清除浮动：
<div class='box1'>
<div class='box2'></div>
<div class='box3'> </div>
// ()
</div>
.box1{width:200px;background-color:green;border:10px solid #000}
.box2{width:100px;height:100px;background-color:blue;float:left}
.box3{width:100px;height:100px;background-color:blue;float:left}
这时因为块级元素无法识别float，所以box1无法被撑开，这时需要加清除浮动：在box3同级出加一个块级元素（可选为p）属性为clear: both
float以后，元素变成内联块级元素
伪类，伪元素
伪类：before after
一个冒号 是伪类 两个冒号就是伪元素
::after
伪类、伪元素里必须包含 content：
伪类伪元素可以很好地清除浮动：
div::after,
ul::after {
content："";
display: block;
clear: both;
}