前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

28、什么是外边距重叠,重叠的结果是什么?(必会)

外边距重叠

外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界,边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。只有外边距才可以是负值,内边距不允许为负值在 CSS 中,相邻的两个盒子的外边距可以结合成一个单独的外边距,这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

重叠情况

1、两个相邻的外边距都是正数时,折叠的结果是它们两者之间较大的值

2、两个相邻的外边距都是负数时,折叠结果是两者绝对值得较大值

3、两个外边距一正一负时,折叠结果是两者的相加的和

4、外边距不重叠的情况

水平 margin 永远不会重合

设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠

设置了绝对定位( --tt-darkmode-color: #9E9ECD;">设置了 display:inline-block 的元素,垂直 margin 不会重叠,和子元素之间也不会重叠

根元素(如 html)与 body 的 margin 不会重叠

5、防止外边距重叠的方法

元素绝对定位 postion:absolute;一般用在内层元素

内层元素 加 float:left;或 display:inline-block;

外层元素用 padding 增加边距

外层元素设置 overflow:hidden;

内层元素透明边框 border:1px solid transparent;

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言