對於元素的定位，常用的方式大致有以下四種，重難點在於flex定位
1. 文件流預設定位
當沒有人為的為元素設定定位方式時，元素的預設方式為文件流定位。此時元素的位置主要取決於元素的型別、大小以及周圍元素的大小。
元素一共分為三種：
塊級元素（block）
內聯元素（inline）
inline-block元素
block元素：
inline元素：
inline-block元素：
將一種型別的元素顯示為另一種型別，如要給inline標籤設定寬高時，可以對標籤型別進行轉換。
display : inline-block
要轉換為其它型別，同理
2. float浮動定位
浮動定位是給元素新增float屬性，其取值可以是left、right或none（不浮動）。設定了flat的元素，會盡量向上，向左/右移動。
特點：為父元素新增overflow屬性，取值隨意
在父元素中新增乙個新增了clear且height:0的元素用於撐開父元素，置於底部
3. position層定位
層定位即為元素新增position屬性，其取值有一下幾種情況：
層定位中的引數：
4. flex定位（重點）
flex定位意為彈性布局，使用時為元素新增display：flex。
基本概念：使用了flex布局的元素稱為容器，它的內層子元素稱為專案。容器有兩根軸，水平的主軸和垂直的交叉軸，專案沿主軸排列（這裡說的都是預設情況）。
容器的六個屬性：
flex-direction，決定主軸的方向，有四種取值：
2. flex-wrap：決定噹噹專案在當前軸上排列不下時的換**況，有三種取值：
3. flex-flow：是屬性flex-direction和屬性flex-wrap的簡寫形式，預設值是row nowrap
4. justify-content：決定專案在主軸上的對齊方式，有五種取值：
5. align-item：決定專案在交叉軸上如何對齊
6. align-content：決定多行專案的垂直對齊方式。如果專案只有一行，該屬性不起作用
專案的六個屬性：
order：定義專案的排列順序，預設為0。數值越小，排列越靠前
flex-grow：定義專案的放大比例，預設值是0（即存在空餘空間也不放大）。如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink：定義專案的縮小比例，預設為1。如果所有專案的flex-shrink屬性值都為1，在空間不足時會等比例縮小。如果某乙個專案的取值為0，其他專案為1，則空間不足時前者不縮小，負值對該屬性無效
flex-basis：定義了在分配多餘空間之前，專案佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小
flex是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (即1 1 auto) 和 none (即0 0 auto)
align-self：允許單個的專案使用和其他專案不同的對齊方式（可以覆蓋align-item），預設為auto，其他五個可能的取值都和align-item相同
CSS 布局方式
由全球資訊網聯盟制定的一系列標準，包括 在css中存在三種定位機制 標準文件流特點 塊級元素特點 行級元素特點 注意 塊級元素和行級元素都是盒子模型 盒子模型 網頁布局的基石,由4部分組成 盒子模型的三維立體結構 盒子模型尺寸 盒子模型尺寸 邊框 外邊距 內邊距 盒子中的內容尺寸 注意 區別在於內容...
CSS布局方式
浮動布局 絕對定位布局 固定定位fixed 絕對定位absolute 實現橫向兩列布局 能夠實現橫向多列布局 常見的布局有以下幾種 單列水平居中布局,一列定寬一列自適應布局,兩列定寬一列自適應布局,兩側定寬中間自適應三列布局。重點介紹一下常見的三列布局之 聖杯布局和雙飛翼布局。兩者都屬於三列布局，是...
CSS布局總結
css布局模型有三種，分別為流動模型 flow 浮動模型和層模型。流動模型 為預設模型，當未設定其他模型時使用。塊狀元素在包含其的父元素內部，從上到下順序排列，每個一行 設定寬度時按設定的寬度顯示 內聯元素和內聯塊狀元素都會在包含其的元素內從左到右水平順序顯示。無法通過設定left right to...