最新消息:flex弹性布局更新完毕,阅读地址:http://www.01happy.com/css-flex/

box-sizing解放盒子实际宽高计算

css 39浏览 0评论

我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子, 造成盒子的宽度不好计算,在实务中特别不方便。

盒子宽高计算

假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。

但是当我们设置这个盒子的边框和内间距的时候,那么这个盒子实际的宽高就会发生变化,参考如下代码:

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid steelblue;
        padding: 10px;
    }
</style>
<div class="box">我一个有趣的盒子</div>

实际的盒子的宽高是222px,参考如下图:

1

那么是什么原因呢?其实很简单,就是盒模型的实际宽度除了受 width 影响,也受边框border和内间距padding影响。

实际的计算公式:

实际宽高 = width + 内间距padding + 边框border

上面因为左右都有内间距和边框,所以实际宽度为:

实际宽度 = 200 + 10 * 2 + 1 * 2 = 222px

高度也是这个道理。

box-sizing设置

针对这种情况,css3推出了 box-sizing 这个属性,其语法如下:

box-sizing: content-box(default) | border-box;

其中:

content-box 默认值。设置的宽高不包含边框和内间距,实际宽高会根据边框和内间距撑大。
border-box 设置盒子的宽高包含边框和内间距,实际宽高不受边框和内间距影响。

示例1,接上面例子,设置div盒子的 box-sizing 为 border-box。

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid steelblue;
        padding: 10px;
        /* 设置盒子的宽高包含边框和内间距 */
        box-sizing: border-box;
    }
</style>
<div class="box">我一个有趣的盒子</div>

运行效果:

2

可以看到效果,这边盒子的实际宽高就都为200px了。

一般来讲在实务中,我们都是希望直接设置盒子的实际宽高,这种方式就特别方便了,不然以前老是改了边框或者内间距,就要重新计算设置width,老麻烦了。

这个属性确实方便很多,赞一下。

转载请注明:快乐编程 » box-sizing解放盒子实际宽高计算

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址