百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

liuian 2025-01-02 17:47 44 浏览

前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。

  1. css中margin外边距（重叠）合并现象
  2. css中margin外边距穿透现象
  3. css中margin设置负值时的特性
  4. css经典3列自适应布局：圣杯布局
  5. 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老师的博客-艾编程

相关推荐

2023年最新微信小程序抓包教程（微信小程序 抓包）

声明：本公众号大部分文章来自作者日常学习笔记，部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载，请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档（软件测试面试怎么说）

前言又到了毕业季，我们将会迎来许多需要面试的小伙伴，在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中，隐藏着的...

复活，视频号一键下载，有手就会，长期更新(2023-12-21)

视频号下载的话题，也算是流量密码了。但也是比较麻烦的问题，频频失效不说，使用方法也难以入手。今天，奶酪就来讲讲视频号下载的新方案，更关键的是，它们有手就会有用，最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员，还是做爬虫、逆向的爬虫工程师和安全逆向工程，必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具，脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具：Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles，今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解，网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本，而AppStore是高于21.1.0版本，本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代，各行各业对数据采集的需求日益增多，网络爬虫的运用也更为广泛，越来越多的人开始学习网络爬虫这项技术，K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章，为实现从易到难全方位覆盖，特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代，应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中，保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio（以下称TestStudio）是一个易于使用的自动化测试工具，可用于Web、WPF应用的界面功能测试，也可以用于API测试，以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析（wireshark抓包总结）

0.引言Wireshark（前称Ethereal）是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包，并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口，直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解（加密方式、证书原理、中间人攻击）HTTPS协议的加密方式有哪些？HTTPS证书的原理是什么？如何防止中间人攻击？一：HTTPS基本介绍：1.HTTPS是什么：HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序（APP）的数据接口需要进行以下步骤：首先，确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具，并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢？我们经常在用的手机手机里面的数据怎么对它抓包呢？那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶，建议收藏

学习Fiddler工具之前，我们先了解一下Fiddler工具的特点，Fiddler能做什么？如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议，默认端口：443(2)HTTP协议（HyperTextTransferProtocol）：超文本传输协议。默认...

一周热门
最近发表
标签列表