解决margin塌陷的问题_解决margin塌陷与margin合并(margin)清除浮动问题
**1、margin塌陷**
问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷。给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效,但会带着父级一起动(作者总结,官方定义自己查看)。如:
Document
效果:
**解决方法:**
(1)给父级盒子加上边框border:1px silod black;(改变结构了,不推荐使用)
Document
效果:
(2)触发盒子的BFC模型(不懂就去百度吧)
如何触发盒子的BFC呢?
1.Position:absolute; 2.display:inline-block; 3.float:left/right; 4.overflow:hiddle; 1.Position:absolute;给父级加上绝对定位,让子级相对父级动。
Document
效果:
2.display:inline-block;让父级同时具有行级属性和块级属性。
Document
效果:
3.float:left/right;让父级产生浮动流
```
Document
```
效果:
4.overflow:hiddle;溢出部分隐藏
```
Document
```
效果:
**2、margin合并**
问题:
margin-left和margin-right区域不能共用。只会叠加。
```
Document
1
2
```
效果:
两个兄弟结构垂直方向的margin共用。
```
Document
1
2
```
效果:
解决垂直方向的margin合并问题也是触动盒子的BFC。
解决方法如下:(嵌套盒子:然后:overflower:hidden;)
```
Document
1
2
```
效果:
**总结:**
在实际开发时不解决这个问题,比如说要解决垂直方面200px,为什么不直接top200px呢,不用top100px,然后bottom100px。
**顺带说一下清除浮动的两种两种方法:**
(1)在有浮动的元素的后面加入一个标签。
下面我就简单举例了:
css中:
.clrar{clear:both;}
(2)使用伪类元素,找到需要清除的标签,直接使用三件套:
.warpper::after{
content:"";
clrar:both;
display:block;
}
总结
以上所述是小编给大家介绍的解决margin塌陷与margin合并(margin)清除浮动问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
解决margin塌陷的问题_解决margin塌陷与margin合并(margin)清除浮动问题相关推荐
- 怎么解决java.exe闪退_解决Eclipse闪退问题的方法总结
1.在C:/WINDOWS/system32 系统文件夹中ctrl+F 然后搜索java.exe,如果存在java.exe, javaw.exe etc.全部删除. 2.内存不足,打开Eclipse目 ...
- 解决margin塌陷的问题_剖析一些经典的CSS布局问题,为前端开发+面试保驾护航...
一.让一个元素水平垂直居中,到底有多少种方案? 水平居中 对于 行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...
- 清除浮动塌陷的4种经典套路
[自古深情留不住,总是套路得人心.] 这些日子,各个朋友圈随时可以见到这句话的身影.的确人们常说:"多一点真诚,少一点套路.",但是最终现象写实也是那么残酷和无奈. 同样在前端攻城 ...
- (08)2020-12-10(清除浮动/解决父类塌陷问题、定位问题、ifont图标)
清除浮动/解决父类塌陷问题.ifont图标 一.清除浮动 1,父类塌陷产生原因 2,解决方法(不推荐,只做了解) 3,解决方法 1, css的伪元素,是指他们不是真正的页面元素.html中并没有对应的 ...
- 关于盒子塌陷的几种解决方法
关于盒子塌陷的几种解决方法 参考文章: (1)关于盒子塌陷的几种解决方法 (2)https://www.cnblogs.com/xiaozhu-zhu/p/11946896.html (3)https ...
- 计算机word文档无法工作,word无法打开(WORD文档打不开_解决方法_电脑基础知识_IT/计算机_专业资料)...
word无法打开(WORD文档打不开_解决方法_电脑基础知识_IT/计算机_专业资料),哪吒游戏网给大家带来详细的word无法打开(WORD文档打不开_解决方法_电脑基础知识_IT/计算机_专业资料) ...
- Mybatisplus语句变成下划线_解决方法
问题所在: 这个是输入数据库的查询语句 实体类与数据库都是使用驼峰命名,但是mybatisplus对数据库发起的语句却带了下划线_ 解决方法: 方法一: map-underscore-to-camel ...
- html标签高度塌陷,CSS中如何解决高度塌陷问题
CSS中如何解决高度塌陷问题 发布时间:2021-06-11 18:23:40 来源:亿速云 阅读:58 作者:Leah 这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因 ...
- css 高度塌陷_css中父元素高度塌陷是什么意思,如何解决?(附代码)
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...
最新文章
- ECCV2020最佳论文解读之递归全对场变换(RAFT)光流计算模型
- cocos2d-x初探学习笔记(16)--LayerColor
- leetcode 853. Car Fleet | 853. 车队(Golang)
- bubble click event handling
- 短款Apache Camel K
- java crud事件回调_java回调机制 - 神是到着念的个人空间 - OSCHINA - 中文开源技术交流社区...
- 图片资源 php,php URL图片资源传参生成对应尺寸图片
- Navicat导入Excel表格数据
- JAVA装mysql_已经安装了mysql,怎么能在java程序里使用SQL?
- js中apply使用方法小议(转载)
- Magento(CE1.X)自带模块解析一
- 微信小程序富文本编辑器 editor 组件源码
- 记一次跳过系统版本检测强刷opengapps卡刷包的过程,20210110修
- python下的xml创建以及追加信息,删除信息方法
- excel数据库_Excel再厉害的高手,也敌不过Access数据库的新手
- Java汉语转拼音首字母并大写利用Pinyin4j(多音字识别)(中午括号识别)
- 读经典《C程序设计语言》(The C Programming Language)
- codeforces EDU segment tree
- 查询快递中,快递公司数据信息的问题
- ARM体系结构与编程学习(四)
热门文章
- 神盾局特工第四季/全集Agents Of SHIELD迅雷下载
- A-Z排序控件的实现
- URLEncoder编码
- 构建之法现代软件概述
- TabBarController创建及使用方法简介
- VistaDB 数据库,.NET的新选择
- [hackinglab][CTF][脚本关][2020] hackinglab 脚本关 writeup
- POJ-1845 数论
- python工厂模式 理解_浅谈Python设计模式 - 抽象工厂模式
- ubuntu php7 memcache,linux上安装php7 memcache扩展