margintop

前几天我在面试前端开发的同学的时候，问了一下margin的基本布局，发现很多同学都解释不清楚。今天，我刚好有时间整理一张纸条。以下是CSS布局中常用的五种经典布局方案。

css中margin外边距（重叠）合并现象css中margin外边距穿透现象css中margin设置负值时的特性css经典3列自适应布局：圣杯布局css经典3列自适应布局：双飞翼布局

有问题可以试试！可以随时交流，回答任何问题。

利润垂直重叠(合并)问题

当元素垂直排列时，第一个元素的下外部边距和第二个元素的上外部边距将合并，合并后的间距是两者中最大的值。

1、以下代码中，item1与item4之间的间距是多少？

& ltstyle & gt。box { margin-top:10px；/*上下边距*/margin-bottom:20px；/*下外边距*/height:20px；背景色:天蓝色；} & lt/style & gt；& ltbody & gt& ltdiv class = & # 34方框& # 34；& gtitem1 & lt/div & gt；& ltdiv class = & # 34方框& # 34；& gt& lt/div & gt；& ltdiv class = & # 34方框& # 34；& gt& lt/div & gt；& ltdiv class = & # 34方框& # 34；& gtitem4 & lt/div & gt；& lt/body & gt；回答:

解析:item1和item4之间的间距为3个下页边距+2个框高=20*3+20*2=100px。

2、以下代码中，item1与item4之间的间距是多少 ？

& ltstyle & gt。box { margin-top:10px；边距-底部:20px背景色:天蓝色；} & lt/style & gt；& ltbody & gt& ltdiv class = & # 34方框& # 34；& gtitem1 & lt/div & gt；& ltdiv class = & # 34方框& # 34；& gt& lt/div & gt；& ltdiv class = & # 34方框& # 34；& gt& lt/div & gt；& ltdiv class = & # 34方框& # 34；& gtitem4 & lt/div & gt；& lt/body & gt；答:item1和item4之间的间距是20px。

分析:因为中间两个框没有内容或边框线，所以外边距会一直重叠合并，所以item1和item4之间的距离只是下外边距的大小。

3、以下代码中 container 、 item 、box与浏览器顶部的间距是多少 ？

边缘渗透问题

当一个元素包含在另一个元素中时，如果父元素没有设置内部边距或边框来分隔外部边距，它们的上部或下部外部边距也将合并。

& ltstyle & gt正文{边距:0；填充:0；} .容器{宽度:300px高度:300px背景色:鲑鱼色；边距-顶部:100px/*距浏览器顶部的距离*/ border:5px纯蓝；} .集装箱。item { width:200 px；高度:200px背景色:天蓝色；边距-顶部:50px/*因为边框框架是添加到容器中的，所以这里的外边距不会穿透合并器*/}。container . item . box { width:100px；高度:100px背景色:浓汤；页边距-顶部:10px/*item没有边框线、内边距等内容，所以外边距会穿透合并*/ border:5px纯红；} & lt/style & gt；& ltbody & gt& ltdiv class = & # 34集装箱& # 34；& gt& ltdiv class = & # 34item & # 34& gt& ltdiv class = & # 34方框& # 34；& gt& lt/div & gt；& lt/div & gt；& lt/div & gt；& lt/body & gt；

答案:100px，155px，155px。

分析:

之间的距离。容器和浏览器的顶端是100像素。

之间的距离。项，浏览器顶部是100px+5px+50px=155px。

之间的距离。盒子和浏览器顶:100px+5px+50px=155px。

margin负值问题

Margin-left设置负值，元素向左移动。

Margin-right设置负值，不受自身影响，右元素向左移动。

Margin-top设置负值，元素上移。

Margin-bottom设置负值，不受自身影响，下方元素上移。

1、 两元素水平排列，左右外边距设置负值时

