CSS盒子模型，排版布局的基石

簡介

在HTML中，有一個很重要的理論：塊元素和行內元素。在CSS中極其重要的一個理論——CSS盒子模型。在“CSS盒子模型”理論中，頁面中的所有元素都可以看成一個盒子，并且占據著一定的頁面空間。

一個頁面由很多盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構（往往是padding），二是理解多個盒子之間的相互關系（往往是margin）。

2 盒子模型概念

盒模型指的是網頁元素的結構。當指定一個元素的寬度或高度時，便設置了元素內容的尺寸，可以把每個元素都看成一個盒子，盒子模型是由4個屬性組成，號稱“盒尺寸四大家族”：

content（內容區），可以是文本或圖片 —— 變化多端
padding（內邊距），用于定義內容與邊框之間的距離 —— 溫和向內
margin（外邊距），用于定義當前元素與其它元素之間的距離 —— 激進對外
border（邊框），用于定義元素的邊框 —— 功勛卓越

此外，在盒子模型中，還有寬度（width）和高度（height）兩大輔助性屬性。記住，所有的元素都可以看成一個盒子。如下圖所示：

2.1 內容區

內容區是CSS盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他3個部分都是可選的。內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這里注意一點，width和height這兩個屬性是針對內容區content而言的，并不包括padding部分。當內容過多，超出width和height時，可以使用overflow屬性來指定溢出處理方式。

2.2 內邊距

內邊距，指的是內容區和邊框之間的空間，可以看成是內容區的背景區域。padding屬性接受長度值或百分比值，但不允許使用負值。關于內邊距的屬性有5種：padding-top、padding-bottom、padding-left、padding-right，以及綜合了以上4個方向的簡寫內邊距屬性padding。使用這5種屬性可以指定內容區與各方向邊框之間的距離。

2.2.1 元素的尺寸

因為CSS中默認的box-sizing是content-box，所以使用padding會增加元素的尺寸。

.box {
　  width: 80px;　  
    padding: 20px;
}

如果不考慮其他CSS干擾，此時.box元素所占據的寬度就應該是120像素（80px+20px×2），這其實是不符合現實世界的認知的，人們總是習慣把代碼世界和現實世界做映射，因此，新人難免會在padding的尺寸問題上踩到點坑。這也導致很多人樂此不疲地設置box-sizing 為border-box，甚至全局設置。

2.2.2 標簽元素內置的padding

ol/ul列表內置padding-left，但是單位是px不是em。
很多表單元素都內置padding。例如：所有瀏覽器<input>/<textarea>輸入框內置padding；所有瀏覽器<button>按鈕內置padding；所有瀏覽器<radio>/<chexkbox>單復選框無內置padding。

2.3 外邊距

外邊距，指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個重要手段。外邊距的屬性也有5種：margin-top、margin-bottom、margin-left、margin-right，以及綜合了以上4個方向的簡寫外邊距屬性margin。同時，CSS允許給外邊距屬性指定負數值，當外邊距為負值時，整個盒子將向指定負值的相反方向移動，以此產生盒子的重疊效果，這就是傳說中的“負margin技術”。

2.3.1 margin與元素尺寸

元素的內部尺寸

只有元素是“充分利用可用空間”狀態的時候，margin才可以改變元素的可視尺寸。比方說，如下CSS：

.header {
　width: 160px;　
  margin: 0 -5px;
}

此時元素寬度還是160像素，尺寸無變化。因為只要寬度設定，margin就無法改變元素尺寸，這和padding是不一樣的。

但是，如果是下面這樣的HTML和CSS：

<div class="header">
　  <div class="son">
</div></div>
.header { width: 160px; }
.menu {　margin: 0 -5px; }

則.menu元素的寬度就是165像素了，尺寸通過負值設置變大了，因為此時的寬度表現是“充分利用可用空間”。

元素的外部尺寸

只要元素具有塊狀特性，無論有沒有設置width/height，無論是水平方向還是垂直方向，即使發生了margin合并，margin對外部尺寸都著著實實發生了影響。

2.3.2 margin合并

塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合并為單個外邊距，這樣的現象稱為“margin合并”。

