切換盒模型：
box-sizing : content-box 是W3C盒子模型
box-sizing: border-box是IE盒子模型
盒模型：Margin Edge / borderEdge / padding Edge / Content Edge
標準盒模型 : width 等于 content部分寬度； height 等于 content部分高度
IE盒模型 ：
width等于content + padding + border總寬度；height等于content + padding + border總高度
塊元素 VS 行內元素
塊級元素：獨占一行，width默認100%，可以控制height,margin,padding,border
塊級元素：
address blockquote 【canvas article aside audio】(HTML5)
dd div dl fieldset form 【figcaption figure footer】(HTML5)
h1, h2, h3, h4, h5, h6
hr noscript ol p pre section table 【header hgroup output 】(HTML5)
tfoot ul 【video】HTML5
行內元素：可以設置border，padding，margin-left，margin-right,border-top,border-top
行內元素
b,big,i,small,tt
abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var
a,bdo,br,img,map,object,q,script,span,sub,sup,button,input,label,select,textarea
頁面布局
塊級元素進行左右布局——
float + clear
讓一個元素既不占一行，又能設置寬高屬性——display
display：block(塊級) | inline(行內) | inline-block(行內塊級) | flex(彈性盒布局)
彈性布局
display：flex;
.box{
/*主軸方向：左到右 | 右到左 | 上到下 | 下到上*/
flex-direction : row | row-reverse | column | column-reverse;
/*換行：不換 | 換行 | 換行并第一行在下方*/
flex- wrap : nowrap | wrap | wrap-reverse;
/*主軸方向和換行簡寫*/
flex-flow : <flex-direction> || <flex-wrap>
/*主軸對齊方式：左對齊 | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/
justify-content: flex-start | flex-end | center | baseline | stretch;
/*交叉軸對齊的方式：頂端對齊 | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 |文本基線對齊 */
align-items : flex-start | flex-end | center | baseline |stretch;
/*多主軸對齊：頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 上下平均分布*/
align-content : flex-start | flex-end | center | space-between | space-around | stretch
}
但flex不能解決兼容性問題,因此還需要
position和float
網(wǎng)頁的布局
Flex——Flexible Box，解釋為“彈性布局”，為盒模型提供最大的靈活性
任何一個容器都可以指定為Flex布局
.box{ display:flex; }
行內元素也可使用Flex布局
.box{ display:inline-flex; }
webkit內核的瀏覽器，必須加上-webkit前綴
.box{ display:-webkit-flex; display:flex;}
設置為Flex布局以后，子元素的float、clear、vertical-align屬性失效
Flex布局相關
采用Flex布局的元素，稱為FLex容器（flex container）;
所有子元素自動成為容器成員，稱為Flex項目（flex item）;
容器默認存在兩根軸：水平的主軸(main axis）和垂直的交叉軸cross axis
定位部分
position:absolute(絕對) | relative (相對) | fixed (固定) | static（默認沒有定位） | inherit
-
absolute:生成絕對定位元素，相對于static定位以外的第一個父元素進行定位。 位置通過left, top, right, bottom；即相對的元素可能是 -
fixed：生成絕對定位的元素, 相對于瀏覽器窗口進行定位。 -
relative:生成相對定位的元素。相對于其正常位置進行定位。 在一個相對定位的元素上設置top,right,bottom,left; -
static:默認，沒有定位，元素出現(xiàn)在正常的流中；top,bottom,left,right及z-index會被忽略 -
inherit: 規(guī)定應該從父元素繼承position屬性的值
生成一個網(wǎng)頁的過程：
1.HTML代碼轉換成DOM
2.CSS代碼轉化成CSSOM（CSS Object Model）
3.結合DOM和CSSOM，生成一棵渲染樹（包含每個節(jié)點的視覺信息）
4.生成了布局(layout),即被所有渲染樹的所有節(jié)點進行平面合成。
5.將布局繪制到（paint）在屏幕上。
