margin-塌陷问题
塌陷问题
①垂直并列（少见）
/*HTML部分*/
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
/*CSS部分*/
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: yellowgreen;
}
.box2{
width: 200px;
height: 200px; background: gray;
}
</style>
<style>
*{
margin:0;
padding:0;
}
.box1{
width:200px;
height:200px;
background: yellowgreen;
margin-bottom: 50px;
}
.box2{
width:200px;
height:200px;
background: gray;
margin-top: 40px;
}
</style>
②嵌套关系(常见)
/*CSS部分*/
<style>
.box1{
width:400px;
height:400px;
background: pink;
}
.box2{
width:200px;
height:200px;
background: lightblue;
}
</style>
/*HTML部分*/
<body>
<divclass="box1">
<divclass="box2"></div>
</div>
</body>
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值。
margin-塌陷问题的更多相关文章
- margin塌陷现象
如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- margin塌陷与margin合并（margin），清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- 学习笔记------------解决margin塌陷
首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...
- margin塌陷与BFC总结
只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...
- margin的两个有趣现象：margin合并和margin塌陷
margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...
- margin塌陷
我工作基本上就是写业务逻辑,不怎么写页面就一直觉得页面布局特高深.有天我同事问我,知道margin塌陷是什么东西不,我说我不知道(反正我也不用,管他呢),他说面试的时候问的(...那这必须得去看啊). ...
- 12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding
1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- css margin塌陷问题
一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...
随机推荐
- Linux内核中断和异常分析(中)
在linux内核中,每一个能够发出中断请求的硬件设备控制器都有一条名为IRQ的输出线.所有现在存在的IRQ线都与一个名为可编程中断控制器的硬件电路的输入引脚相连,上次讲到单片机的时候,我就讲到了单片机 ...
- Asp.NetCore+Microsoft.AspNetCore.SignalR前后端分离
1.新建WebApi 2.安装Microsoft.AspNetCore.SignalR 3.新建一个集线器和消息类 using Microsoft.AspNetCore.SignalR; using ...
- 【大前端攻城狮之路】JavaScript函数式编程
转眼之间已入五月,自己毕业也马上有三年了.大学计算机系的同学大多都在北京混迹,大家为了升职加薪,娶媳妇买房,熬夜加班跟上线,出差pk脑残客户.同学聚会时有不少兄弟已经体重飙升,开始关注13号地铁线上铺 ...
- Jsp 连接 mySQL、Oracle 数据库备忘(Windows平台)
Jsp 环境目前最流行的是 Tomcat5.0.Tomcat5.0 自己包含一个 Web 服务器,如果是测试,就没必要把 Tomcat 与 IIS 或 Apache 集成起来.在 Tomcat 自带的 ...
- 经典的java中return和finally问题!
经典的java中return和finally问题! 标签: 杂谈 分类: java学习 前一段时间 参加公司的笔试问了这个问题,回来一查才知道当时自己做错了,百思不得其解,上网查到下面的程序,但是运行 ...
- python 定时服务模块
python定时任务使用方法如下: import sched shelder = sched.scheduler(time.time, time.sleep) shelder.enter(2, 0, ...
- 转log4cxx: Could not read configuration file [log4cxx.properties]解决办法
早上遇到了log4cxx: Could not read configuration file [log4cxx.properties].这个问题.网上搜索后发现是少了log4cxx.properti ...
- Linux服务器安全审计工具与流程完全指南
http://Linux.chinaitlab.com/server/860516.html 当今许多linux服务器都不是刚刚部署完毕的新机器,有专业的Linux系统管理员进行定期维护,IT技术人员 ...
- linux（centos 7）学习之 ~目录下的文件anaconda-ks.cfg
这个文件是记录安装系统的一些信息 #version=DEVEL # System authorization information auth --enableshadow --passalgo=sh ...
- PHP代码审计
Preface 这篇文章的内容会不断的充实和丰富,前期会增加一些之前爆出漏洞的复现过程,来丰富自己实际代码审计经验,后期如果能挖掘出新的漏洞,便更好. 代码审计之SQL注入:BlueCMSv1.6 s ...