margin合并一般出現在以下3種場景：（1）相鄰兄弟元素margin合并。這是margin合并中最常見、最基本的。（2）父級和第一個/最后一個子元素。（3）空塊級元素的margin合并。
margin合并的計算規則把margin合并的計算規則總結為：“正正取大值”， “正負值相加” ，“負負最負值”。
margin合并的意義對于兄弟元素的margin合并其作用和em類似，都是讓圖文信息的排版更加舒服自然。父子margin合并的意義在于：在頁面中任何地方嵌套或直接放入任何裸<div>，都不會影響原來的塊狀布局。<div>是網頁布局中非常常用的一個元素，其語義是沒有語義，也就是不代表任何特定類型的內容，是一個通用型的具有流體特性的容器，可以用來分組或分隔。由于其作用就是分組的，因此，從行為表現上來看，一個純粹的<div>元素是不能夠也不可以影響原先的布局的。自身margin合并的意義在于可以避免不小心遺落或者生成的空標簽影響排版和布局。

2.3.3 margin:auto

margin:auto的填充規則如下。（1）如果一側定值，一側auto，則auto為剩余空間大小。（2）如果兩側均是auto，則平分剩余空間。

2.4 邊框

在CSS盒子模型中，邊框與我們之前學過的邊框是一樣的。邊框屬性有border-width、border-style、border-color，以及綜合了3類屬性的簡寫邊框屬性border。

border屬性總是能解決很多棘手的問題，在在圖形構建、體驗優化以及網頁布局這塊幾大放異彩，，同時保證其良好的兼容性和穩定性。下面我們一起看看border都有哪些精彩的特性表現。

2.4.1 為什么border-width不支持百分比值

我們通過比對筆記本、手機發現，雖然兩臺設備的尺寸差異很大，但是邊框的大小相比而言就可以忽略不計了。邊框是不會因為設備大就按比例變大的。因此，如果支持百分比值，是不是就意味著設備大了邊框也跟著變大？有一張圖片，大片區域都是白色的，在白底背景上和文字混在一起，就會有一片奇怪的空白區域，會讓人產生沒對齊的假象，此時，我們給這張圖片套個1px灰色邊框，區域就明顯了，對吧！設計的初衷就是為了這么點兒事，沒有需要使用百分比值的場景。于是，綜合這兩點，造成了border-width不支持百分比值。

2.4.2 border與圖形構建

border屬性可以輕松實現兼容性非常好的三角圖形效果，為什么可以呢？其底層原因受inset/outset 等看上去沒有實用價值的border-style屬性影響，邊框3D效果在互聯網早期其實還是挺潮的，那個時候人們喜歡有質感的東西，為了呈現逼真的3D效果，自然在邊框轉角的地方一定要等分平滑處理，然后不同的方向賦予不同的顏色。然后，這一轉角規則也被solid類型的邊框給沿用了。因此，我們就不難理解下面的4色邊框的表現了：

div {
　  width: 10px; height: 10px; 　  
    border: 10px solid; 　  
    border-color: #f30 #00f #396 #0f0;
}

運行一下上面的代碼看一下效果吧！

2.4.3 border與透明邊框技巧

這是提高用戶體驗的一個小技巧，尤其在移動端，我們的操作工具一般就是我們的手指，但是，我們的手指粗細可以媲美胡蘿卜，而屏幕尺寸就那么點兒，如果我們正在走路，則一些精致的圖標和按鈕很容易就點不中甚至誤點。

穩妥的方法是外部再嵌套一層標簽，專門控制點擊區域大小。如果對代碼要求較高，則可以使用padding或者透明border增加元素的點擊區域大小。

3 總結

現實生活中看到的盒子，有正方形、長方形、圓柱形等，依據形狀特點，可包裹不同物件。CSS中的盒子雖然沒有那么多的形狀，但在視覺呈現上不同類型的盒子還是會有很大的不同，有的盒子要占據一行，有的盒子不能定義外邊距、寬度和高度，有的盒子寬度和高度能自適應。CSS中用display指定盒類型（即框類型），常用的有 block（塊）、inline（行內）、inline-block（行內塊）、table（表格），以及CSS3新增的flexbox（伸縮盒）。 HTML 元素只有兩種默認的盒類型，即塊級元素（block-level element）和行內元素（inline-level element）。其中行內元素不可定義CSS屬性width、height、上下margin和上下padding。常用的span和div分別是行內元素和塊級元素。

由此可見，需要掌握的內容太多，要想學會所有布局相關的技術不太現實。高級的布局話題基于文檔流和盒模型等概念，這些是決定網頁元素的大小和位置的基本規則。因此理解和掌握如何設置元素的大小和位置至關重要。

4 最后的最后

為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！

TML

