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不在标准 ...
随机推荐
- golang升级
系统安装软件一般在/usr/share,可执行的文件在/usr/bin,配置文件可能安装到了/etc下等. 文档一般在 /usr/share 可执行文件 /usr/bin 配置文件 /etc lib文 ...
- Java经验杂谈（2.对Java多态的理解）
多态是面向对象的重要特性之一,我试着用最简单的方式解释Java多态: 要正确理解多态,我们需要明确如下概念:・定义类型和实际类型・重载和重写・编译和运行 其中实际类型为new关键字后面的类型. 重载发 ...
- Windows下配置vue的环境
最近在学习vue.js,希望前端能用vue来作为主要框架.这里记录一下NPM在Windows中安装过程. 下载安装 下载地址 下载v6.11.0 LTS稳定版. 在C盘创建nodejs目录,并进行安装 ...
- webpack的css压缩不兼容IOS8问题探索
webpack使用postcss的autoprefixer插件,并在压缩css时使用了cssnano,处理不当的情况下会导致压缩css后,部分兼容前缀(比如-webkit-)被删除的问题. postc ...
- 30岁天才上班族利用Python人脸监控BOSS，伪装成认真上班的样子！
如今Python程序员可以做深度学习算法实现人脸识别,得益于国外开源框架,虽然它不能达到face++和众多人脸识别公司,但实际应用并没有受到太大的压力.下图为tensorflow的5点定位加情感测试. ...
- shiro 权限管理配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- linux系统开机流程详解
今天,我们主要来谈谈计算机系统的启动流程 1.BIOS启动 BIOS是写入到主板上的一个韧体(韧体就是写入到硬件上的一个软件程序).开机的时候,BIOS是计算机系统会主动执行的第一个程序.BIOS主要 ...
- Python_sqlite3
import sqlite3 #导入模块 conn = sqlite3.connect('example.db') #连接数据库 c = conn.cursor() #创建表 c.execute('' ...
- elasticSearch+spring 整合 maven依赖详解
摘自:http://www.mayou18.com/detail/nTxPQSyu.html [Elasticsearch基础]elasticSearch+spring 整合 maven依赖详解 Ma ...
- SSM-SpringMVC-09：SpringMVC中以继承MutiActionController类的方式实现处理器
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- MutiActionController类,多行动处理器,简单来说,就是可以一个处理器中有多个处理方法,分支 ...