常用布局方式

固定布局

注：設(shè)置了固定寬度的外包裹，里面的各個(gè)模塊也是固定寬度而非百分比膘融。大多數(shù)設(shè)計(jì)者選擇960或760px的固定寬度。960px最適合1024×768或者更高的分辨率，有一點(diǎn)空間設(shè)置margin馁害。如果設(shè)計(jì)者想讓布局適應(yīng)800×600分辨率的用戶褐缠，可以使用760px的寬度，它仍然適用于更大的分辨率。

• 優(yōu)點(diǎn)：
  1. 固定寬度布局更容易使用律姨，在設(shè)計(jì)方面更容易定制振峻。
  2. 在所有瀏覽器中寬度一樣,不設(shè)置min-width和max-width，來(lái)防止內(nèi)容縮放引起的布局混亂择份。
• 缺點(diǎn)：
  1. 對(duì)于使用高分辨率的用戶扣孟，固定寬度布局會(huì)留下很大的空白。
  2. 屏幕分辨率過(guò)小時(shí)需要垂直滾動(dòng)條荣赶。

流體布局

流體布局凤价，主體部分都是用了百分比寬度，因此可以自適應(yīng)用戶的分辨率拔创。

• 優(yōu)點(diǎn)：
  1. 流動(dòng)布局頁(yè)面對(duì)用戶更友好料仗，因?yàn)樗茏赃m應(yīng)用戶的設(shè)置。
  2. 頁(yè)面周圍的空白區(qū)域在所有分辨率和瀏覽器下都是相同的伏蚊，在視覺(jué)上更美觀立轧。
• 缺點(diǎn)：
  1. 設(shè)計(jì)者更難控制用戶所見，并可能忽略掉一些錯(cuò)誤躏吊，因?yàn)樵谔囟ǖ姆直媛氏驴雌饋?lái)好的氛改。
  2. 視頻以及其他設(shè)置了寬度的內(nèi)容可能需要多種寬度以適應(yīng)不同分辨率的用戶。

浮動(dòng)布局

根據(jù)內(nèi)容是固定尺寸還是百分比有可以劃分為：

1. 流體浮動(dòng)布局
2. 固定浮動(dòng)布局

定位布局

根據(jù)內(nèi)容是固定尺寸還是百分比有可以劃分為：

1. 流體定位布局
2. 固定定位布局

使用定位布局的重要知識(shí)點(diǎn)---設(shè)置參照基準(zhǔn)點(diǎn)：

1. 將父元素設(shè)為相對(duì)定位比伏，且不設(shè)置坐標(biāo)
2. 如果父元素設(shè)置了相對(duì)定位胜卤，子元素的決定定位將以父元素的基準(zhǔn)點(diǎn)為參照基準(zhǔn)點(diǎn)

CSS3新增屬性box-sizing

1. box-sizing:屬性值content-box(默認(rèn)值：元素的寬高包含邊框和內(nèi)邊距)/border-box(元素的寬高包含邊框和內(nèi)邊距)
2. 為了適應(yīng)低版本瀏覽器需要加前綴。

了解CSS3新增的多列布局

通過(guò) CSS3赁项，您能夠創(chuàng)建多個(gè)列來(lái)對(duì)文本進(jìn)行布局 - 就像報(bào)紙那樣葛躏！

傳統(tǒng)布局實(shí)現(xiàn)多列（3列及以上）布局的問(wèn)題

1. 實(shí)現(xiàn)起來(lái)麻煩，很不方便
2. 后期維護(hù)更改困難

多列屬性:

1. columns 規(guī)定設(shè)置 column-width 和 column-count 的簡(jiǎn)寫屬性悠菜。

   • column-width 規(guī)定列的寬度舰攒。(該寬度為縮放時(shí)的最小寬度，默認(rèn)為auto)
   • column-count 規(guī)定元素應(yīng)該被分隔的列數(shù)悔醋。默認(rèn)為auto

   -webkit-columns: 200px 3;

2. column-rule 設(shè)置所有 column-rule-* 屬性的簡(jiǎn)寫屬性摩窃。

   • column-rule-color 規(guī)定列之間規(guī)則的顏色。
   • column-rule-style 規(guī)定列之間規(guī)則的樣式芬骄。
   • column-rule-width 規(guī)定列之間規(guī)則的寬度猾愿。

   -webkit-column-rule: 1px rgb(57, 115, 207) dashed;

