CSS Margin中5個經典布局解決方案，重難點知識，記得收藏復習

幾天我在面試前端開發同學的時候，有問到關于margin基礎布局相關內容的過程中，發現很多同學基本解釋不清楚，今天剛好有點時間就整理了一篇筆記出來。就以下5點在CSS布局經常會用到的經典布局解決方案。

css中margin外邊距（重疊）合并現象
css中margin外邊距穿透現象
css中margin設置負值時的特性
css經典3列自適應布局：圣杯布局
css經典3列自適應布局：雙飛翼布局

可以嘗試動手試一試，有什么疑問！可隨時交流，有問必答。

margin 縱向重疊（合并）問題

元素垂直排列時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并，合并后的間距就是兩者中最大的那個值。

1、以下代碼中，item1與item4之間的間距是多少？

<style>
    .box{
        margin-top:10px;/*上外邊距*/
        margin-bottom:20px;/*下外邊距*/
        height: 20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案：

解析：item1 與 item4 之間的間距為 3個下外邊距大小+2個盒子高度=20*3+20*2=100px

2、以下代碼中，item1與item4之間的間距是多少？

<style>
    .box{
        margin-top:10px;
        margin-bottom:20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案： item1與item4之間間距為 20px

解析：因為中間兩個box中沒有內容也沒有邊框線，所以外邊距會一直重疊合并，所以最后item1和item4之間距離只有一個下外邊距的大小

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少？

margin 穿透問題

當一個元素包含在另一個元素中時,如果父元素沒有設置內邊距或邊框把外邊距分隔開，它們的上或下外邊距也會發生合并。

<style>
    body{
        margin:0;
        padding:0;
    }
    .container{
        width:300px;
        height: 300px;
        background-color: salmon;   
        margin-top:100px;/*與瀏覽器頂部的距離*/
        border:5px solid blue;
    }
    .container .item{
        width:200px;
        height: 200px;
        background-color: skyblue;
        margin-top:50px;/*因為container中加了border邊框，所以這里的外邊距不會穿透合并*/
    }
    .container .item .box{
        width:100px;
        height: 100px;
        background-color: bisque;
        margin-top:10px;/*item沒有加邊框線，內邊距和其它內容，所以外邊距會發生穿透合并*/
        border:5px solid red;
    }
</style>
<body>
    <div class="container">
        <div class="item">
            <div class="box"></div>
        </div>
    </div>
</body>

答案： 100px 、155px、155px
解析：
.container與瀏覽器頂部距離是100px，
.item與瀏覽器頂部距離100px + 5px+50px=155px
.box與瀏覽器頂部距離：100px+5px+50px=155px

margin負值問題

margin-left 設置負值，元素向左移動
margin-right 設置負值，自身不受影響，右邊元素向左移動
margin-top設置負值，元素向上移動
margin-bottom 設置負值，自身不受影響，下方元素向上移動

1、兩元素水平排列，左右外邊距設置負值時

<style>
    body{
        margin:0;
    }
    .container{
        width:500px;
        height:200px;
        padding:20px 0px;
        border:5px solid #ddd;
        margin:0px auto;
    }
    .container .common{
        width:200px;
        height: 200px;
        float: left;
    }
    .container .box1{
        background-color: skyblue;
        /* margin-left:-100px; 元素自身向左移動，右邊的元素也會受影響*/
        margin-right:-100px;/*元素自身不受影響，右邊元素向左移動*/
    }
    .container .box2{
        background-color: tomato;
    }
</style>
<body>
    <div class="container">
        <div class="box1 common"></div>
        <div class="box2 common"></div>
    </div>
</body>

當.container .box1中margin-left:-100px;時，如：圖1
當.container .box1中 margin-right:-100px;時，如：圖2
當.container .box1設置margin-left:-100px;和margin-right:-100px時，如：圖3

2、兩元素垂直排列，上下外邊距設置負值時

<style>
    body{
        margin:0;
    }
    .container{
        height: 500px;
        width: 200px;
        padding:0px 20px;
        border:5px solid #ddd;
        margin-top:100px;
    }
    .container .common{
        width:200px;
        height: 200px;
    }
    .container .box1{
        background-color: skyblue;
        /*margin-top:-100px;元素向上移動，下方元素也會受影響*/
        margin-bottom:-100px;/*自身不受影響，下方元素向上移動*/
    }
    .container .box2{
        background-color: rgba(0,0,255,0.5);
    }
</style>

<body>
    <div class="container">
        <div class="box1 common"></div>
        <div class="box2 common"></div>
    </div>
</body>

當.container .box1中margin-top:-100px時，如：圖 1
當.container .box1中margin-bottom:-100px時，如：圖 2
當.container .box1中同時設置margin-top:-100px; 和margin-bottom:-100px;時，如：圖 3

3、經典布局：圣杯布局

這種布局的優點：
中間一欄內容最重要，最先加載和渲染，同時對搜索引擎優化最利。
兩邊內容固定，中間內容自適應

<style>
    body{
        margin:0;
        /*核心代碼*/
        min-width: 650px;/*當頁面寬度不夠時，出現滾動條而不會造成布局錯亂*/
    }
    .clearfix::after{
        display: block;
        content: "";
        clear: both;
    }
    .fl{/*核心代碼*/
        float:left;/*三個盒子一定要添加浮動*/
    }
    .header{
        height: 100px;
        background-color: tomato;
    }

    .container{
        padding-left:200px;/*左邊預留200px位置  用來放left*/
        padding-right:250px;/*右邊預留200px位置  用來放right*/
    }
    .container .center{
        width:100%;/*自適應container的寬度，實現自適應縮放*/
        height: 500px;
        background-color: skyblue;
    }
    .container .left{
        width:200px;
        height: 500px;
        background-color:cadetblue;
        /*核心代碼*/
        margin-left:-100%;/*盒子向左移，因為加了浮動，所以會移動到上一行的最左邊*/
        position: relative;/*利用相對定位，再把盒子往左移200px就占據了最左邊預留的200px空間*/
        left:-200px;
    }
    .container .right{
        width:250px;
        height: 500px;
        background-color:aquamarine;
        /*核心代碼*/
        margin-right:-250px;/*加上這個代碼，相當于right沒有一點寬度，就會移動到上的最右邊位置*/
    }
    .footer{
        height: 100px;
        background-color: #000;
    }
</style>
<body>
    <div class="header">頭部</div>
    <div class="container clearfix">
        <div class="center fl">中間</div>
        <div class="left fl">左邊</div>
        <div class="right fl">右邊</div>
    </div>
    <div class="footer">底部</div>
</body>

4、經典布局：雙飛翼布局

這種布局的優點：
中間一欄內容最重要，最先加載和渲染，同時對搜索引擎優化最利。
兩邊內容固定，中間內容自適應

<style>
    body{
        margin:0;
    }
    .fl{/*核心代碼*/
        float: left;/*一定要添加浮動*/
    }
    .main{
        background-color: #ddd;
        width:100%;
    }
    .main .main-content{
        background-color: skyblue;
        height: 300px;
        /*核心代碼*/
        margin:0 200px 0 200px;/*盒子左右兩邊余留200px，分別給left和right來占用*/
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: coral;
        /*核心代碼*/
        margin-left:-100%;/*往左移動瀏覽器的寬度，最后移動到上一行的最左邊*/
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: tomato;
        /*核心代碼*/
        margin-left:-200px;/*相當于自身寬度為0了，因為加了浮動，然后就顯示在了上一行的最右邊*/
    }
</style>
<body>
    <div class="main fl">
        <div class="main-content">中間</div>
    </div>
    <div class="left fl">左邊</div>
    <div class="right fl">右邊</div>
</body>

為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通

PC端項目開發（1個）
移動WebApp開發（2個）
多端響應式開發（1個）

共4大完整的項目開發！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范

從藍湖UI設計稿到 PC端，移動端，多端響應式開發項目開發

真機調試，云服務部署上線；
Linux環境下的 Nginx 部署，Nginx 性能優化；
Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
企業項目域名跳轉的終極解決方案，多網站、多系統部署；
使用使用 Git 在線項目部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路！

過程中【不涉及】任何費用和利益，非誠勿擾。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，并給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程

天我們的互聯網提升課堂講解了關于互聯網網頁設計中的配色問題，那么今天我們再來講解一下在網頁設計基礎知識中另外一個重要的知識點，那就是布局問題。

網頁布局指的是將一個網頁的篇幅進行合理的分割用于安排文字，圖像的位置。

在大多數時候，我們去判斷一個網頁是否精致，不僅要看它的文字，顏色，更重要的一點就是它的布局，如果布局不合理，那么這個網頁無疑就是失敗的。

優秀網頁

網頁布局類型

網頁布局一般有5種類型，分別是“國”字型布局、“廠”字型布局、“框架”型布局、“封面”型布局、“flash”型布局，接下來我們一起來看一下。

國字型布局

“廠”字型布局：頁面頂部為橫條網站標志＋廣告條，下方左面為主菜單，右面顯示內容的布局，因為菜單條背景較深，整體效果類似英文字母“T”。

廠字型布局

“框架”型布局：一般左面是導航鏈接，有時最上面會有一個小的標題或標志，右面是正文。

框架型布局

“封面”型布局：。這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接。這種類型大部分出現在企業網站和個人主頁。

封面型布局

“flash”型布局：。其實這與封面型結構是類似的，只是這種類型采用了目前非常流行的Flash，與封面型不同的是，由于Flash 強大的功能，頁面所表達的信息更豐富。

flash型布局

網頁布局技術

網頁布局技術一般有以下幾種（1）表格布局（2）框架布局（3）div+css布局，我們就利用最近最常用的div+css布局簡單的講解以下：

DIV是HTML 中的一個元素，是容器性質的，DIV 元素是用來為HTML文檔內大塊的內容提供結構和背景的，不用CSS 技術，可以有效地頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。簡單地說，DIV 用于搭建網站結構（框架）、CSS用于創建網站表現（樣式／美化）。

我們今天的網頁布局就到這里，如果對您有用，就點贊加關注，謝謝，以后還會有更多關于網頁設計的知識奉獻給大家。

家好，我是三木。

這篇文章，替大家匯總了css的布局方式，在每個布局的結尾附上了我認為比較好的文章鏈接，不僅僅可以當作學習資料，也可以當作方法的查詢手冊，以后開發的時候忘記了某個屬性就來查查。

看完推薦的文章保準解決你 99% 的css布局問題

每篇文章不僅僅包含介紹，還有代碼案例，以及如w3c網站的在線代碼編輯，可以自己修改屬性嘗試。

普通布局

使用方法——display: block/inline/inline-block

根據CSS規范的規定，每一個網頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它的默認display屬性值為“block”，成為“塊級”元素(block-level)；而span元素的默認display屬性值為“inline”，稱為“行內”元素。

資料文章：

w3c：https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_display

w3c：https://www.w3school.com.cn/css/css_inline-block.asp

用法：https://zhuanlan.zhihu.com/p/65353887

浮動布局

使用方法：float:left/right

指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。

float屬性用于定位和格式化內容，例如讓圖像向左浮動到容器中的文本。

float的值有：

left- 元素浮動到其容器的左側
right- 元素浮動到其容器的右側
none- 元素不浮動（將僅顯示在文本中出現的位置）。這是默認的
inherit- 元素繼承其父元素的浮點值

資料文章：

w3c：https://www.w3schools.com/css/css_float.asp

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

CSS深入理解之float浮動：https://segmentfault.com/a/1190000014554601

彈性布局

使用方法——display：flex/inline-flex

Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

容器有以下屬性：

flex-direction-屬性決定主軸的方向（即項目的排列方向）
flex-wrap-定義設置換行模式
flex-flow-定義了項目在主軸上的對齊方式
justify-content-定義項目在交叉軸上如何對齊
align-items-定義項目在交叉軸上如何對齊
align-content-定義了多根軸線的對齊方式

資料文章：

w3c：https://www.w3schools.com/css/css3_flexbox_container.asp

Flex 布局教程：語法篇：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

深度解析 CSS Flexbox 布局：https://juejin.cn/post/6844904116141948936

48張小圖帶你領略flex布局之美：https://juejin.cn/post/6866914148387651592

定位布局

使用方法——position：absolute/relative...

給元素設置postion屬性后，就可以定義該元素的top,bottom,left,right四個屬性。當然postion的值不同，對應的top,bottom,left,right這四個屬性的值代表的含義也不相同

position屬性用來指定一個元素在網頁上的位置，一共有5種定位方式：

static-靜態
relative-相對定位
fixed-固定定位
absolute-絕對定位
sticky-粘性定位

資料文章：

w3c: https://www.w3schools.com/css/css_positioning.asp

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

CSS 定位詳解：https://www.ruanyifeng.com/blog/2019/11/css-position.html

表格布局

使用方法——display:table/table-row/table-cell....

有兩種方式使用表格布局 -HTML Table（<table>標簽）和CSS Table（display:table 等相關屬性）。

HTML Table是指使用原生的<table>標簽，而CSS Table是指用CSS屬性模仿HTML 表格的模型。

table布局的display總共包含如下值

table：指定對象作為塊元素級的表格，相當于html標簽<table>
inline-table：指定對象作為內聯元素級的表格，相當于html標簽<table>
table-caption：指定對象作為表格標題，相當于html標簽<caption>
table-cell：指定對象作為表格單元格，相當于html標簽<td>
table-row：指定對象作為表格行，相當于html標簽<tr>
table-row-group：指定對象作為表格行組，相當于html標簽<tbody>
table-column：指定對象作為表格列，相當于html標簽<col>
table-column-group：指定對象作為表格列組顯示，相當于html標簽<colgroup>
table-header-group：指定對象作為表格標題組，相當于html標簽<thead>
table-footer-group：指定對象作為表格腳注組，相當于html標簽<tfoot>

資料文章：

display:table的幾個用法：https://blog.51cto.com/u_4048786/3205160

css table布局大法：https://segmentfault.com/a/1190000007007885

display:table的用法：https://www.jianshu.com/p/037a706ba9e9

柵格布局

使用方法 ——display：grid

網格布局將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。

column-gap Specifies the gap between the columns

grid：設置grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow屬性
grid-area：設置grid-row-start, grid-column-start, grid-row-end, grid-column-end屬性
grid-auto-columns：設置瀏覽器自動創建的多余網格的列寬
grid-auto-flow：設置排序方式
grid-auto-rows：設置瀏覽器自動創建的多余網格的行高
grid-column ：設置grid-column-start and、grid-column-end properties
grid-column-end：設置右邊框所在的垂直網格線
grid-column-gap：設置列間距
grid-column-start：設置左邊框所在的垂直網格線
grid-gap：設置grid-row-gap、grid-column-gap屬性
grid-row：設置grid-row-start、grid-row-end屬性
grid-row-end：設置下邊框所在的水平網格線
grid-row-gap：設置行間距
grid-row-start：設置上邊框所在的水平網格線
grid-template：設置grid-template-rows,、grid-template-columns、grid-areas屬性
grid-template-areas：設置網格的區域，一個區域由多少單元格組成
grid-template-columns：設置列寬
grid-template-rows：設置行高
row-gap：設置行與行之間的間距

資料文章：

w3c：https://www.w3schools.com/css/css_grid.asp

CSS Grid 網格布局教程：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Grid 布局：https://juejin.cn/post/6854573220306255880

A Complete Guide to Grid：https://css-tricks.com/snippets/css/complete-guide-grid/

多列布局

使用方法——column-count

column-count： length ｜ auto

column-width：interger ｜ auto

column-count：描述元素的列數
column-fill：設置多列內容的平衡填充模式
column-gap：屬性用來設置元素列之間的間隔（gutter）大小
column-rule：屬性規定了列與列之間的直線
column-rule-color：設置在多列布局中被畫在兩列之間的規則（線條）的顏色
column-rule-style：設置在多列布局中被畫在兩列之間的規則（線條）的樣式
column-rule-width：設置在多列布局中被畫在兩列之間的規則（線條）的寬度
column-span：設置某一個內容是否跨多欄顯示。
columns：用來設置元素的列寬和列數

資料文章：

淺談CSS3多列布局：https://juejin.cn/post/6844903450623524872

CSS columns分欄布局教程：https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/

在線咨詢

上一篇：網頁設計，使用拖拽的方式生成網頁！JavaScript庫-VvvebJs
下一篇：用node.js實現一個網頁爬蟲

您的項目需求

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

整合營銷服務商

CSS Margin中5個經典布局解決方案，重難點知識，記得收藏復習

1、以下代碼中，item1與item4之間的間距是多少？

2、以下代碼中，item1與item4之間的間距是多少 ？

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少 ？

margin負值問題

1、 兩元素水平排列，左右外邊距設置負值時

2、兩元素垂直排列，上下外邊距設置負值時

3、經典布局：圣杯布局

4、經典布局：雙飛翼布局

普通布局

資料文章：

浮動布局

資料文章：

彈性布局

資料文章：

定位布局

資料文章：

表格布局

資料文章：

柵格布局

column-gap Specifies the gap between the columns

資料文章：

多列布局

資料文章：

您的項目需求

2、以下代碼中，item1與item4之間的間距是多少？

3、以下代碼中 container 、 item 、box與瀏覽器頂部的間距是多少？

1、兩元素水平排列，左右外邊距設置負值時