詳解CSS佈局
INTRO
CSS頁面佈局技術允許我們拾取網頁中的元素，並且控制它們相對正常佈局流、周邊元素、父容器或者主視口/視窗的位置。涉及到以下技術細節：
文件流
浮動
定位
css表格
盒模型（flex）
網路（grid）
文件流
不對頁面進行任何佈局控制，HTML元素完全按照原始碼中出現的先後次序顯示。
預設情況下，塊級元素的內容寬度是其父元素的寬度的100％，並且與其內容一樣高。內聯元素高寬與他們的內容高寬一樣。您不能對內聯元素設定寬度或高度——它們只是位於塊級元素的內容中。 如果要以這種方式控制內聯元素的大小，則需要將其設定為類似塊級元素
display： block；
。
預設情況下，塊級元素在視口中垂直佈局——每個都將顯示在上一個元素下面的新行上，並且它們的外邊距將分隔開它們。內聯元素表現不一樣——它們不會出現在新行上；相反，它們互相之間以及任何相鄰（或被包裹）的文字內容位於同一行上，只要在父塊級元素的寬度內有空間可以這樣做。如果沒有空間，那麼溢流的文字或元素將向下移動到新行。
如果兩個相鄰元素都在其上設定外邊距，並且兩個外邊距接觸，則兩個外邊距中的較大者保留，較小的一個消失——這叫外邊距摺疊，
外邊距合併：塊級元素的
上外邊距
和
下外邊距
有時會合並（或摺疊）為一個外邊距，其大小取其中的最大者。（注：浮動元素和絕對定位元素的外邊距不會摺疊）。其出現在：相鄰元素之間、父元素與其第一個或最後一個子元素之間、空的塊級元素。
浮動（float）
1、float 屬性有四個可能的值：
left
— 將元素浮動到左側。
right
— 將元素浮動到右側。
none
— 預設值， 不浮動。
inherit — 繼承父元素的浮動屬性。
2、浮動元素
會脫離正常的文件佈局流
，並吸附到其父容器的左邊（右側）。在正常佈局中位於該浮動元素之下的內容，此時會圍繞著浮動元素，填滿其右側（左側）的空間。
3、例項——中間寬度自適應三欄佈局：
<
h1
>
2 column layout example
h1
>
<
div
>
<
h2
>
1 column
h2
>
<
p
>
Lorem ipsum dolor sit amet， consectetur adipiscing elit。
p
>
div
>
<
div
>
<
h2
>
2 column
h2
>
<
p
>
Lorem ipsum dolor sit amet， consectetur adipiscing elit。 ， eget fermentum sapien。
p
>
div
>
<
div
>
<
h2
>
3 column
h2
>
<
p
>
Nam vulputate diam nec tempor bibendum。 Donec luctus augue eget malesuada ultrices。 Phasellus turpis est。
p
>
div
>
body
{
width
：
90
%
；
max-width
：
900
px
；
margin
：
0
auto
；
}
div
：
nth-of-type
（
1
）
{
background
：
#0ff
；
width
：
100
px
；
float
：
left
；
}
div
：
nth-of-type
（
2
）
{
background
：
#f0f
；
width
：
100
px
；
float
：
right
；
}
div
：
nth-of-type
（
3
）
{
background
：
#ff0
；
}
4、清除浮動
浮動的弊端：所有在浮動下面的自身不浮動的內容都將圍繞浮動元素進行包圍（環繞）。
有一種簡單的方法可以解決這個問題——
clear
屬性。當你把這個應用到一個元素上時，它主要意味著“此處停止浮動”——這個元素和原始碼中後面的元素將不浮動，除非您稍後將一個新的
float
宣告應用到此後的另一個元素。
clear
可以取三個值：
left
：停止任何活動的左浮動
right
：停止任何活動的右浮動
both
：停止任何活動的左右浮動
5、浮動佈局的侷限性
浮動佈局不能根據單一列的高度自適應同步更新其餘列的高度。這也是Flexbox（後文詳細介紹）的優勢。
定位（position）
定位技術（position）允許我們將一個元素從它在頁面的原始位置準確地移動到另外一個位置。
定位型別：
靜態定位(Static positioning)
是每個元素預設的屬性——將元素放在文件佈局流的預設位置——沒有什麼特殊的地方。
相對定位(Relative positioning)
相對於元素在正常的文件流中的位置移動它。不脫離文件流。
絕對定位(Absolute positioning)
將元素完全從頁面的正常佈局流中移出，相對於離元素最近的被定位的祖先元素（ancestor element）定位。
固定定位(Fixed positioning)
與絕對定位非常類似它是將一個元素相對瀏覽器視口固定。 在建立類似頁面滾動總是處於頁面上方的導航選單時非常有用。
1、相對定位 relative
佔據在正常的文件流中。
top， bottom， left， right 相對於原本的位置
2、絕對定位 absolute
定位的元素應該在文件流中所佔有的空間不再存在。不再存在於正常文件佈局流中。
top， bottom， left， right 相對於最近的position不為static祖先元素。
3、固定定位 fixed
這與絕對定位的工作方式完全相同。
top， bottom， left， right 相對於瀏覽器。
4、
sticky
todo
彈性盒子（flex）
彈性盒子是一種新技術，但在如今各個瀏覽器都廣泛支援的情況下，它已經開始準備廣泛應用了。 彈性盒子提供了工具，允許快速建立曾經被證明用CSS很難實現的一些複雜，靈活的佈局和功能。
flex是現代的佈局解決方案，能夠靈活的實現幾乎所有佈局。
詳情請看阮一峰老師的部落格：
網格佈局（grid）
網格佈局（Grid）是最強大的 CSS 佈局方案。
Grid 佈局與 Flex 佈局 有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。
Flex 佈局是軸線佈局，只能指定“專案”針對軸線的位置，可以看作是
一維佈局
。Grid 佈局則是將容器劃分成“行”和“列”，產生單元格，然後指定“專案所在”的單元格，可以看作是
二維佈局
。Grid 佈局遠比 Flex 佈局強大。
1、關鍵概念：
採用網格佈局的區域，稱為“容器”（container）。容器內部採用網格定位的子元素，稱為“專案”（item）。
容器裡面的水平區域稱為“行”（row），垂直區域稱為“列”（column）。
行和列的交叉區域，稱為“單元格”（cell）。
劃分網格的線，稱為“網格線”（grid line）
2、容器屬性
display： grid
指定一個容器採用網格佈局。
grid-template-columns
屬性定義每一列的列寬，
grid-template-rows
屬性定義每一行的行高。
grid-row-gap
屬性設定行與行的間隔（行間距），
grid-column-gap
屬性設定列與列的間隔（列間距）。
grid-auto-flow 屬性：劃分網格以後，容器的子元素會按照順序，自動放置在每一個網格。預設的放置順序是“先行後列”，即先填滿第一行，再開始放入第二行，
justify-items
屬性設定單元格內容的水平位置（左中右），
align-items
屬性設定單元格內容的垂直位置（上中下）。
justify-content
屬性是整個內容區域在容器裡面的水平位置（左中右），
align-content
屬性是整個內容區域的垂直位置（上中下）。
3、專案屬性
grid-column-start
屬性：左邊框所在的垂直網格線
grid-column-end
屬性：右邊框所在的垂直網格線
grid-row-start
屬性：上邊框所在的水平網格線
grid-row-end
屬性：下邊框所在的水平網格線
grid-area
屬性指定專案放在哪一個區域。
justify-self
屬性設定單元格內容的水平位置（左中右），跟
justify-items
屬性的用法完全一致，但只作用於單個專案。
align-self
屬性設定單元格內容的垂直位置（上中下），跟
align-items
屬性的用法完全一致，也是隻作用於單個專案。
詳情請看阮一峰老師的部落格：
佈局之水平垂直居中問題：
這篇文章寫得很好：