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、两元素水平排列，左右外边距设置负值时