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 ...
随机推荐
- overridePendingTransition的简介
1 Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity ...
- 实现去哪儿来回机票选择的view
最近有个控件是实现和去哪儿和阿里旅行的app的选择日历效果,反编译没有效果的情况下我自己实现了个,大致的原理是: 上面是产品需要实现的效果,我看了下不就是一个ListView+gridView就能实现 ...
- 关于STM32的延时问题
最近一直在搞一辆智能小车,用STM32单片机驱动,往上面加了很多外设,外型如下: 今天下午打算在LCD显示一个温度,却发现怎么都显示不了,也找不出原因,还好我们公司的郑工帮我看出了问题,让我顺利改过来 ...
- obj-c编程07:异常处理
好了,到了相对轻松的话题,也是所有语言无可避免的话题:异常的处理. 我们知道对于一些常见的语言,"异常"是逃不开避不掉的主题:C中相对原始的signal或依赖系统异常支持(比如wi ...
- Java多线程操作局部变量与全局变量
在这篇文章里,我们首先阐述什么是同步,不同步有什么问题,然后讨论可以采取哪些措施控制同步,接下来我们会仿照回顾网络通信时那样,构建一个服务器端的"线程池",JDK为我们提供了一个很 ...
- rails项目如何改变已建立的model结构
有时候第一次用rails g model或者scaffold建立数据模型的时候难免会出错,比如字段类型错误或者字段名称错误,甚至少添加或多添加了几个字段哦.这种情况下手动去修改数据结构是比较头疼的,官 ...
- C# 视频多人脸识别
上一篇内容的调整,并按 @轮回 的说法,提交到git了,https://github.com/catzhou2002/ArcFaceDemo 基本思路如下: 一.识别线程 1.获取当前图片 2.识别当 ...
- Loader转换器
一.简介 webpack本身只能处理js模块,Loader可以理解为模块和资源的转换器,它本身是一个函数,接受文件作为参数,返回转换的结果.因此,我们就能通过require来加载任何类型的模块和文件. ...
- Swap Nodes in Pairs(交换节点)
Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...
- C语言关键字register、extern、static、一些总结，及项目中使用的心得
首先介绍两个概念: 一.变量的生存周期: 变量从建立到撤销的时间段成变量的生存周期.静态变量,从变量产生到整个程序执行结束.当函数使用变量结束后,变量的存储空间依然存在,变量的值也会随着函数的对其的使 ...