基本概念

HTML 是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS 樣式是表現。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等，所有這些用來改變內容外觀的東西稱之為表現。
JavaScript 是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單，或鼠標滑過表格的背景顏色改變，還有焦點新聞（新聞圖片）的輪換。有動畫的，有交互的一般都是用 JavaScript 來實現的。

2.常用標簽

強調語氣：<em>是斜體，<strong>是加粗
引用：<q>短文本引用，<blockquote>長文本引用
換行 <br />
水平橫線 <hr />
空格  
表格 <table><tbody>
加上后表格內容全部下載完才會顯示
行 <tr>
列 <td>
表格表頭 <th>
標題 <caption>
超鏈 <a>
例子：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
新標簽打開：target="_blank"
圖片 <img>，圖像可以是 GIF，PNG，JPEG 格式的圖像文件
例子：<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
表單 <form>
文本域 <textarea>
例子 <textarea rows="行數" cols="列數">文本</textarea>
cols 多行輸入域的列數；rows 多行輸入域的行數。這兩個屬性可用 CSS 樣式的 width 和 height 來代替：col 用 width、row 用 height 來代替
輸入框 <input type="text/password" name="名稱" value="文本" />
當 type=”text” 時，輸入框為文本輸入框
當 type=”password” 時, 輸入框為密碼輸入框
單/復選框 <input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
當 type=”radio” 時，控件為單選框，同一組單選框 name 命名要一致
當 type=”checkbox” 時，控件為復選框
提交按鈕 <input type="submit" value="提交">
重置按鈕 <input type="reset" value="重置">
下拉列表框 ` `
value <option value="提交值">選項</option>
選中 selected="selected"
多選 multiple="multiple"
標簽 <label for="控件id名稱">，標簽的 for 屬性中的值應當與相關控件的 id 屬性 值一定要相同

CSS

基本知識

CSS 樣式由選擇符和聲明組成，而聲明又由屬性和值組成。

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素。
聲明：在英文大括號{}中的的就是聲明，屬性和值之間用英文冒號{}分隔。當有多條聲明時，中間可以英文分號;分隔。

從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。優先級遵循就近原則，一般來說，內聯式 > 嵌入式 > 外部式。

內聯式

例子 <p style="color:red;font-size:12px">這里文字是紅色。</p>

嵌入式

外部式

例子：<link href="base.css" rel="stylesheet" type="text/css" />

CSS 選擇器

常見的類選擇器類型有如下幾種：

標簽選擇器，.標簽選擇器名稱{css樣式代碼;}
類選擇器，.類選器名稱{css樣式代碼;}
ID 選擇器，＃類選器名稱{css樣式代碼;}
子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素
包含選擇器，即加入空格 ,用于選擇指定標簽元素下的后輩元素
通用選擇器，匹配html中所有標簽元素，* {css樣式代碼;}類選擇器和ID選擇器都可以應用于任何元素，但 ID 選擇器只能在文檔中使用一次，可以使用類選擇器詞列表方法為一個元素同時設置多個樣式，ID 選擇器是不可以的。

子選擇器和包含選擇器區別：>作用于元素的第一代后代，空格作用于元素的所有后代。

另外還有兩種選擇符：

偽類選擇符，允許給 HTML 不存在的標簽（標簽的某種狀態）設置樣式。常用的有 a:hover{color:red;}
分組選擇符，為 HTML 中多個標簽元素設置同一個樣式時，可以使用分組選擇符,

。例如h1,span{color:red;}

CSS 的繼承、層疊和特殊性

CSS 的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定 HTML 標簽元素，而且應用于其后代。
特殊性：不同選擇器具有不同權值，標簽的權值為 1，類選擇符的權值為 10，ID選擇符的權值最高為 100。
層疊就是在 HTML 文件中對于同一個元素可以有多個 CSS 樣式存在，當有相同權重的樣式存在時，會根據這些 CSS 樣式的前后順序來決定，處于最后面的 CSS 樣式會被應用。

CSS 格式化排版

文字排版

