第五十六章 盒子的尺寸

你也许会问,这有什么可说的,宽高就已经很好的描述了盒元素的尺寸了。那你说,这个宽高包不包含边框的尺寸?

这种问题不需要回答,试一下就知道了,记得把值设置的适当大一点,一眼就能看出结果来的。

#box-sizing{width: 10px;height: 10px;border: 30px solid black;}

结果很明显,这个宽高并不包含边框。[1]

但有的时候,这让我们的计算变得很麻烦,我们的元素究竟占用多大面积,这不好算,不光要考虑宽高,还要计算上边框的薄厚。[2]

所以我们就有了一个属性 box-sizing 来说明我们的宽高到底算不算边框。它有两个值:

  • content-box: 默认值,宽高只是规定内容区域的大小,不包含边框;
  • border-box: 宽高包含边框的尺寸

动手试试效果:

#box-sizing{width: 30px;height: 30px;border: 10px solid black;}

对比下边:

#box-sizing{width: 30px;height: 30px;border: 10px solid black;box-sizing: border-box;}

用到的时候不多,但是不知道的话,遇到某些情况会感到十分困扰。

>注释 1: 就不要检查元素了,喵唧,我这里框架对 CSS 进行了重置,为了表现效果,我只好自己增加属性和它对抗……

>注释 2: 还有内补,下一章学习。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第五十六章 盒子的尺寸

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