3. column-span 規(guī)定元素應(yīng)該橫跨的列數(shù)。默認(rèn)值為1账阻，可以設(shè)置為all

4. column-gap 規(guī)定列之間的間隔蒂秘。

5. column-fill 規(guī)定如何填充列。 主流瀏覽器都不支持 column-fill 屬性淘太。

ul+tab快捷鍵提示前綴,快速設(shè)置前綴

彈性布局

事實(shí)上它是一種新類型的盒子模型姻僧，也有書上稱作彈性伸縮盒布局观挎。

比較新的布局方式：旨在提供一個(gè)更加有效的方式來(lái)布置，對(duì)齊和分布在容器之間的各項(xiàng)內(nèi)容段化，即使它們的大小是未知或者動(dòng)態(tài)變化的嘁捷。

彈性布局的主要思想是讓容器有能力來(lái)改變項(xiàng)目的寬度和高度，以填滿可用空間（主要是為了容納所有類型的顯示設(shè)備和屏幕尺寸）的能力显熏。

• 優(yōu)點(diǎn)：
  1. 應(yīng)用恰當(dāng)?shù)膹椥圆季謱?duì)用戶十分友好雄嚣。頁(yè)面中所有元素可以隨著用戶的偏好縮放。
  2. 對(duì)于同時(shí)喜歡流動(dòng)和定寬布局的設(shè)計(jì)師來(lái)說(shuō)喘蟆，彈性布局是完美的缓升，因?yàn)榍皟煞N布局的優(yōu)點(diǎn)在彈性布局中都能找到。
• 缺點(diǎn)：
  1. 正是因?yàn)榈谝粋€(gè)優(yōu)點(diǎn)蕴轨，這種布局會(huì)產(chǎn)生一個(gè)巨大的可用性問(wèn)題港谊。需要花更多時(shí)間理解和測(cè)試，讓布局適合所有用戶橙弱。
  2. 這種布局類型相對(duì)于其他兩個(gè)更難制作

彈性布局屬性：

1. display: flex | inline-flex; (適用于父類容器元素上)

   • box：將對(duì)象作為彈性伸縮盒顯示歧寺。（伸縮盒最老版本）
   • inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
   • flexbox：將對(duì)象作為彈性伸縮盒顯示棘脐。（伸縮盒過(guò)渡版本）
   • inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示斜筐。（伸縮盒過(guò)渡版本）
   • +++++++++++++++++++++上面可能被淘汰++++++++++++++++++++++++++++++++
   • flex：將對(duì)象作為彈性伸縮盒顯示。
   • inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示蛀缝。
   • float, clear and vertical-align 在flex項(xiàng)目中不起作用
   • css 多列（CSS columns）在彈性盒子中不起作用

2. flex-flow (適用于父類容器上)復(fù)合屬性顷链。
   設(shè)置或檢索伸縮盒對(duì)象的子元素排列方式∏海可以同時(shí)設(shè)置 flex-direction/flex-wrap

   • flex-direction (適用于父類容器的元素上):設(shè)置或檢索伸縮盒對(duì)象的子元素在父容器中的位置嗤练。
     • row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式在讶。
     • row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊煞抬，從后往前排，最后一項(xiàng)排在最前面真朗。
     • column：縱向排列此疹。
     • column-reverse:反轉(zhuǎn)縱向排列，從后往前排遮婶，最后一項(xiàng)排在最上面。
   • flex-wrap (適用于父類容器上) 設(shè)置或檢索伸縮盒對(duì)象的子元素超出父容器時(shí)是否換行湖笨。
     • nowrap：當(dāng)子元素溢出父容器時(shí)不換行旗扑。
     • wrap：當(dāng)子元素溢出父容器時(shí)自動(dòng)換行。
     • wrap-reverse：當(dāng)子元素溢出父容器時(shí)自動(dòng)換行,方向同 wrap反轉(zhuǎn)排列慈省。

