我工作基本上就是写业务逻辑,不怎么写页面就一直觉得页面布局特高深。有天我同事问我,知道margin塌陷是什么东西不,我说我不知道(反正我也不用,管他呢),他说面试的时候问的(。。。那这必须得去看啊)。

其实这个东西,基本上每个人都遇到过,只不过你不知道它的专业术语而已。

你写两个嵌套div的时候

<div id="div1" style="width:200px;height:200px;background:yellow">
<div id="div2" style="width:100px;height:100px;background:red;margin-top:20px;"></div>
</div>

你想的明明是内层div距离父元素顶部20px,为什么整体都向下了20px,这不科学啊。这个现象就叫margin塌陷。为什么会出现这种情况,我也不知道。

想实现这种布局,可以使用padding,设置父元素的padding-top。

<div id="div1" style="width:200px;height:200px;background:yellow;padding-top:20px;">
<div id="div2" style="width:100px;height:100px;background:red;"></div>
</div>

当然还可以为父层元素添加一个border,也可以解决这个问题。

 <div id="div1" style="width:200px;height:200px;background:yellow;border:1px solid blue;">
<div id="div2" style="width:100px;height:100px;background:red;margin-top:20px;"></div>
</div>

最后还可以给父元素设置overflow:hidden 来解决

 <div id="div1" style="width:200px;height:200px;background:yellow;overflow:hidden;">
<div id="div2" style="width:100px;height:100px;background:red;margin-top:20px;"></div>
</div>

好了,我们来总结一下解决margin塌陷的方法:

1、用父元素的padding-top代替子元素的margin-top;

2、为父元素添加border

3、为父元素添加overflow:hidden

如果有说的不全面的,希望大家能够补充。

margin塌陷的更多相关文章

  1. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

  2. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  3. margin塌陷与margin合并(margin),清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  4. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  5. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  6. margin塌陷与BFC总结

    只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...

  7. margin的两个有趣现象:margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  8. 12-[CSS]-margin塌陷,margin 0 auto,善用父级的padding

    1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. css margin塌陷问题

    一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...

随机推荐

  1. gotty---用来作为k8s的web terminal,通过参数读取指定pod的日志输出

    不要重复造轮子,我觉得这个方案比较适合现在的情况. 我们知道,如果手工查看k8s里指定pod的日志输出,一般的方案如下: kubectl logs -f -n [namespace] [pod] -c ...

  2. Java实现Redis消息队列

    这里我使用Redis的发布.订阅功能实现简单的消息队列,基本的命令有publish.subscribe等. 在Jedis中,有对应的java方法,但是只能发布字符串消息.为了传输对象,需要将对象进行序 ...

  3. elemnt UI点击事件失效,得到tab的序号

    在用element 的tab的时候发现  事件绑定没有作用 看了官网才知到内置有回掉函数 绑定的地方是 <el-tabs></el-tabs> <template> ...

  4. python全栈开发day60-django_app ORM 完整登录案例

    day60 内容回顾: 1. HTTP协议: 1.请求(浏览器发给服务端的消息——request) 请求方法 URL 协议版本\r\n k1:v1\r\n k2:v2\r\n \r\n 请求体 —— ...

  5. ps命令显示uid而不是用户名的解决方法

  6. lvs-nat 实验

    1 ipvsadm集群服务管理工具使用 安装ipvsadm: yum  install  ipvsadm 参数: Ipvsadm  -h :  获取帮助 -A   创建一个新的集群服务 -E    修 ...

  7. Python图表数据可视化Seaborn:1. 风格| 分布数据可视化-直方图| 密度图| 散点图

    conda  install seaborn  是安装到jupyter那个环境的 1. 整体风格设置 对图表整体颜色.比例等进行风格设置,包括颜色色板等调用系统风格进行数据可视化 set() / se ...

  8. Ubuntu + 坚果云

    下载 nautilus_nutstore_amd64.deb sudo dpkg -i nautilus_nutstore_amd64.deb # 运行后,会提示缺少依赖包 sudo apt-get ...

  9. day 74ajax

    w3school地址ajax教程 ajax定义: AJAX(Asynchronous Javascript And XML) 翻译成中文就是'异步JavaScript和XML',也就是使用JavaSc ...

  10. 将linux系统目录挂载到其他分区,扩大系统可用空间

    刚看到有小白用户说linux系统盘分区太小,不够用,问是不是要重装系统? 其实是不需要重装系统的,可以考虑把一些系统目录挂载到单独的分区. 比如将用户目录 /home 挂载到单独的分区: 1.首先打开 ...