1、box盒模型
在平常的web橫排布局中，會經(jīng)常用到float或display:inline-block，但是在多種不同寬度的移動設(shè)備的自適應(yīng)布局中用的話，還得設(shè)置百分比寬度和考慮清除浮動。
box-flex是css3新添加的盒子模型屬性,一個布局應(yīng)用就是布局的垂直等高、水平均分、按比例劃分。
使用需要加游覽器的前綴irefox(-moz)、opera(-0)、chrome/safari（-webkit)。
display:box;
必須給父容器定義該盒子屬性,子容器才可以進(jìn)行劃分,則該容器則定義為內(nèi)聯(lián)元素，內(nèi)部元素設(shè)置margin:0px auto無效的，要想使其居中只能通過父容器屬性。
2、flex盒模型
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流。
主軸 ：項目排列方向的軸（可以是水平或者垂直），每一行（列）項目代表一條軸
交叉軸：與主軸垂直的軸（可以是水平或者垂直）；
主軸（main axis）：伸縮容器的主軸，伸縮項目主要沿著這條軸進(jìn)行排列布局。
主軸起點（main-start）和主軸終點（main-end）：伸縮項目在伸縮容器內(nèi)從主軸起點向主軸終點方向。
主軸尺寸（main size）：伸縮項目在主軸方向的寬度或高度就是主軸的尺寸
側(cè)軸（cross axis）：垂直于主軸稱為側(cè)軸。
側(cè)軸起點（cross-start）和側(cè)軸終點（cross-end）：伸縮行從容器的側(cè)軸起點邊開始，到側(cè)軸終點。
側(cè)軸尺寸（cross size）：伸縮項目的在側(cè)軸方向的寬度或高度就是項目的側(cè)軸長度。
設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
(1)容器屬性（父元素屬性）
(2)項目屬性（子元素）
遠(yuǎn)近互聯(lián)前端小華整理發(fā)布，希望能對學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。