字體，body{font-family:"Microsoft Yahei";}
字號、顏色，body{font-size:12px;color:#666}
粗體，body{font-weight:bold;}
斜體，body{font-style:italic;}
下劃線，body{font-style:italic;}
刪除線，body{text-decoration:line-through;}

段落排版

縮進，p{text-indent:2em;}
行間距（行高），p{line-height:1.5em;}
中文字間距、字母間距，letter-spacing:50px;和word-spacing:50px;
對齊，div{text-align:center;}

CSS 盒模型

元素分類

在 CSS 中，HTML 中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

塊級元素特點：

每個塊級元素都從新的一行開始，并且其后的元素也另起一行。
元素的高度、寬度、行高以及頂和底邊距都可設置。
元素寬度在不設置的情況下，是它本身父容器的 100%（和父元素的寬度一致），除非設定一個寬度。

設置 display:block就是將元素顯示為塊級元素，從而使元素具有塊狀元素特點。

注：img 標簽與 div 層之間會有空隙的解決方法是：使用 display:block 就可以消除間隙。

常用的內聯元素有：

內聯元素特點：

和其他元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊狀元素也可以通過代碼 display:inline將元素設置為內聯元素。

常用的內聯塊狀元素有：

inline-block 元素特點：

和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設置。

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼 display:inline-block就是將元素設置為內聯塊狀元素。

盒模型

邊框

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。

單獨設置下邊框的例子 div{border-bottom:1px solid red;}

寬度和高度

CSS 內定義的寬（width）和高（height），指的是 填充以里的內容范圍。一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

W3C 的標準 Box Model:

所以有時會設置 box-sizing: border-box;來避免計算內部元素大小

填充(padding)

元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。

例子：

邊界(margin)

元素與其它元素之間的距離可以使用邊界（margin）來設置，順序和填充一樣是上，右，下，左。padding 在邊框里，margin 在邊框外。

CSS 布局模型

CSS 包含 3 種基本的布局模型，用英文概括為：Flow、Layer 和 Float。在網頁中，元素有三種布局模型：

流動模型（Flow）
浮動模型 (Float)
層模型（Layer）

流動模型

流動模型，流動（Flow）是默認的網頁布局模式。

流動布局模型具有2個比較典型的特征：

塊狀元素 都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為 100%。實際上，塊狀元素都會以行的形式占據位置。
在流動模型下，內聯元素 都會在所處的包含元素內從左到右水平分布顯示。

浮動模型

任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動。例子：#div1{float:left;}

層模型

CSS 定義了一組定位（positioning）屬性來支持層布局模型。

層模型有三種形式：

絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)

絕對定位(position: absolute)

如果想為元素設置層模型中的絕對定位，需要設置 position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用 left、right、top、bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于 body 元素，即相對于瀏覽器窗口。

相對定位(position: relative)

如果想為元素設置層模型中的相對定位，需要設置 position:relative（表示相對定位），它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

簡單來說，就是相對元素原來的位置進行移動，元素本身所占的位置會保留。

固定定位(position: fixed)

設置 position:fixed;。fixed：表示固定定位，與 absolute 定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與 background-attachment:fixed; 屬性功能相同。

Relative 與 Absolute 組合使用,必須遵守下面規范：

參照定位的元素必須是相對定位元素的前輩元素
參照定位的元素必須加入 position:relative;
定位元素加入 position:absolute，便可以使用 top、bottom、left、right 來進行偏移定位了

例子(HTML 和 CSS 代碼分別為)：

顏色和長度

設置顏色的方法也有很多種：

英文命令顏色，p{color:red;}
RGB顏色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}
十六進制顏色，這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。p{color:#00ffff;}(當你設置的顏色是 16 進制的色彩值時，如果每兩位的值相同，可以縮寫一半，#0ff)RGB 配色表參考 RGB顏色對照表 - 在線工具 - 開源中國或者 RGB 配色表長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
像素
em，就是本元素給定字體的 font-size 值
% 百分比

設置小技巧

水平居中設置

行內元素。如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center來實現的。
定寬塊狀元素(塊狀元素的寬度 width 為固定值)。滿足定寬和塊狀兩個條件的元素是可以通過設置“左右 margin”值為 auto 來實現居中的。
不定寬塊狀元素。

加入 table 標簽(包括 <tbody>、<tr>、<td>)，為這個 table 設置“左右 margin 居中”
設置 display: inline方法：與第一種類似，顯示類型設為行內元素，然后使用 text-align:center來實現居中效果，進行不定寬元素的屬性設置。
給父元素設置 float 和 position:relative; left:50%，子元素設置 position:relative 和left: -50% 來實現水平居中。

垂直居中設置

父元素高度確定的單行文本。通過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度；line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的基線間的距離 )。
父元素高度確定的多行文本。使用插入 table (包括 tbody、tr、td)標簽，同時設置 vertical-align：middle。

