css頁面布局技術允許我們拾取網頁中的元素，並且控制它們相對正常布局流、周邊元素、父容器或者主視口/視窗的位置。涉及到以下技術細節：
文件流浮動
定位css**
盒模型（flex）
網路（grid）
不對頁面進行任何布局控制，html元素完全按照原始碼**現的先後次序顯示。
預設情況下，塊級元素的內容寬度是其父元素的寬度的100％，並且與其內容一樣高。內聯元素高寬與他們的內容高寬一樣。您不能對內聯元素設定寬度或高度——它們只是位於塊級元素的內容中。 如果要以這種方式控制內聯元素的大小，則需要將其設定為類似塊級元素display: block;。
預設情況下，塊級元素在視口中垂直布局——每個都將顯示在上乙個元素下面的新行上，並且它們的外邊距將分隔開它們。內聯元素表現不一樣——它們不會出現在新行上；相反，它們互相之間以及任何相鄰（或被包裹）的文字內容位於同一行上，只要在父塊級元素的寬度內有空間可以這樣做。如果沒有空間，那麼溢流的文字或元素將向下移動到新行。
如果兩個相鄰元素都在其上設定外邊距，並且兩個外邊距接觸，則兩個外邊距中的較大者保留，較小的乙個消失——這叫外邊距摺疊,
外邊距合併：塊級元素的上外邊距和下外邊距有時會合併（或摺疊）為乙個外邊距，其大小取其中的最大者。（注：浮動元素和絕對定位元素的外邊距不會摺疊）。其出現在：相鄰元素之間、父元素與其第乙個或最後乙個子元素之間、空的塊級元素。1、float 屬性有四個可能的值：
2、浮動元素會脫離正常的文件布局流，並吸附到其父容器的左邊（右側）。在正常布局中位於該浮動元素之下的內容，此時會圍繞著浮動元素，填滿其右側（左側）的空間。
3、例項——中間寬度自適應三欄布局：
4、清除浮動
浮動的弊端：所有在浮動下面的自身不浮動的內容都將圍繞浮動元素進行包圍（環繞）。
有一種簡單的方法可以解決這個問題——clear屬性。當你把這個應用到乙個元素上時，它主要意味著"此處停止浮動"——這個元素和原始碼中後面的元素將不浮動，除非您稍後將乙個新的float宣告應用到此後的另乙個元素。
clear可以取三個值：
5、浮動布局的侷限性
浮動布局不能根據單一列的高度自適應同步更新其餘列的高度。這也是flexbox（後文詳細介紹）的優勢。
定位技術(position)允許我們將乙個元素從它在頁面的原始位置準確地移動到另外乙個位置。
定位型別：
1、相對定位 relative
佔據在正常的文件流中。
top, bottom, left, right 相對於原本的位置
2、絕對定位 absolute
定位的元素應該在文件流中所占有的空間不再存在。不再存在於正常文件布局流中。
top, bottom, left, right 相對於最近的position不為static祖先元素。
3、固定定位 fixed
這與絕對定位的工作方式完全相同。
top, bottom, left, right 相對於瀏覽器。
4、stickytodo
彈性盒子是一種新技術，但在如今各個瀏覽器都廣泛支援的情況下，它已經開始準備廣泛應用了。 彈性盒子提供了工具，允許快速建立曾經被證明用css很難實現的一些複雜，靈活的布局和功能。
flex是現代的布局解決方案，能夠靈活的實現幾乎所有布局。
詳情請看阮一峰老師的部落格：
flex 布局教程：語法篇 - 阮一峰的網路日誌www.ruanyifeng.com
網格布局（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-area屬性指定專案放在哪乙個區域。
justify-self屬性設定單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個專案。
align-self屬性設定單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用於單個專案。
詳情請看阮一峰老師的部落格：
css grid 網格布局教程 - 阮一峰的網路日誌www.ruanyifeng.com
水平垂直居中布局的多種實現方式 - 掘金juejin.im
Bootstrap4 網格系統
col 第乙個 是裝置型別，第二個 是控制項寬度的佔比 螢幕被等分為12，col 1寬度是1 12，col 6寬度是50 col 12寬度是100 給應用了class的element，新增上style background color red 通過背景色可以比較方便地看出效果。bootstrap 4...
bootstrap之網格布局
一.實現原理 網格布局是通過容器的大小，平均分為12份 可以修改 再調整內外邊距,和 布局有點類似但是也存在區別。實現步驟如下 1 資料行.row 必須包含在容器.container 中,以便賦予核實的對齊方式和內間距設定 class container class row div div 2 在行...
Bootstrap4的網格系統
bootstrap4 網格系統 bootstrap 提供了一套響應式 移動裝置優先的流式網格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多 12 列。bootstrap 4 的網格系統是響應式的，列會根據螢幕大小自動重新排列。網格類 bootstrap 4 網格系統有以下 5...