Web前端基础知识(五)——margin外边距合并
来源:互联网 发布:激光雷达数据 编辑:程序博客网 时间:2024/06/05 22:57
如何计算margin
- 两个margin都是正值的时候,取两者的最大值;
- 当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从0位置,负向位移;
- 当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加;
- 只有普通文档流中块框的垂直外边距才会发生外边距合并,行内框,浮动框或者绝对定位框之间的外边距不会发生合并。
父子元素的外边距合并
当一个div套在另一个div里的时候,两个div都会有margin的属性,必须在外层div添加border属性或者处理为不同的BFC,这样才不会出现外边距合并,如果不做处理,就会出现外边距合并现象。
对外层div设置以下属性可生成BFC:
float: left | right;overflow: hidden | auto | scroll;display: table-cell | table-caption | inline-block;position: absolute | fixed;
ps: inline-block 是个例外,它既没有脱离文档流,但是它的所有的外边距都不会合并。
出现合并现象的父子元素
父亲盒子的外边距设置为10px;
孩子盒子的外边距设置为30px;
最后的外边距为两者中较大的那个,所以最终的外边距为30px;
没有出现合并现象的父子元素
兄弟元素的外边距合并
当两个div不存在嵌套关系时,两者始终会存在垂直方向上的外边距合并,外边距的值为两者中的最大值。
出现合并现象的兄弟元素
空元素的边距合并
空元素本身没有内容(即空元素)、内边距、边框时, 它的上下边距就相遇了, 即会产生叠加(垂直方向)。当为元素添加内容、 内边距、 边框任何一项, 就会取消叠加。
阅读全文
0 0
- Web前端基础知识(五)——margin外边距合并
- margin外边距合并
- margin 外边距合并问题
- margin外边距合并问题
- web前端-CSS Margin(外边距)-013
- 前端面试必备——外边距合并
- BFC与margin-collapse(外边距合并)
- 前端-css样式 外边距(margin)和内边距(padding)
- margin外边距合并的问题
- margin详解垂直外边距合并
- 外边距margin的合并原理
- 由父子元素margin说开——外边距塌陷(margin-collapse)
- 由父子元素margin说开——外边距塌陷(margin-collapse)
- CSS-外边距(margin)
- 小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题)
- 深入理解BFC和外边距合并(Margin Collapse)
- margin外边距合并问题以及解决方式
- CSS 外边距 margin
- 洛谷p1908逆序对
- Dagger2 大全
- 51nod 1082 与7无关的数
- iOS Swift图片选择SDK开发设计
- Java多线程—— synchronized关键字详解
- Web前端基础知识(五)——margin外边距合并
- centos安装gitlab
- 参考资料地址
- 二叉树的递归遍历与非递归遍历
- centos 6.4 用源代码编译的方式安装 gftp
- Tomcat基本使用
- 日期类
- 微信小程序--后端管理平台业务1
- 查看django 是什么版本