關(guān)注我的個人博客:https://pinbolei.cn，獲取更多內(nèi)容
一、怪異盒模型的簡介
二、彈性盒模型
Flexbox布局（Flexible Box）模塊(目前處于W3C工作草案)旨在提供一個更佳有效的布局方式，更好的控制項目的對齊和自由分配容器空間，即使它們的大小是未知的或動態(tài)的。因此得其名"flex"。
Flex布局背后的主要思想是給容器控制項目（Flex項目）的寬度、高度的能力，使用Flex項目可以自動填滿容器的可用空間（主要是適應(yīng)所有類型的顯示設(shè)備和屏幕大?。?/code>Flex容器使用Flex項目可以自動放大與收縮，用來填補可用的空閑空間。
注：Flexbox布局比較適合Web應(yīng)用程序的一些小組件和小規(guī)模的布局，而Grid布局（網(wǎng)格單元格布局）更適合用于一些大規(guī)模的布局。
因為Flexbox是一個模塊，而不是一個單一的屬性，他涉及很多東西。其中有些概念是需要我們?nèi)ダ斫獾?，比如“flex容器”-->一些屬于容器上的屬性(父元素)；“flex項目”-->一些屬于容器子元素上的屬性；
三、Flex容器屬性(添加在父級元素上的)
1）display：定義一個Flex容器，根據(jù)其取的值來決定是內(nèi)聯(lián)還是塊。Flex容器會為其內(nèi)容建立新的伸縮格式化上下文。
兩種方式
display : flex
display : inline-flex
這樣做將元素定義為彈性容器，其子元素即彈性子元素。
flex 值表示彈性容器為塊級。占用一行。
inline-flex 值表示彈性容器為行內(nèi)元素，可以多個元素并列在一行 。
2）flex-direction：創(chuàng)建方軸，從而定義Flex項目在Flex容器中放置的方向。
Flexbox是一種單方向的布局概念。認為Flex項目主要排列方式要么是水平排列，要么是垂直列排列
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
3）flex-wrap：默認情況之下，F(xiàn)lex項目都盡可能在一行顯示。你可以根據(jù)flex-wrap的屬性值來改變，讓Flex項目多行顯示。方向在這也扮演了一個重要角度，決定新的一行堆放方向。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
4）flex-flow(適用于flex容器元素)：
這是flex-direction和flex-wrap兩個屬性的縮寫。兩個屬性決定了伸縮容器的主軸與側(cè)軸。默認值是row nowrap（中間用空格隔開）。
語法：
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
5）justify-content：設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式
justify-content：flex-start | flex-end | center | space-between | space-around
當(dāng)彈性盒里一行上的所有子元素都不能伸縮或已經(jīng)達到其最大值時，這一屬性可協(xié)助對多余的空間進行分配。當(dāng)元素溢出某行時，這一屬性同樣會在對齊上進行控制
6）align-items：定義flex子項在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對齊方式。
align-items： flex-start | flex-end | center | baseline(項目位于容器的基線上) | stretch(默認值。);
伸縮項目可以在伸縮容器的當(dāng)前行的側(cè)軸上進行對齊，這類似于justify-content屬性，但是是另一個方向。align-items可以用來設(shè)置伸縮容器中包括匿名伸縮項目的所有項目的對齊方式。
7）align-content：
align-content：flex-start |flex-end|center|space-between|space-around | stretch
當(dāng)伸縮容器的側(cè)軸還有多余空間時，align-content屬性可以用來調(diào)準(zhǔn)伸縮行在伸縮容器里的對齊方式，這與調(diào)準(zhǔn)伸縮項目在主軸上對齊方式的justify-content屬性類似。請注意本屬性在只有一行的伸縮容器上沒有效果。
四、Flex項目屬性(添加在子元素上的)
1）order：<integer>：用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨撝?。
默認情況，F(xiàn)lex項目是按文檔源的流順序排列。然而，在Flex容器中可以通過order屬性來控制Flex項目的順序源。設(shè)置或檢索彈性盒模型對象的子元素出現(xiàn)的順序。
order定義將會影響 <' position '> 值為static元素的層疊級別，數(shù)值小的會被數(shù)值大的蓋住。
2）flex-grow：number該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。如果所有Flex項目的flex-grow設(shè)置為1時，表示Flex容器中的Flex項目具有相等的尺寸。如果你給其中一個Flex項目設(shè)置flex-grow的值為2，那么這個Flex項目的尺寸將是其他Flex項目兩倍（其他Flex項目的flex-grow值為1）。注意：flex-grow取負值將失效。
3）flex-shrink：<number>設(shè)置或檢索彈性盒的收縮比率
根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間。注意：flex-shrink取負值將失效。
4）flex-basis:<length> | <percentage> | auto | content
設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。如果所有子元素的基準(zhǔn)值之和大于剩余空間，則會根據(jù)每項設(shè)置的基準(zhǔn)值，按比率伸縮剩余空間。
如果設(shè)置為0，內(nèi)容不在考慮周圍額外空間。如果設(shè)置為auto，額外空間會基于flex-grow值做分布。如下圖所示：
5）flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
復(fù)合屬性。設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。
flex是flex-grow，flex-shrink和flex-basis三個屬性的縮寫。第二個和第三個參數(shù)(flex-shrink和flex-basis)是可選值。其默認值是0 1 auto。
如果縮寫「flex: 1」, 則其計算值為「1 1 0%」
如果縮寫「flex: auto」, 則其計算值為「1 1 auto」
如果「flex: none」, 則其計算值為「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值
6）align-self：auto | flex-start | flex-end | center | baseline | stretch
定義flex子項單獨在側(cè)軸（縱軸）方向上的對齊方式。
注意：float，clear和vertical-align屬性在Flex項目中無效。
五、媒體查詢的概念和應(yīng)用
1）媒體查詢的引用方法
在實際中媒體類型有近10中之多，實際常用的也就那么幾種。不同的媒體類型引用方法也是有很多的，常見的媒體類型的引用主要有：link標(biāo)簽、xml方式、@import和css3新增的@import幾種。
1、 link方法：
link方法引入類型其實就是在<link>標(biāo)簽引入樣式的時候，通過link標(biāo)簽中的media屬性來制定不同的媒體類型，這種方式引入媒體類型時常跟著引用的樣式文件走。如：
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
2、 @media方式
@media是css3中新引進的一個特性，被稱為媒體查詢。在頁面中也可以通過這個屬性來引入媒體查詢，它和@import有點類似，也是具有2中方式
A：在樣式文件中引入媒體類型：
@media screen{ 選擇器{ 你的樣式代碼 } }
B：使用@media 引入媒體類型的方式是在head標(biāo)簽中的style引入
<head>
<style type="text/css">
@media screen{選擇器{你的代碼樣式}}
</style>
</head>
2）常用Media query設(shè)備特性
六、Responsive web design 響應(yīng)式設(shè)計布局概念
1）Responsive 設(shè)計特點
Responsive 網(wǎng)頁設(shè)計不但要考慮其元素布局的秩序，還要做到“有求必應(yīng)”，因此需要滿足三個條件。
1、網(wǎng)站必須建立靈活的網(wǎng)格基礎(chǔ)；
2、引用到網(wǎng)站的圖片必須是可伸縮的；
3、不同的顯示風(fēng)格，需要在Media Query上設(shè)置不同的樣式
注意：缺少任何一個功能，就不能稱為是合格的Responsive 網(wǎng)頁設(shè)計
2）Responsive 中的術(shù)語
1、流體網(wǎng)格
流體網(wǎng)格是一個簡單的網(wǎng)格系統(tǒng)，這種網(wǎng)格設(shè)計參考了流體設(shè)計中的網(wǎng)格系統(tǒng)，將每個網(wǎng)格格子使用百分比單位
來控制網(wǎng)格大小，這種網(wǎng)格系統(tǒng)最大的好處就是讓網(wǎng)格大小隨時根據(jù)屏幕尺寸做出相對應(yīng)的比例縮放。
2、彈性圖片
彈性圖片指的是不給圖片設(shè)置固定尺寸，而是根據(jù)流體網(wǎng)格進行縮放，用于適應(yīng)各種網(wǎng)格的尺寸。而實現(xiàn)方法是
比較簡單，一條代碼就能確定 比如img{max-width：100%；}但是在IE8瀏覽器會出現(xiàn)圖片失蹤的bug，如果
我們給每個斷點提供不同的圖片是比較頭疼的一件事情，所以我們可以使用：
1）、使用background-image給元素添加背景圖片
2）、顯示/隱藏父元素，給父元素使用不同的圖片，然后通過media query來控制這些圖片顯示或者隱藏
3、媒體查詢
媒體查詢可以根據(jù)設(shè)備的尺寸，查詢出適配的樣式，使用這個屬性可以根據(jù)用戶終端設(shè)備適配對
應(yīng)的樣式，Responsive 設(shè)計最關(guān)注的的是根據(jù)用戶的使用設(shè)備的當(dāng)前寬度，web頁面將加載一個備用的樣式，
實現(xiàn)特定的頁面風(fēng)格
4、屏幕分辨率
指的是用戶使用的設(shè)備瀏覽web頁面時的分辨率，比如智能手機瀏覽器，移動電腦瀏覽器，平板
電腦瀏覽器和桌面瀏覽器。只有知道有哪種分辨率，才能調(diào)用對應(yīng)的樣式。
5、主要斷點：
簡單來說就是設(shè)備寬度的臨界點，媒體特性中min-width和max-width對應(yīng)的屬性值就是響應(yīng)式
設(shè)計中的斷點值，簡單來說就是使用主要斷點和次要斷點，創(chuàng)建媒體查詢的條件，而每個斷點會對應(yīng)一個樣式文件。
設(shè)置斷點要把握以下3個要點
1）、滿足主要的斷點
2）、有可能的話添加一些別的斷點
3）、設(shè)置高于1024px的桌面斷點。
3）Responsive 布局技巧
1.盡量少用無關(guān)緊要的div
2.不要使用內(nèi)聯(lián)元素(inline)
3.盡量少用js或flash
4.丟去沒用的絕對定位和浮動樣式
5.屏棄任何冗余結(jié)構(gòu)和不使用100%設(shè)置
那么有哪些設(shè)置能幫助Responsive確定更好的布局呢？
1.使用HTML5 Doctype和相關(guān)指南
2.重置好你的樣式（reset.css）
3.一個簡單的有語義的核心布局
4.給重要的網(wǎng)頁元素使用簡單的技巧，比如導(dǎo)航菜單之類元素
4）Meta 標(biāo)簽定義
為了讓智能手機根據(jù)媒體查詢匹配對應(yīng)的樣式，特意添加了一個特殊的meta標(biāo)簽。主要作用就是讓智能手機瀏覽網(wǎng)頁時能進行優(yōu)化，并且可以自定義可視區(qū)域的尺寸和縮放級別。
設(shè)置Meta標(biāo)簽
<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這段代碼的幾個參數(shù)解釋：
width = device-width：寬度等于當(dāng)前設(shè)備的寬度
initial-scale： 初始的縮放比例（默認設(shè)置為1.0）
minimum-scale：允許用戶縮放到的最小比例（默認設(shè)置為1.0）
maximum-scale：允許用戶縮放到的最大比例（默認設(shè)置為1.0）
user-scalable：用戶是否可以手動縮放（默認設(shè)置為no，因為我們不希望用戶放大縮小頁面）
常見的一些網(wǎng)頁布局單位
px：絕對單位，頁面按精確像素展示
em：相對單位，基準(zhǔn)點為父節(jié)點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內(nèi)1em不是一個固定的值。
rem：相對單位，可理解為”root em”, 相對根節(jié)點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。
(另外需注意chrome強制最小字體為12號，即使設(shè)置成 10px 最終都會顯示成 12px，當(dāng)把html的font-size設(shè)置成10px,子節(jié)點rem的計算還是以12px為基準(zhǔn)，所以網(wǎng)上很多文章提到的將html的font-size設(shè)為10方便計算不是那么可取)。
rem在移動端應(yīng)用可參考淘寶的頁面http://m.taobao.com (html的font-size通過動態(tài)計算獲取)
vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持
七、CSS3多列布局
1、column-count：分欄的個數(shù)
2、column-width：分欄的寬度
3、column-gap：分欄的間距
4、column-rule：分欄的邊框
5、column-span：all/1合并分欄 火狐不支持
