CSS盒模型
盒模型
CSS盒模型(CSS2.1盒模型标准)从内到外依次为：
- content边或内边。content边环绕着盒的width和height指出的矩形，通常取决于元素的呈现内容。
- padding边。如果padding宽为0，则与content边相同。定义了内容与border的距离。
- border边。边框，可以通过定义border显示需要的元素的边框。
- margin边。定义了border与包含块的距离。margin的背景总是透明的，所以不能通过本元素的background指定背景样式。
box-sizing
box-sizing：content-box|border-box|inherit
在现在的浏览器中，widht和height默认指的是content的宽和高。设为border-box时，动态改变border和padding宽度，就不会撑破包含块了。
margin赋值
margin:
- 初始值为0，不使用继承，但可以通过继承关键字继承。可以为负值。
- margin-top、margin-bottom对不可替换的内联元素无效。
- margin-width可能为length（如px、em、rem、vm等）、百分比（参照包含块的宽度）、auto。
- margin的值为一个时，四个边都使用这一个值。为两个值时，第一个指定上下，第二个左右。四个值，上右下左。
- margin合并：正常流中两个或多个相邻的竖直方向上的margin会被合并。根元素的margin不合并，浮动元素绝对定位的元素不合并。
padding赋值
padding:
与margin不同在于，padding-width不能为auto，padding不会合并。
border赋值
因为对边框的设计的需求，border属性也越来越多。
- border-width：
{1,4} | inherit - border-color:
|transparent|inherit。在css3中，可以设置多种颜色，一种颜色对应一个像素。 - border-style:
| inherit。如none、hidden、dotted、solid等 - border-image: 可以使用图片，比较复杂，参考标准。
- border-radius: none|
{1,4}[/ {1,4}]?
块级元素与内联级元素
块级元素
p元素、div元素等许多html元素都是块级元素。diaplay设为block、list-item、table可以是一个元素变为块级的。块盒是参与块格式化上下文的盒，每个块级元素生成一个主块级盒，用来包含后代盒和生产的内容。
内联级元素
内联级元素是源文档中那些不会为其内容形成新块的元素，内容分布于多行，如内联图片等。display设为inline、inline-block、inline-table，可以使一个元素变成内联级。
流
决定元素的布局的属性主要有：position(staic|relative|absoluted|fixed|inherit，不继承)、float(left|right|none|inherit)。
常规流
默认情况下，或者position为static|relative时，元素属于常规流。
常规流中的盒属于一个格式化上下文，可能是块或内联。在一个格式化上下文中，盒在竖直方向上一个接一个放置，同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。浮动、绝对定位元素、非块盒的块容器（inline-block等）和overflow不为visible的块盒会为他们的内容建立一个新的块格式化上下文。内联格式化上下文中，盒是一个接一个水平放置的。
相对定位：和根据常规流摆放好后，进行相对原位置的移动。如top:1em，则向下移动1em。
浮动
将float设为left或right时，盒子会相对当前位置向左浮动或者向右浮动，直到其外边挨到包含块或者另一个浮动盒的外边。如果没有足够的水平空间来浮动，它会向下移动，直到空间合适。浮动元素会推开内联内容，如果希望浮动元素不浮于某个块级元素之上，该元素可以使用clear(left|right|both)。
绝对定位
当position设为absolute或者fixed时，元素脱离常规流，即不影响后面兄弟的布局，不进行margin合并。absolute是相对包含块的绝对定位，而fixed是相对视口的绝对定位。
同时使用绝对定位来处理网页的导航栏、页脚等。在处理导航栏时，经常希望导航栏一致在视口顶部，而主要内容从导航栏处往下排列。为了使导航栏为绝对定位，并且占据布局空间，可以使用伪元素::before、::after生产与导航栏高度相同的块，这样就更好的实现了既达到绝对定位的效果，又使其应用兄弟节点。
堆叠
可以使用z-index来指定堆叠顺序，其数越大，离用户越近。
绘制顺序（详细）大致为：
- 根元素
- 块级元素的背景（先颜色后图片）
- 具有负z-index的后代形成的堆叠上下文
- 流内非定位的块级后代
- 所有非定位的浮动后代
- 内联元素
- 所有定位具有z-index：auto或0的后代
- 定位大于等于1的后代形成的堆叠上下文。