1.布局
a.实现等高div布局
利用display:table-cell;系列的属性实现，因为表格是自适应的。
注意：margin对display:table系列的属性不起作用，只能利用border-spacing.
b.双飞翼布局
<div class="wrap">
<div class="center">
<div class="text">bbb</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
.center,
.left,
.right {
height: 100%;
float: left;
}
.center {
width: 100%;
background-color: red;
}
.left {
width: 200px;
background-color: black;
margin-left: -100%;
}
.right {
width: 200px;
background-color: green;
margin-left: -200px;
}
.text {
margin-left: 200px;
margin-right: 200px;
}
c.多列布局
利用columns或者display：table-cell
总结：布局主要分为float布局，绝对定位布局和display的一些属性，以及负margin，弄清楚浮动，绝对定位的意思，布局就会很容易。
2.清除浮动的方法
.clear:after{
content:"";
height:0px;
display:block;
clear:both;
visibility: hidden;
}
或者利用overflow；
3.块级元素和行内元素
块级元素就是会占据一行的元素，例如：div,p,h1-h6,ul,li,form....
行内元素就是按照顺序在一行内排列，行不够宽时换行。
行内元素具有包裹性：定义其宽高没有意义，它只会根据内容的大小决定宽高，要想改变行内元素的宽高只能利用line-height和padding。
设置或检索内联元素在行框内的垂直对其方式。对应的脚本特性为vertical-align。
块级元素不设置宽度时，默认占据一行，设置宽度后，利用margin-left:auto,margin-right:auto;可实现水平居中。
4.float和position
float：浮动会导致高度塌陷，不会导致宽度塌陷。所以浮动之后的div可以一行排列。利用浮动进行多列布局时，浮动元素应该写在不浮动元素的前面。设置了float之后元素就会出现包裹性并且可以设置宽高，display变成inline-block。后面一个元素会围绕包裹前面的浮动元素。相当于先把元素变成inline-block的然后在飘到left/right。
如果设置黑色元素设置为absolute，则看不见aaa的内容。
position：定位。absolute，fixed会导致高度和宽度的塌陷，也就是对于文档流来说并没有这个元素，所以后面的元素会继续按照没有它的情况进行文档流布局。
设置posistion为absolute和fixed后，元素类似于display：inline-block，具有包裹性，但是又可以定义宽高。
设置relative并不会改变display。
取值有：
- static：默认，正常文档流，用处：在元素设置了top等定位时，设置position为static后自动回到文档流中。
- relative:相对定位，相对于当前元素文档流中的位置的定位。
- absolute:绝对定位，相对于父元素中第一个position属性值为relative/absolute/fixed的绝对定位。
- fixed:相对于浏览器窗口的位置，随着滚动条滑动永远处于窗口某一处。
设置了position的值后未设置top，left，right，bottom的值时，元素按照文档里分布。
当要儿子相对于粑粑绝对定位时，要把粑粑的position设置为relative，这是relative主要用途。
设置为relative的元素，对于文档流来说，它的位置就是当前的位置，设置top，left，right，bottom时产生的偏移对于文档流来说不理会，其会覆盖旁边的元素。
absolute，fixed，relative发生覆盖时，正常覆盖文档流，无论其定义在文档流前还是后。后面定义的absoulte如果发生重叠，会覆盖前面的。
重叠与z-index有关。z-index只有在元素设置了absolute，fixed，relative时有效。
5.盒模型
可以通过box-sizing进行盒模型的改变。分为border-box，content-box
border-box的样式：
.border-box {
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
border: 5px solid red;
background-color: black;
}
border-box中的width=padding+border+内容width
content-box的样式：
.content-box {
box-sizing: content-box;
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
border: 5px solid red;
background-color: black;
}
content-box中的width=内容width