另外，為元素設置以下兩個屬性之一會隱形改變 display 類型，元素的display顯示類型就會自動變為以display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不占滿父元素。

position: absolute

float: left 或 float:right

近忙里偷閑，給自己加油充電的時候，發現自己腦海中布局這塊非常的凌亂混雜，于是花了一些時間將一些常用的布局及其實現方法整理梳理了出來，在這里，分享給大家。

單列布局

單列布局是最常用的一種布局，一般是將一個元素作為容器，設置一個固定的寬度，水平居中對齊。

單列布局一般有兩種形式：

(圖片來源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一欄布局

一欄布局頭部、內容、底部寬度一致

效果圖

代碼實現

html

<header></header>
<main></main>
<footer></footer>
復制代碼

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
復制代碼

一欄布局（通欄）

一欄布局（通欄）頭部和底部寬度一致，占滿整個頁面，中間內容區域寬度較小不占滿屏幕。

效果圖

代碼實現

html

<header></header>
<main></main>
<footer></footer>
復制代碼

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
復制代碼

單列布局是最為基礎和簡單的一種，實現方法并不局限于以上兩種，大家可自由發揮，找到更多的方法來實現。

2列布局

2列布局的使用頻率也非常高，其實現效果主要就是將頁面分割成左右寬度不等的兩列。一般寬度較小的一列會設置為固定寬度，作為側邊欄之類的，而另一列則充滿剩余寬度，作為內容區。

在后臺管理系統及api文檔中使用較為廣泛。

效果圖

先來看看效果：

代碼實現

實現兩列布局的方法有很多，這里主要介紹兩種方法。

calc函數

calc() 函數用于動態計算長度值。實現思路很簡單，側邊欄寬度固定，設置絕對定位，使其脫離文檔流，內容區域通過calc()函數計算剩余寬度并設置寬度，再加一個margin-left，值為側邊欄的寬度。

代碼如下：

html

<div class="slider"></div>
<div class="main"></div>
復制代碼

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.slider,.main{
    height: 100%;
}
.slider{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: black;
}
.main{
    width: calc(100% - 100px);
    background: red;
    margin-left: 100px;
}
復制代碼

flex屬性

通過flex屬性實現思路也很簡單，將父元素設置為flex，側邊欄寬度固定，內容區域設置flex:1即可充滿剩余區域。

代碼如下：

html

<div class="slider"></div>
<div class="main"></div>
復制代碼

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
.slider,.main{
    height: 100%;
}
.slider{
    width: 100px;
    background: black;
}
.main{
    flex: 1;   
    background: red;
}
復制代碼

3列布局

3 列布局在日常開發中使用頻率也是很高的，其按照左中右的順序進行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應，能根據屏幕大小做響應。

效果圖

還是先來看看效果圖

代碼實現

三列布局的實現方法也很多，這里主要介紹兩種（雙飛翼布局、圣杯布局、flex布局）

在介紹雙飛翼布局和圣杯布局之前要先說一下margin設置負值的作用：

當margin的值設為負值的時候，元素會對應的像那個放向移動，比如margin-left為負值，元素則會左移

雙飛翼布局

代碼如下：

html

<div class="main">
    <div class="middle">
        <div class="content">
            中間
        </div>
    </div>
    <div class="left">
        左邊
    </div>
    <div class="right">
        右邊
    </div>
</div>
復制代碼

css

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}
復制代碼

圣杯布局

代碼如下: html

<div class="main">
    <div class="center">中間中間中間中間中間中間中間后</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
復制代碼

css

* {
    margin: 0;
    padding: 0;
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}
復制代碼

雙飛翼布局其實和圣杯布局的精髓是一樣的，都是通過設置負margin來實現元素的排布，不同的就是html結構，雙飛翼是在center元素內部又設置了一層inner-center的元素并設置它的左右margin，而非圣杯布局的padding，來排除兩邊元素的覆蓋。所以這兩種布局原理基本一樣，關鍵就是在于設置負margin的技巧，和元素浮動的相對定位技巧來實現。

flex布局

代碼如下: html

<div class="main">
    <div id="left">左邊定寬</div>
    <div id="main">中間自適應</div>
    <div id="right">右邊定寬</div>
</div>
復制代碼

css

* {
    padding: 0px;
    margin: 0px;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}

#left,
#right {
    width: 100px;
    background-color: #0FC;
}
#main {
    flex: 1;
    background-color: #999;
}
復制代碼