& ltstyle & gt正文{边距:0；} .容器{宽度:500px高度:200px填充:20px 0px边框:5px solid # ddd边距:0px自动；} .集装箱。普通{宽度:200px高度:200px浮动:左；} .container .box1{背景色:天蓝色；/*边距-左侧:-100px；如果元素本身向左移动，右边的元素也会受到影响*/margin-right:-100px；/*元素本身不受影响，右边的元素向左移动*/} . container . box 2 { background-color:tomato；} & lt/style & gt；& ltbody & gt& ltdiv class = & # 34集装箱& # 34；& gt& ltdiv class = & # 34方框1普通& # 34；& gt& lt/div & gt；& ltdiv class = & # 34box2普通& # 34；& gt& lt/div & gt；& lt/div & gt；& lt/body & gt；

当左边距在。container . box 1:-100px；如图1所示，当

右边距:-100像素in . container . box 1；如图2所示，当

什么时候。container .box1设置左边距:-100px；右边距:-100px，如图3所示。

2、两元素垂直排列，上下外边距设置负值时

& ltstyle & gt正文{边距:0；} .容器{高度:500px宽度:200px填充:0px 20px边框:5px solid # ddd边距-顶部:100px} .集装箱。普通{宽度:200px高度:200px} .container .box1{背景色:天蓝色；/* margin-top:-100px；如果元素上移，下面的元素也会受到影响*/margin-bottom:-100px；/*本身不受影响，下方元素上移*/} . container . box 2 { background-color:rgba(0，0，255，0.5)；} & lt/style & gt；& ltbody & gt& ltdiv class = & # 34集装箱& # 34；& gt& ltdiv class = & # 34方框1普通& # 34；& gt& lt/div & gt；& ltdiv class = & # 34box2普通& # 34；& gt& lt/div & gt；& lt/div & gt；& lt/body & gt；

当. container.box1中的margin-top为-100px时，如图1所示。

当margin-bottom:100像素in .container.box1，如图2所示。

同时在. container.box1中设置margin-top:-100px时；和margin-bottom:-100px；如图3所示，当

3、经典布局：圣杯布局

这种布局的优点:

中间一栏的内容是最重要的，最先加载和渲染，最有利于搜索引擎优化。

两边的内容是固定的，中间的内容是自适应的。

& ltstyle & gt正文{边距:0；/*核心代码*/min-width:650 px；/*页面宽度不够时，会出现滚动条，不会造成布局混乱*/}。clear fix::after { display:block；内容:& # 34；"；明确:两者都有；} .fl{/*核心代码*/float:left；/*三个框必须加浮动*/}。页眉{高度:100px背景色:番茄；} .容器{左填充:200px/*左边留200px放左边*/padding-right:250 px；/* 200px保留在右边放右边*/}。container.center {宽度:100%；/*实现自适应缩放的容器自适应宽度*/高度:500px背景色:天蓝色；} .集装箱。左{ width:200 px；高度:500px背景色:cadetblue/*核心代码*/边距-左侧:-100%；/*盒子向左移动，因为已经被浮动了，所以会移动到上一行的最左边*/position:relative；/*使用相对定位，将盒子向左移动200px，它将占用最左边的预留空间200 px空*/left:-200 px；} .集装箱。右{宽度:250px高度:500px背景色:海蓝宝石；/*核心代码*/margin-right:-250 px；/*加上这段代码，相当于右边没有任何宽度，它会移动到最右边的位置*/}。页脚{高度:100px背景色:# 000；} & lt/style & gt；& ltbody & gt& ltdiv class = & # 34标题& # 34；& gt头

中间一栏的内容是最重要的，最先加载和渲染，最有利于搜索引擎优化。

两边的内容是固定的，中间的内容是自适应的。

& ltstyle & gt正文{边距:0；} .fl{/*核心代码*/float:left；/*确保添加一个浮点*/}。主{背景色:# ddd宽度:100%；} .主要的。main-content{ background-color:天蓝色；高度:300px/*核心代码*/margin:0 200 px 0 200 px；/* 200px左边在盒子的左右两边，分别被左右占据*/}。左{ width:200 px；高度:300px背景色:珊瑚色；/*核心代码*/边距-左侧:-100%；/*将浏览器宽度向左移动，最后移动到上一行的最左侧*/}。右{宽度:200px高度:300px背景色:番茄；/*核心代码*/margin-left:-200 px；/*相当于自身宽度为0，因为加了浮动，然后显示在前一行的最右边*/} </style & gt；& ltbody & gt& ltdiv class = & # 34主楼层& # 34；& gt& ltdiv class = & # 34主要内容& # 34；& gt中间

HTML/HTML5，CSS/CSS3，JaScript，真实企业项目开发，云服务器部署在线，从入门到熟练。

PC端项目开发（1个）移动WebApp开发（2个）多端响应式开发（1个）

总共4个完整的项目开发！一行行代码引领实际开发，我们做实际企业开发做的事情。从学习开始就进入工作状态，这样可以节省时间。

从学习开始就用Git同步管理项目代码的版本，Markdown记录学习笔记，包括真正大厂项目的开发标准和设计规范、命名规范、项目代码规范、SEO优化规范。

从蓝湖UI设计稿到PC端、移动端、多终端响应式开发项目开发。

真机调试，云服务部署上线；Linux环境下 的 Nginx 部署，Nginx 性能优化；Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；企业项目域名跳转的终极解决方案，多网站、多系统部署；使用 使用 Git 在线项目部署；

这些内容在30天挑战学习计划中的每一个细节都有提及，包括视频+图文教程+项目资料等等。只为实力宠粉，真正掌握企业项目开发必备技能，不走弯路！

过程中不涉及任何费用和利益，所以非诚勿扰。

如果不加助教微信，可以加下面这个微信，表示要参加30天挑战学习计划，来自头条号！老师会邀请你学习，给你相关资料。

30天挑战学习计划Web前端从入门到实战Arry老师的博客-Ai编程