1. 正常文檔流（Normal Flow）
- 默認(rèn)情況下頁面使用的正常流（normal flow）進(jìn)行排版
- 在正常流中坐慰，元素盒子（boxes）會(huì)基于文檔的寫作模式（writing mode）一個(gè)接一個(gè)地排列
2. 浮動(dòng)（Float）
浮動(dòng)用于將盒子置于左邊或者右邊僵腺，同時(shí)內(nèi)容環(huán)繞鲤孵。
要讓一個(gè)元素進(jìn)行浮動(dòng)，需要為該元素設(shè)置一個(gè)值為left或right的float屬性辰如。默認(rèn)值為none普监。
.item {
float: left
}
值得強(qiáng)調(diào)的是，當(dāng)你使某個(gè)元素浮動(dòng)并讓文字環(huán)繞它時(shí)琉兜，內(nèi)容的line box被截?cái)嗔丝Ｈ绻阕屢粋€(gè)元素浮動(dòng)，同時(shí)為緊跟著的包含文本的元素設(shè)置一個(gè)背景色豌蟋，你會(huì)發(fā)現(xiàn)背景色會(huì)出現(xiàn)在浮動(dòng)元素下方廊散。
如果你想要在浮動(dòng)元素和環(huán)繞的文本之間創(chuàng)建邊距，你需要給浮動(dòng)元素設(shè)置外邊距梧疲。在文本元素上設(shè)置外邊距只會(huì)讓其相對于容器縮進(jìn)允睹。例如在下面這個(gè)例子中运准，你就需要為左側(cè)浮動(dòng)的圖片設(shè)置右邊距和下邊距。
<div class="container">
<div class="item"></div>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
<p>Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>
body {
padding: 20px;
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}
p {
margin: 0 0 1em 0;
}
.container {
width: 500px;
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 10px;
}
.item {
width: 100px;
height: 100px;
float: left;
margin: 0 20px 20px 0;
background-color: rgba(111,41,97,.3);
}
2.2. 清除浮動(dòng)
使用浮動(dòng)后它后面所有接下來的元素都會(huì)環(huán)繞它直到內(nèi)容處于它下方且開始應(yīng)用正常文檔流缭受。如果你想要避免這種情況胁澳，可以手動(dòng)去清除浮動(dòng)。
添加clear屬性即可贯涎。使用left值可以清除左浮動(dòng)效果听哭，right值為右浮動(dòng)慢洋，both則會(huì)清除左右浮動(dòng)塘雳。
.clear {
clear: both;
}
但是，當(dāng)你發(fā)現(xiàn)在容器內(nèi)有了一個(gè)浮動(dòng)元素普筹，同時(shí)容器文本內(nèi)容過短時(shí)就會(huì)出現(xiàn)問題败明。文本盒子會(huì)被繪制在浮動(dòng)元素下，然后接下來的部分會(huì)以正常流繪制在其后太防。
最常見的清除浮動(dòng)的hack方案是：在容器內(nèi)添加一個(gè)CSS偽元素妻顶，并將其clear屬性設(shè)置為both。
<div class="container">
<div class="item"></div>
<p>Pea horseradish azuki bean lettuce avocado asparagus okra.</p>
</div>
body {
padding: 20px;
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}
p {
margin: 0 0 1em 0;
}
.container {
width: 500px;
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 10px;
}
.item {
width: 100px;
height: 100px;
float: left;
margin: 0 20px 20px 0;
background-color: rgba(111,41,97,.3);
}
.container::after {
content: "";
display: table;
clear: both;
}
2.3. 塊級(jí)格式化上下文（Block Formatting Context）
清除浮動(dòng)的另一個(gè)方法是在容器內(nèi)創(chuàng)建BFC蜒车。一個(gè)BFC元素完全包裹住了它內(nèi)部的所有元素讳嘱，包括內(nèi)部的浮動(dòng)元素，保證浮動(dòng)元素不會(huì)超出其底部酿愧。創(chuàng)建BFC的方式有很多種沥潭，其中最常用的一種清楚浮動(dòng)的方式是為元素設(shè)置除visible（默認(rèn)）之外的overflow屬性值。
.container {
overflow: auto;
}
為了使清除浮動(dòng)的意圖更加直觀嬉挡，并且避免BFC的負(fù)面影響钝鸽，你可以使用flow-root作為display屬性的值。display: flow-root做的唯一的一件事就是去創(chuàng)建一個(gè)BFC庞钢，因此可以避免其他創(chuàng)建BFC方法帶來的問題拔恰。
.container {
display: flow-root;
}
2.4. 浮動(dòng)的一些遺留用法
在新的布局方式出現(xiàn)以前，float經(jīng)常會(huì)被用來創(chuàng)建多欄布局基括。我們會(huì)給一系列元素設(shè)置寬度并且將它們一個(gè)接一個(gè)進(jìn)行浮動(dòng)颜懊。通過為浮動(dòng)元素設(shè)置一些精細(xì)的百分比大小可以創(chuàng)建類似網(wǎng)格的效果。
我不建議在當(dāng)下仍然過度地使用這種方法风皿。但是河爹，在現(xiàn)有的網(wǎng)站中，這種方式仍然會(huì)存在許多年揪阶。因此昌抠，當(dāng)你碰到一個(gè)頁面里面到處是float的應(yīng)用，可以確定它就是用的這種技術(shù)鲁僚。
3. 定位（Positioning）
想要把一個(gè)元素從正常流中移除炊苫，或者改變其在正常文檔流中的位置裁厅，可以使用CSS中的position屬性。當(dāng)處于正常文檔流時(shí)侨艾，元素的position屬性為static执虹。在塊級(jí)維度上元素會(huì)一個(gè)接一個(gè)排列下去，當(dāng)你滾動(dòng)頁面時(shí)元素也會(huì)隨著滾動(dòng)
3.1. 相對定位（relative postioning）
如果一個(gè)元素具有屬性position: relative唠梨，那么它偏移的參照位是其原先在正常文檔流中的位置袋励。你可以使用top、left当叭、bottom和right屬性來相對其正常流位置進(jìn)行移動(dòng)茬故。
.item {
position: relative;
bottom: 50px;
}
- 頁面上的其它元素不會(huì)受到影響。該元素在正常流中的位置會(huì)被保留蚁鳖，因此你需要自己去處理一些元素內(nèi)容覆蓋的情況磺芭。
<div class="container">
<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
<div class="item"></div>
<p>Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>
body {
padding: 20px;
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}
p {
margin: 0 0 1em 0;
}
.container {
width: 500px;
border: 5px solid rgb(111,41,97);
border-radius: .5em;
padding: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: rgba(111,41,97,.3);
position: relative;
bottom: 50px;
}
3.2. 絕對定位（absolute postioning）
給一個(gè)元素設(shè)置position: absolute屬性可以將其完全從正常流中移除。其原本占據(jù)的空間也會(huì)被移除醉箕。該元素會(huì)定位會(huì)相對于視口容器钾腺，除非其某個(gè)祖先元素也是定位元素（position值不為static）。
因此讥裤，當(dāng)你為某個(gè)元素設(shè)置position: absolute時(shí)放棒，首先發(fā)生的變化是該元素會(huì)定位在視口的左上角。你可以通過設(shè)置top己英、left间螟、bottom和right偏移量屬性來將元素移動(dòng)到你想要的位置。
.item {
position: absolute;
top: 20px;
right: 20px;
}
通常情況下你并不希望元素相對于視口進(jìn)行定位剧辐，而是相對于容器元素寒亥。在這種情況下，你需要為容器元素設(shè)置一個(gè)除了默認(rèn)static之外的值荧关。
由于給一個(gè)元素設(shè)置position: relative并不會(huì)將其從正常流中移除溉奕，所以通常這是一個(gè)不錯(cuò)的選擇。給你想要相對的容器元素設(shè)置position : relative忍啤，就可以讓絕對定位的元素相對其進(jìn)行偏移加勤。
3.3. 固定定位（fixed positioning）
大多數(shù)情況下，position: fixed的元素會(huì)相對于視口定位同波，并且會(huì)從正常文檔流中被移除鳄梅，不會(huì)保留它所占據(jù)的空間。當(dāng)頁面滾動(dòng)時(shí)未檩，固定的元素會(huì)留在相對于視口的位置戴尸，而其他正常流中的內(nèi)容則和通常一樣滾動(dòng)。
.item {
position: fixed;
top: 20px;
left: 100px;
}
為了使一個(gè)固定定位的元素不相對于視口進(jìn)行定位冤狡，你需要為容器元素設(shè)置transform孙蒙、perspective项棠、filter三個(gè)屬性之一（不為默認(rèn)值none）。這樣固定的元素就會(huì)相對于該塊級(jí)元素偏移挎峦，而非視口香追。
3.4. STICKY 定位
設(shè)置position: sticky會(huì)讓元素在頁面滾動(dòng)時(shí)如同在正常流中，但當(dāng)其滾動(dòng)到相對于視口的某個(gè)特定位置時(shí)就會(huì)固定在屏幕上坦胶，如同fixed一般透典。這個(gè)屬性值是一個(gè)較新的CSS屬性，在瀏覽器兼容性上會(huì)差一些顿苇，但在不兼容的瀏覽器中會(huì)被忽略并會(huì)退到正常的滾動(dòng)情況
.item {
position: sticky;
top: 0;
}
4. 彈性布局（Flex Layout）
彈性盒子（Flexbox）布局是一種為一維布局而設(shè)計(jì)的布局方法峭咒。一維的意思是你希望內(nèi)容是按行或者列來布局。你可以使用display: flex來將元素變?yōu)閺椥圆季帧?/p>
.container {
display: flex;
}
該容器的直接子元素會(huì)變?yōu)閺椥皂?xiàng)（flex item）岖圈，并按行排列讹语。
4.1. 彈性盒子的軸（axes）
在上面的例子中钙皮，我們會(huì)稱彈性項(xiàng)在行內(nèi)是從起始位置開始排列蜂科，而不是說它們是左對齊。這些元素會(huì)按行排列是因?yàn)槟J(rèn)的flex-direction值為row短条，row代表了文本的行文方向导匣。由于我們工作的環(huán)境是英文（中文也是如此），一種自左向右的語言茸时，行的開始位置就是在左邊贡定，因此我們的彈性項(xiàng)也是從左邊開始的。因此flex-direction的值被定義為彈性盒子的主軸（main axis）
交叉軸（cross axis）則是和主軸垂直的一條軸可都。如果你的flex-direction是row并且彈性項(xiàng)是按照行內(nèi)方向排列的缓待，那么交叉軸就是塊級(jí)元素的排列方向。如果flex-direction是column那么彈性項(xiàng)就會(huì)以塊級(jí)元素排列的方向排布命浴，然后交叉軸就會(huì)變?yōu)?code>row露泊。
4.2. 方向和次序
彈性盒子模型讓我們可以通過為flex-direction屬性設(shè)置row-reverse或column-reverse值來改變主軸上彈性項(xiàng)的方向
example: Smashing Guide to Layout: flex-direction on Codepen
4.3. 一些Flex的屬性
這些flex的屬性是用來控制彈性項(xiàng)在主軸上空間大小的歌逢。這三個(gè)屬性是：
- flex-grow
- flex-shrink
- flex-basis
通常可以使用它們的簡寫形式：flex瘫镇。第一個(gè)值代表flex-grow，第二個(gè)是flex-shrink答姥，而第三個(gè)則是flex-basis铣除。
.item {
flex: 1 1 200px;
}
flex-basis會(huì)為彈性項(xiàng)設(shè)置未拉伸和壓縮時(shí)的初始大小。在上面的例子中鹦付，大小是200px尚粘，因此我們會(huì)給每個(gè)項(xiàng)200px的空間大小。但是大多數(shù)情況下容器元素大小不會(huì)正好被分為許多200px大小的項(xiàng)敲长，而是可能有一些不足或剩余空間郎嫁。flex-grow和flow-shrink屬性允許我們在容器大小不足或有空余時(shí)控制各個(gè)彈性項(xiàng)的大小互捌。
如果flex-grow的值是任意的正數(shù)，那么彈性項(xiàng)會(huì)被允許拉伸來占據(jù)更多的空間行剂。因此秕噪，在上面的例子中，當(dāng)各項(xiàng)被設(shè)為200px后厚宰，所有多余的空間會(huì)被每個(gè)彈性項(xiàng)平分并填滿腌巾。
如果flex-shrink的值為任意的正數(shù)，那么當(dāng)彈性項(xiàng)被設(shè)置了flex-basis后铲觉，元素溢出容器時(shí)會(huì)進(jìn)行收縮澈蝙。在上面這個(gè)CSS的例子中，如果容器空間不足撵幽，每個(gè)彈性項(xiàng)會(huì)等比例縮放以適應(yīng)容器的大小灯荧。
flex-grow和flex-shrink的值可以是任意的正數(shù)。一個(gè)具有較大flex-grow值的彈性項(xiàng)會(huì)在容器有剩余空間時(shí)拉伸更大的比例盐杂；而一個(gè)具有更大flex-shrink值的項(xiàng)則會(huì)在容器空間不足時(shí)被壓縮的更多逗载。
理解這些屬性是理解如何使用彈性布局的關(guān)鍵，下面列出的一些資源會(huì)幫助我們進(jìn)一步學(xué)習(xí)其中的細(xì)節(jié)链烈。當(dāng)你需要在容器的一個(gè)維度上拉伸或者壓縮一些元素時(shí)厉斟，你可以考慮使用彈性盒子模型。如果你發(fā)現(xiàn)你正嘗試在行和列兩個(gè)維度上排列你的內(nèi)容强衡，你需要的是網(wǎng)格模型（grid）擦秽，這時(shí)彈性盒子模型很可能不是最合適的工具了。
5. 網(wǎng)格布局（grid layout）
CSS網(wǎng)格布局（grid layout）是一種用來進(jìn)行二維布局的技術(shù)漩勤。二維（two-dimesional）意味著你希望按照行和列來排布你的內(nèi)容感挥。和彈性盒子類似，網(wǎng)格布局也需要設(shè)置一個(gè)display值越败。你可以為容器元素設(shè)置display: grid触幼，并且使用grid-template-columns和grid-template-rows屬性來控制網(wǎng)格中的行與列。
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px;
}
作者：AlienZHOU
原文鏈接：https://juejin.im/post/5b3b56a1e51d4519646204bb
來源：掘金