如果不考慮瀏覽器兼容問題的話，運用flex布局是最簡單的方式。

垂直方向的布局（sticky footer）

這種布局將頁面分成上、中、下三個部分，上、下部分都為固定高度，中間部分高度不定。當頁面高度小于瀏覽器高度時，下部分應固定在屏幕底部；當頁面高度超出瀏覽器高度時，下部分應該隨中間部分被撐開，顯示在頁面最底部。

這種布局也稱之為sticky footer，意思是下部分粘黏在屏幕底部。

代碼實現

首先我們先構建簡單的HTML代碼

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>
復制代碼

其中content為我們的內容區。下面開始介紹解決方法。

為內容區域添加最小的高度

這種方法重要用vh(viewpoint height)來計算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內容區域的最小高度。例如我們可以添加如下樣式：

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}  
復制代碼

從而這個問題就解決了，但是如果頁面的footer高度不同怎么辦?每一個頁面都要重新計算一次，這是很麻煩的，所以這種方法雖然簡單但卻是不推薦的。

使用flex布局

這種方法就是利用flex布局對視窗高度進行分割。footer的flex設為0，這樣footer獲得其固有的高度;content的flex設為1，這樣它會充滿除去footer的其他部分。

代碼如下：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}
復制代碼

這樣的布局簡單使用，比較推薦。

在content的外面可以添加一個wrapper

這種方法就是在content的外面添加一個包裹容易，將html代碼改成這樣：

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
復制代碼

然后添加以下樣式：

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必須使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的負值 */
    height: 150px;
    clear:both;
}
復制代碼

另外，為了保證兼容性，需要在wrapper上添加clearfix類。其代碼如下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
復制代碼

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    
復制代碼

ok,好，完成了，這種方法也比較推薦，但就是加入的代碼比較多，也改變了html的文檔結構。

粘性布局（sticky）

粘性布局是什么呢？我們先來看看效果演示

沒錯，其實就是在頁面滾動的時候保持元素（這里的是標題）在頁面視圖上方，也就是我們常常看到的吸附效果。

標題行設置了背景色。如果不設置背景色（背景透明），正常文檔流的文字就會和標題行文字重疊在一起顯示。

sticky定位的元素會遮住滾動而來的“正常”的文檔流；后面的sticky元素會覆蓋前面的sticky元素，就好像一層層的便利貼，是不是很酷~~。

代碼實現

實現粘性布局主要依靠position的sticky屬性。

position: sticky;
復制代碼

先來看看兼容性：

從Can I use上查詢可以看出，sticky的兼容性并不是太好，所以大家使用的時候要慎重考慮，如果不要求兼容的情況，用這個還是相當的舒服了。

下面給出一個簡單的示例。

html:

<main>
    <header>標題一</header>
    <div class="content">
    </div>
    <header>標題二</header>
    <div class="content">
    </div>
    <header>標題三</header>
    <div class="content">
    </div>
    <header>標題四</header>
    <div class="content">
    </div>
</main>
復制代碼

js(不想寫太多p標簽，所以用js生成，偷個懶):

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
    item.innerHTML = html
})
復制代碼

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}
復制代碼

作者：monkeysoft
鏈接：https://juejin.cn/post/6907027007318687751
來源：掘金

在線咨詢

上一篇：七小時帶你入門HTML+CSS網頁設計，編寫網頁代碼的思路（三）
下一篇：Node.js快速上手

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS盒子模型，排版布局的基石

簡介

2 盒子模型概念

2.1 內容區

2.2 內邊距

2.2.1 元素的尺寸

2.2.2 標簽元素內置的padding

2.3 外邊距

2.3.1 margin與元素尺寸

2.3.2 margin合并

2.3.3 margin:auto

2.4 邊框

2.4.1 為什么border-width不支持百分比值

2.4.2 border與圖形構建

2.4.3 border與透明邊框技巧

3 總結

4 最后的最后

TML

CSS

單列布局

一欄布局

效果圖

代碼實現

一欄布局（通欄）

效果圖

代碼實現

2列布局

效果圖

代碼實現

calc函數

flex屬性

3列布局

效果圖

代碼實現

雙飛翼布局

圣杯布局

flex布局

垂直方向的布局（sticky footer）

代碼實現

為內容區域添加最小的高度

使用flex布局

在content的外面可以添加一個wrapper

粘性布局（sticky）

代碼實現

您的項目需求