CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习

艾编程教育 2023-03-28 原文

前几天我在面试前端开发同学的时候，有问到关于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老师的博客-艾编程

重难点复习 span class hljs Html/Css

有关CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习的更多相关文章

ruby-on-rails - 建模收藏夹 - 2
我希望将Favorite模型添加到我的User和Link模型。业务逻辑用户可以有多个链接(即可以添加多个链接)用户可以收藏多个链接(他们自己的或其他用户的)一个链接可以被多个用户收藏，但只有一个所有者我对如何为这种关联建模以及在模型就位后如何创建用户收藏夹感到困惑？classUser 最佳答案下面的数据模型怎么样:classUser:destroyhas_many:favorite_links,:through=>:favorites,:source=>:linkendclassLink:destroyhas_many:favor
ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
ruby - nanoc 和多种布局 - 2
是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'
屏幕录制为什么没声音？检查这2项，轻松解决 - 2
相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。步骤2：在“声
【高数】用拉格朗日中值定理解决极限问题 - 2
首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，也就意味着我们可以用来替换这种替换可以用在求某些多项式差的极限中。方法：外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加
Matlab imread（）读到了什么（浅显当复习文档了） - 2
matlab打开matlab，用最简单的imread方法读取一个图像clcclearimg_h=imread('hua.jpg');返回一个数组（矩阵），往往是a*b*cunit8类型解释一下这个三维数组的意思，行数、数和层数，unit8：指数据类型，无符号八位整形，可理解为0~2^8的数三个层数分别代表RGB三个通道图像rgb最常用的是24-位实现方法，即RGB每个通道有256色阶（2^8）。基于这样的24-位RGB模型的色彩空间可以表现256×256×256≈1670万色当imshow传入了一个二维数组，它将以灰度方式绘制；可以把图像拆分为rgb三层，可以以灰度的方式观察它figure(1
7个大一C语言必学的程序 / C语言经典代码大全 - 2
嗨~大家好，这里是可莉！今天给大家带来的是7个C语言的经典基础代码~那一起往下看下去把【程序一】打印100到200之间的素数#includeintmain(){ inti; for(i=100;i 【程序二】输出乘法口诀表#includeintmain(){inti;for(i=1;i 【程序三】判断1000年---2000年之间的闰年#includeintmain(){intyear;for(year=1000;year 【程序四】给定两个整形变量的值，将两个值的内容进行交换。这里提供两种方法来进行交换，第一种为创建临时变量来进行交换，第二种是不创建临时变量而直接进行交换。1.创建临时变量来
深度学习部署：Windows安装pycocotools报错解决方法 - 2
深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal
Hive SQL 五大经典面试题 - 2
目录第1题连续问题分析：解法：第2题分组问题分析：解法：第3题间隔连续问题分析：解法：第4题打折日期交叉问题分析：解法：第5题同时在线问题分析：解法：第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析：遇到这类
Ruby 守护进程和 JRuby - 备选方案 - 2
我有一个应用程序正在从Ruby迁移到JRuby(由于需要通过Java提供更好的Web服务安全支持)。我使用的gem之一是daemons创建后台作业。问题在于它使用fork+exec来创建后台进程，但这对JRuby来说是禁忌。那么-是否有用于创建后台作业的替代gem/wrapper？我目前的想法是只从shell脚本调用rake并让rake任务永远运行......提前致谢，克里斯。更新我们目前正在使用几个与Java线程相关的包装器，即https://github.com/jmettraux/rufus-scheduler和https://github.com/philostler/acts