一六敬、css3盒模型

css3增加了盒模型屬性box-sizing碘赖，能夠事先定義盒模型的尺寸解析方式。box-sizing：content-box? border-box? ?

content-box? ? 元素的寬 = width + padding + border

border-box? ? 元素的寬 = width（包含padding和border）保持盒子整體不會(huì)變

二外构、伸縮布局(彈性盒)盒模型

css3引入一種新的布局模式——flexbox布局普泡，即伸縮布局盒模型，用來(lái)提供一個(gè)更有效的方式制定审编、調(diào)整和分布一個(gè)容器里的項(xiàng)目布局撼班，即使他們的大小是未知或者動(dòng)態(tài)的。

主要思想是讓容器有能力讓其子項(xiàng)目能夠改變其寬度垒酬、高度（甚至順序）砰嘁，以最佳的方式填充可用空間（主要是為了適應(yīng)所有類型的顯示設(shè)備和屏幕大小）勘究。flex容器會(huì)使子項(xiàng)目擴(kuò)展來(lái)填充可用空間矮湘，或縮小他們以防止溢出容器。

flexbox布局功能主要具有以下幾點(diǎn)：

1口糕、屏幕和瀏覽器窗口大小發(fā)生變化也可以靈活調(diào)整布局缅阳；2、指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間景描，從而調(diào)增伸縮項(xiàng)目的大惺臁孤里；3、指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間橘洞，分配到伸縮項(xiàng)目之前捌袜、之后或之間；4炸枣、指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍虏等；5、控制元素在頁(yè)面上的布局方向适肠；6霍衫、按照不同于標(biāo)準(zhǔn)流所指定的排序方式對(duì)屏幕上的元素重新排序。

flexbox模型中的專業(yè)術(shù)語(yǔ)：

1侯养、主軸和側(cè)軸2敦跌、主/側(cè)軸、側(cè)/側(cè)軸方向3逛揩、主/側(cè)軸起點(diǎn)柠傍、主/側(cè)軸終點(diǎn)4、主/側(cè)軸長(zhǎng)度5辩稽、伸縮容器(大div)和伸縮項(xiàng)目（子元素或內(nèi)容）

彈性盒模型的使用：

聲明伸縮容器（父元素）：display：flex惧笛；需要加前綴display：-webkit-flex；display：-moz-flex逞泄；display：-ms-flex患整；display：-o-flex；display：flex喷众；

display: -webkit-flex;display: -moz-box-flex;display: -ms-flexbox;display: -o-flex;

伸縮項(xiàng)目（子元素）-webkit-flex:1;-moz-flex:1;-ms-flex:1;-o-flex:1;flex:1;

-webkit-flex: 1;-moz-box-flex:1 ;-ms-flex:1;-moz-box-flex:1 ;

伸縮容器屬性：

1各谚、伸縮流方向 flex-direction 主要用來(lái)創(chuàng)建主軸，定義伸縮項(xiàng)目在伸縮容器中的方向

? row：從左向右 row-reverse：與row相反到千； column：從上到下 column-reverse：與column相反昌渤；

2、伸縮換行 flex-wrap：

? nowrap 不換行? ? 默認(rèn)值父阻，不管超出還是不超出都不會(huì)換行 wrap 換行? ? 一旦伸縮項(xiàng)目超出伸縮容器愈涩，那么就會(huì)換行 wrap-reverse 換行反向? ? 主軸水平時(shí)望抽，上下反向加矛，主軸垂直時(shí)，左右反向煤篙；

3斟览、伸縮流方向與換行 flex-flow? 縮寫形式。

? flex-flow：flex-direction? flex-wrap;? 兩個(gè)值同時(shí)定義或者單獨(dú)定義都生效

4辑奈、主軸對(duì)齊 justify-content 主要用來(lái)定義伸縮項(xiàng)目沿主軸線的對(duì)齊方式苛茂；

? flex-start：伸縮項(xiàng)目向一行的起始位置靠齊已烤； flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊； center：伸縮項(xiàng)目向一行的中間位置靠齊妓羊； space-between：伸縮項(xiàng)目會(huì)平均的分布在行里胯究； space-around：伸縮項(xiàng)目會(huì)平均的分布在行里，兩端保留一半的空間躁绸；

5裕循、側(cè)軸對(duì)齊 align-items 伸縮項(xiàng)目行在側(cè)軸上的對(duì)齊方式

