可视化格式模型
三个重要的css概念：浮动，定位，盒模型，形成css的基本布局
一.盒模型
1.内边距，是为了内容和背景区分开。外边距，是为了控制元素之间的间隔
2.outline属性和border属性不同，outline作为轮廓不影响元素的大小或定位
3.初始化 *{margin:0;
padding:0;
}
4.width不是一成不变的，当想达到100px宽，已知每个边有10px的外边距和5px的内边距，这时width要调成（100-10*2-5*2）=70px
外边距可以为负值
5.外边距叠加：两个外边距以上相遇时，外边距高度为叠加后高度较大者
注意：只有文档流中块框的垂直外边距才会发生外边距叠加。行内块，浮动或绝对定位之间的外边距不会叠加
二.定位
1.可视化格式模型：浏览器按照一定规则对文档树进行可视化处理
display可以改变框的类型，如display：block可以把行内元素（如锚，strong，span）转成块级元素（p，h，div）
display：none使生成的元素没有框。
修改行内框尺寸的唯一方法是修改行高或者水平边框，内边距，外边距
display：inline-block让元素像行内元素一样水平的依次排列
2.相对定位
使用相对定位，元素仍占据原来的空间
3.绝对定位
和相对定位一样，绝对定位的框可以从它包含块向上下左右移动，可以将元素定位在任何地方
z-index
子绝父相
4.固定定位：是绝对定位中的一种（不同在于固定元素的块是视口viewport），使创建总出现在窗口中相同位置的浮动元素
（效果就是页面的回到顶部。。。）
5.浮动模型
浮动框不在文档流，所以文档流中的块框表现的像浮动框不存在一样
框1右移，脱离文档流右移，直到它右边缘碰到框的右边缘
框1左浮，脱离文档流左移，直到它左边缘碰到框的左边缘。它此时不处于文档流，不占据空间，会覆盖框2，使框2在视图上消失。若三个都左浮，框一左移到左边缘，后面两个依次碰到前一个浮动框
6.行框和清理
浮动会让元素脱离文档流，不再影响不浮动的元素
要阻止行框围绕在浮动框的外边，用属性clear（left，right，both，none）
例子：有一个图片，想让他浮动到一个文本块的左边和文本包含在另一个具有背景颜色和边框的元素中
方法 一：对浮动的文本和图片清理
方法二：对包含的div
<div style="clear: both"></div>
方法三：overflow属性有hidden、auto可以处理内容过多溢出到框外，但是有弊端就是会自动清理任何浮动元素
可以用一个类名，来指定清理的元素出现在哪