3. justify-content (適用于父類容器上) 設(shè)置或檢索彈性盒子元素在主軸方向上的對(duì)齊方式臀防。
   * flex-start：彈性盒子元素將向行起始位置對(duì)齊。
   * flex-end：彈性盒子元素將向行結(jié)束位置對(duì)齊。
   * center：彈性盒子元素將向行中間位置對(duì)齊袱衷。
   * space-between:彈性盒子元素會(huì)平均地分布在行里捎废。
   * space-around:彈性盒子元素會(huì)平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半致燥。

   `注：主軸與側(cè)軸的概念`
   
   * 主軸就是彈性盒子子元素沿著排列的軸登疗；與主軸垂直的軸稱為側(cè)軸。
   * 如果你有 row ,則主軸是水平方向嫌蚤，側(cè)軸是垂直方向辐益。
   * 如果你有 column,則主軸是垂直方向，側(cè)軸是水平方向脱吱。
   

4. align-items (適用于父類容器上) 設(shè)置或檢索彈性盒子元素在側(cè)軸方向上的對(duì)齊方式智政。

   • flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
   • flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界箱蝠。
   • center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置续捂。
   • baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效宦搬。其它情況下疾忍，該值將參與基線對(duì)齊。
   • stretch：如果指定側(cè)軸大小的屬性值為'auto'床三，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸一罩，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。

5. align-self (適用于彈性盒模型子元素)設(shè)置或檢索彈性盒子元素自身在側(cè)軸方向上的對(duì)齊方式撇簿。

   • auto：如果'align-self'的值為'auto'聂渊，則其計(jì)算值為元素的父元素的'align-items'值，如果其沒(méi)有父元素四瘫，則計(jì)算值為'stretch'汉嗽。
   • flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
   • flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界找蜜。
   • center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置饼暑。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）洗做。
   • baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條弓叛，則該值與'flex-start'等效。其它情況下诚纸，該值將參與基線對(duì)齊撰筷。
   • stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸畦徘。

6. align-content (適用于父類容器上) 設(shè)置或檢索彈性盒堆疊伸縮行的對(duì)齊方式毕籽。

   • flex-start：各行向彈性盒容器的起始位置堆疊抬闯。彈性盒容器中第一行的側(cè)軸起始邊界緊靠住該彈性盒容器的側(cè)軸起始邊界，之后的每一行都緊靠住前面一行关筒。
   • flex-end：各行向彈性盒容器的結(jié)束位置堆疊溶握。彈性盒容器中最后一行的側(cè)軸起結(jié)束界緊靠住該彈性盒容器的側(cè)軸結(jié)束邊界，之后的每一行都緊靠住前面一行蒸播。
   • center：各行向彈性盒容器的中間位置堆疊睡榆。各行兩兩緊靠住同時(shí)在彈性盒容器中居中對(duì)齊，保持彈性盒容器的側(cè)軸起始內(nèi)容邊界和第一行之間的距離與該容器的側(cè)軸結(jié)束內(nèi)容邊界與第最后一行之間的距離相等廉赔。
   • space-between：各行在彈性盒容器中平均分布肉微。
   • space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半蜡塌。
   • stretch：各行將會(huì)伸展以占用剩余的空間碉纳。

7. order (適用于彈性盒模型容器子元素) 用整數(shù)值來(lái)定義排列順序，數(shù)值小的排在前面馏艾±筒埽可以為負(fù)值。

8. flex (適用于彈性盒模型子元素) 復(fù)合屬性琅摩。設(shè)置或檢索伸縮盒對(duì)象的子元素如何分配空間铁孵。

   • none：none關(guān)鍵字的計(jì)算值為: 0 0 auto
   • flex-grow flex-shrink flex-basis
   • flex-grow (適用于彈性盒模型容器子元素) 根據(jù)彈性盒子元素所設(shè)置的擴(kuò)展因子作為比率來(lái)分配剩余空間。
   • flex-shrink (適用于彈性盒模型容器子元素) 設(shè)置或檢索彈性盒的收縮比率（根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來(lái)收縮空間房资。）
   • flex-basis (適用于彈性盒模型容器子元素)
     • auto：無(wú)特定寬度值蜕劝，取決于其它屬性值
     • 用長(zhǎng)度值/百分比來(lái)定義寬度。不允許負(fù)值