? flex-start：伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距 緊靠住 該行在側(cè)軸起始邊； flex-end：伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距 緊靠住 該行在側(cè)軸終點(diǎn)邊净刮； center：伸縮項(xiàng)目的外邊距盒 在該行的側(cè)軸上居中放置剥哑； baseline：伸縮項(xiàng)目根據(jù)伸縮項(xiàng)目的基線對(duì)齊； stretch：伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器淹父。

6株婴、align-self（加在子元素上）：主要用來(lái)設(shè)置單獨(dú)伸縮項(xiàng)目在側(cè)軸的對(duì)齊方式，可以覆蓋align-items暑认。 flex-start：伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距 緊靠住 該行在側(cè)軸起始邊困介；（元素位于容器的開(kāi)頭） flex-end：伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距 緊靠住 該行在側(cè)軸終點(diǎn)邊；（元素位于容器的結(jié)尾） center：伸縮項(xiàng)目的外邊距盒 在該行的側(cè)軸上居中放置蘸际；（元素位于容器的中間） stretch：伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器逻翁。（元素被拉伸以適應(yīng)容器）

早上講過(guò)的值，大多數(shù)是加在父元素上面的捡鱼，flex八回、align-self是加在子元素上面的

7、堆棧伸縮行 align-content(行與行之間的對(duì)齊方式) 定義多個(gè)伸縮行的對(duì)齊方式驾诈；? 往往要與換行同時(shí)應(yīng)用缠诅，沒(méi)有換行就不存在多行的情況。 flex-start：各行向伸縮容器的起點(diǎn)位置堆疊乍迄；（沒(méi)有行距） flex-end：各行向伸縮容器的結(jié)束位置堆疊管引；（底部對(duì)其沒(méi)有行距） center：各行向伸縮容器的中間位置堆疊；（居中沒(méi)有行距） space-between：各行在伸縮容器中平均分布闯两；（兩端對(duì)齊褥伴，中間自動(dòng)分配） space-around：各行在伸縮容器中平均分布，兩端保留一半的空間漾狼；（自動(dòng)分配距離）

伸縮項(xiàng)目屬性：

1重慢、顯示順序 order （加在子元素上）默認(rèn)狀態(tài)是按照標(biāo)準(zhǔn)流的順序排列，在flexbox模型里逊躁，可以通過(guò)order改變伸縮項(xiàng)目的順序似踱。

不定義order的伸縮項(xiàng)目會(huì)排到前面

?

order：1； 排第一

order：2； 排第二

三核芽、多列布局

css3多列布局可以自動(dòng)將內(nèi)容按指定的列數(shù)排列囚戚，這種特性實(shí)現(xiàn)的效果和報(bào)紙、雜志類排版非常相似轧简。

核心屬性：columns：column-width 列寬? column-count 列數(shù)column-width：定義每列列寬驰坊； 類似于最小寬度min-width； auto 自適應(yīng)哮独；column-count：定義分列列數(shù)庐橙；最多列數(shù)，auto自適應(yīng)（由列寬借嗽、容器寬和列間距決定）态鳖，也可固定column-gap：定義列間距； 不能為負(fù)數(shù)恶导；column-rule：定義列邊框浆竭；與定義邊框一樣：2px dashed #ccc;column-span：定義多列布局中子元素的跨列效果；通常用于標(biāo)題惨寿； none：不跨列邦泄； all：跨所有列

main:標(biāo)簽規(guī)定文檔的主要內(nèi)容。元素中的內(nèi)容對(duì)于文檔來(lái)說(shuō)應(yīng)當(dāng)是唯一的裂垦。在一個(gè)文檔中顺囊，不能出現(xiàn)一個(gè)以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>蕉拢、<aside>特碳、<footer>、<header> 或 <nav>晕换。午乓、

-----------------------------補(bǔ)充

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0闸准，即如果存在剩余空間益愈，也不放大。如果所有項(xiàng)目的flex-grow屬性都為1夷家，則它們將等分剩余空間（如果有的話）蒸其。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1库快，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍摸袁。

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1缺谴，即如果空間不足但惶，該項(xiàng)目將縮小耳鸯。

如果所有項(xiàng)目的flex-shrink屬性都為1湿蛔，當(dāng)空間不足時(shí)膀曾，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0阳啥，其他項(xiàng)目都為1添谊，則空間不足時(shí)，前者不縮小察迟。負(fù)值對(duì)該屬性無(wú)效斩狱。

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）扎瓶。瀏覽器根據(jù)這個(gè)屬性所踊，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto概荷，即項(xiàng)目的本來(lái)大小秕岛。

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間误证。不常用继薛，還在不斷變化中。

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫愈捅，默認(rèn)值為0 1 auto遏考。