为了账号安全,请及时绑定邮箱和手机立即绑定

有关 CSS 盒模型(CSS BOX MODEL)

标签:
Html5
概念

在一个html文档中,每个元素都被表示为一个矩形的的盒子。这每一个矩形的盒子被描述为盒模型(CSS Box Model)。并且这个模型描述了元素所占空间的内容。

组成

正常情况

一般情况下,一个盒子是由以下部分组成

width = content-width + padding-left + padding-right + border-left-width + border-right-width

height = content-height + padding-top + padding-bottom + border-top-width + border-bottom-width

margin 指外边距,主要是为了分隔与当前元素之外的元素的距离。由于盒子之间共享外边距,有时会出现外边距合并/塌陷的情况。例如下面一段代码。

.box {
  width: 200px;
  height: 200px;
  background-color: green;
  border: 5px solid red;
  padding: 20px;
  margin: 40px;
}
.box2 {
  margin-top: 60px;
}

box1 的 bottom 距离 box2 的 top 并不会有 40px+60px=100px 的距离,而是有 60px 的距离。

<div class="box box1">
  <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://beimg.oss-cn-beijing.aliyuncs.com/favicon.png!ace" />
</div>
<div class="box box2">
  <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://beimg.oss-cn-beijing.aliyuncs.com/favicon.png!ace" />
</div>

box-sizing 下的计算

box-sizing用于更改浏览器默认的盒模型计算方式。可谓是开发者编辑UI的福音。他解决了无数多关于占位、溢出、宽高计算、居中计算的问题。

以下是他的两个关键属性:

  • box-sizing: content-box; 默认值,盒子占有的实际大小与上述正常模式相同
  • box-sizing: border-box; 除外边距外,盒子本身占有的实际大小包括边框、内边距、内容大小。

关于外边距塌陷(margin collapsing)

几种表现形式,以下针对块级元素

  1. 上下外边距不等

    当两个上下排列的盒子,bottom 和 top 分别具有 margin 时,会有外边距组合的情况出现,这种行为被称为外边距塌陷(margin collapsing),而浏览器经过计算,最终会取两个盒子中较大的值。倘若含有负值,例如上面盒子为20px,下面为-20px,最终的表现则为 0。

  2. 子元素的外边距在父元素中也有体现

    通俗来讲,是子元素中设置了margin 而父元素中没有除 margin 外若没有其他有关影响盒子宽高的描述,将会导致父元素在表层体现上也会具有margin。而且这两个合并成了一个。例如如下代码,父元素也会产生 margin 效果。

    <div>
      <div class="box" />
    </div>

    这种情况的发生,往往在父元素和第一个子元素或者最后一个子元素之间

  3. 空元素的上下 margin 会合并

    <div style="margin-top: 20px; margin-bottom: 20px;"></div>

    上述代码中,该空元素与上下间隔为 20px。

总结

以上,都在说一种现象。所谓的CSS布局,看似有很多漏洞和不足,其实,都是编码的周全考虑。这样的计算方式看似不合理,实际上,对浏览器而言,根据这些规则绘制UI是非常友好的。总之,不要把自己想当然的东西作为一种常识记在心中,总有些不同角度的合理解释,这才是代码。

代码示例

CSS-Box-Model

参考整理自

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
6
获赞与收藏
40

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消