CSS 盒子模型边界塌陷和盒子塌陷 - 文章教程

CSS 盒子模型边界塌陷和盒子塌陷

发布于 2017-12-13 字数 2706 浏览 4434 评论 0

网页布局中总会遇到很多莫名其妙的 BUG,但是对于我来说,似乎并不是什么难题,因为我已经写过了很多的网页了,这篇文章将给大家分享下 CSS 塌陷的问题。

CSS 盒子模型边界塌陷和盒子塌陷

边界塌陷

CSS 中存在一个 margin collapse,即边界塌陷或者说边界重叠。

并排 DIV 边界塌陷

对于上下两个并排的 DIV 块而言,上面 DIV 的 margin-bottom 和下面 DIV 的 margin-top 会塌陷,也就是会取上下两者 margin 里最大值作为显示值,所以我们当我们遇到上下两个并排 DIV 时,我们只需要设置其中一个的 margin 即可。

包含元素盒子塌陷

但对于父块 DIV 内含子块 DIV 的情况,就会按另一条 CSS 惯例来解释了,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。例如下面的 HTML 代码:

<div class="father"></div>

father 这个 DIV 的高度为 0,因为里面没有能够撑开div的内容。

<div class="father">I am here.</div>

上面代码中,DIV 的高度就是文字的高度,因为此时文字在撑着这个 DIV。

总结:两个有外边距元素之间只要有 border、padding、行内元素或者间隙(clearanc),就不会塌陷。

盒子塌陷

当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父盒子的高度就会直接塌陷为零, 我们称这是 CSS 高度塌陷。

解决方法

1、最简单直接的方法就是盒子大小写死,给每个盒子设定固定的 width 和 height,直到合适为止,这样的好处是简单方便,兼容性好,适合只改动少量内容不涉及盒子排布的版面,缺点是非自适应,浏览器的窗口大小直接影响用户体验。

2、给外部的父盒子也添加浮动,让其也脱离标准文档流,这种方法方便,但是对页面的布局不是很友好,不易维护。

3、给父盒子添加 overflow 属性。

  • overflow:auto 有可能出现滚动条,影响美观。
  • overflow:hidden 可能会带来内容不可见的问题。

4、父盒子里最下方引入清除浮动块。最简单的有:

<br style="clear:both;"/>

有很多人是这么解决的,但是我们并不推荐,因为其引入了不必要的冗余元素 。

5、after 伪类清除浮动。

外部盒子的 after 伪元素设置 clear 属性。

#parent:after{
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

这是一种纯 CSS 的解决浮动造成盒子塌陷方法,没有引入任何冗余元素,推荐使用此方法来解决 CSS 盒子塌陷。

备注:上面中第五种方法虽好,但是对于低版本 IE 不兼容,具体选择哪种解决方法,可以根据实际情况决定,我使用最多的就是第三种方法,因为父级元素一般都不设置高度,这样也不存在滚动条或者内容不可见。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

3048 文章
评论
84935 人气
更多

推荐作者