css中常见margin塌陷问题之解决办法
塌陷问题
①垂直并列
1 /*HTML部分*/
2 <body>
3 <div class="box1">box1</div>
4 <div class="box2">box2</div>
5 </body>
6 /*CSS部分*/
7 <style>
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 .box1{
13 width: 200px;
14 height: 200px;
15 background: yellowgreen;
16 }
17 .box2{
18 width: 200px;
19 height: 200px; background: gray;
20 }
21 </style>
1 <style>
2 *{
3 margin:0;
4 padding:0;
5 }
6 .box1{
7 width:200px;
8 height:200px;
9 background: yellowgreen;
10 margin-bottom: 50px;
11 }
12 .box2{
13 width:200px;
14 height:200px;
15 background: gray;
16 margin-top: 40px;
17 }
18 </style>
②嵌套关系(父级元素塌陷)
1 /*CSS部分*/
2 <style>
3 .box1{
4 width:400px;
5 height:400px;
6 background: pink;
7 }
8 .box2{
9 width:200px;
10 height:200px;
11 background: lightblue;
12 }
13 </style>
14 /*HTML部分*/
15 <body>
16 <divclass="box1">
17 <divclass="box2"></div>
18 </div>
19 </body>
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）为父盒子添加 display：table；
（6）利用伪元素给子元素的前面添加一个空元素
.son:before{ content:"";
overflow:hidden; }
css中常见margin塌陷问题之解决办法的更多相关文章
- CSS中有关水平居中和垂直居中的解决办法
CCS中让div等块级元素在父级元素中居中的方法: (1)div{ margin:0 auto } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...
- JS 调试中常见的报错的解决办法
报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) ...
- .NET中常见的内存泄漏和解决办法
在.NET中,虽然CLR的GC垃圾回收器帮我们自动回收托管堆对象,释放内存,最大程度避免了"内存泄漏"(应用程序所占用的内存没有得到及时释放),但.NET应用程序"内存泄 ...
- CSS基础 margin塌陷问题以及解决 办法
场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动 ...
- CSS中常见的布局
一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现 (1)两列布局 https://www.cnblogs.com/qin ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- CSS中上下margin的传递和折叠
CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 深入理解CSS中的margin
1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...
随机推荐
- linux下单独线程启动
void linux_start() { signal(2, signal_callback_handler); //signal(9, signal_callback_handler); pid_t ...
- TensorFlow实践笔记（一）：数据读取
本文整理了TensorFlow中的数据读取方法,在TensorFlow中主要有三种方法读取数据: Feeding:由Python提供数据. Preloaded data:预加载数据. Reading ...
- 苹果公司揭秘首批列入 Swift 源代码兼容性开源项目清单
源代码兼容性是 Swift 未来的目标.为了实现这一目标,(苹果公司的 swift 编译器团队)建立了一个源兼容性测试套件,用于根据 Swift 源代码(逐渐增加)语料库对编译器进行回归测试更改. 添 ...
- how to select checkbox on cli environment?
generally , u can focus on this checkbox and press blank key Ok,that's shit.
- win8系统下,python 2.7安装xlrd,xlutils和xlwt的方法
一.先到python的官网上下载压缩包 二.将压缩包解压 三.将打开cmd,进入到解压文件所在的位置 四.键入 python setup.py install
- Python3实现ICMP远控后门(上)
这几天一直在研究远控木马的一些通信协议,比如TCP,UDP,ICMP,DNS,HTTP等等,对于TCP,UDP这两种就不讲解了,因为太常见了. 大家可能对采用ICMP,DNS的木马不是很熟悉,其实这两 ...
- [已解决]pycharm的debugger模式不显示调试结果?
由于朋友遇到这个问题,特意上网搜索了很久,没有相关答案,后来自己尝试与能正常显示的做设置对比,才找到控制开关,在此做个记录,分享给遇到这个问题的朋友. 问题如下图: 解决办法: 左上角File--&g ...
- js动态计算移动端rem适配问题
第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...
- ubuntu18.04 & Windows10 双系统关机缓慢
1.Windows与Ubuntu双系统关机缓慢并不少见,有时单系统下的Linux mint或Ubuntu都会出现这个现象.主要原因是还有没有关闭的进程或者是软件兼容的原因,所以导致每次关机都有一个90 ...
- Docker的安装和测试
1,Docker安装 Docker是啥,以及其与虚拟机的对比,就不介绍了,网上有很多资源可以学习和了解. 本篇文章重点介绍Docker的安装和测试使用. Docker的安装,分为离线安装和在线安装两种 ...