3个最重要的CSS概念是浮动、定位和盒模型。这些概念控制在页面上安排和显示元素的方式，形成CSS的基本布局。
盒模型的复杂性和特点
- 页面上的每个元素被看做是一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。
- 它占位的宽度=margin+border+padding+width;高度同理 （标准盒模型）
- 内边距出现在内容区域的周围。如果在元素上添加背景，那么背景会应用于由内容和内边距组成的区域。因此常使用内边距在内容周围创建一个隔离带，是内容不会与背景混在一起
- 添加边框会在内边距的区域外边加一条线。这些线可以有多种样式，比如实线、虚线和点线
- 在边框外边是外边距。外边距是透明的。一般使用它控制元素之间的间隔
- CSS 2.1还包含outline属性。与border属性不同，轮廓绘制在元素框之上，不影响元素的大小和定位，有助于修复bug，不影响页面布局
- 内边距、边框和外边距都是可选的，默认值为0
- width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但会增加元素的总尺寸
- 内边距、边框和外边距可以应用与一个元素的所有边，也可以应用于单独的边
- IE 在混杂模式中使用自己的非标准模型
- 它占位的宽度=margin+width 因为 width=border+padding+contentWidth
- css3 提供了解决方法 box-sizing 但是不建议用，尽量回避这个问题。不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素或子元素
如何以及为什么使用外边距叠加
- 当两个或更多外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者
- 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内狂、浮动框或绝对定位框之间的外边距不会增加
绝对定位和相对定位之间的差异
- 相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后可以通过设置垂直或水平位置，让这个元素“相对于”它的起点移动
- 在使用相对定位时，无论是否移动，元素仍然会占据原来的空间。因此，移动云素会导致它覆盖其他框
- 绝对定位是元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在一样
- 绝对定位的元素的位子是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的
- 相对于已相对定位的祖先元素对框进行绝对定位，需要为相对定位设置宽度和高度
浮动和清理是如何工作的
- 浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的块矿表现的就像浮动框不存在一样
- 它不在文档流中，所以它不占据空间
可视化模型
