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

晴空闲云
• 阅读 1119

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

box-sizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。

盒子宽高计算

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

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

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

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

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

那么是什么原因呢?其实很简单,就是盒模型的实际宽度除了受 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>

运行效果:

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

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

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

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

点赞
收藏
评论区
推荐文章
LinMeng LinMeng
1年前
css之元素居中
行内元素居中文本垂直居中单行文本垂直居中设置lineheight与盒子高度一样就行这里有一个误区,我经常在设置单行文本居中的时候,会习惯性的设置height属性与linheight属性一样,其实完全没必要,只设置lineheight就行,这时候盒子的高度由lineheight撑起来,与height完全相同。多行文本垂直居中1.ve
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
HTML5中新增的布局标签
1.1.1  盒子模型层次盒子模型的层次遵循以下顺序:内容paddingà边框àbackgroundimageàbackgroundcoloràmargin!(https://oscimg.oschina.net/oscnet/722909c8dcfd273c73b0c6534e20f8d9bd4.gif)!(ht
Wesley13 Wesley13
1年前
HTML中经常用到的对齐,居中方式
在编写一片网页时,我们经常需要使一些文本或者图片,盒子居中!但是在众多的写法里,那些才能使我们的目的最快,最有效的达到呢!居中也是有轴线之分的,水平轴,垂直于水平轴的轴,交叉轴。1盒子居中margin:auto;通常在这此行只有一个盒子的情况下使用\需要定宽\常规流和浮动不用\2文本居中   定义水平轴线对齐方式flexst
Stella981 Stella981
1年前
HTML前端开发之路——盒子背景属性
1.backgroundclip属性简介backgroundclip属性用于设置盒子背景的一个显示区域,分别有borderbox,paddingbox,contentbox;borderbox表明背景是从边框开始,即包含边框;paddingbox表明背景是从内边距开始,不包含边框;
Stella981 Stella981
1年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
1年前
CSS 清除浮动的4种方法
1\.为什么要清除浮动因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。!在这里插入图片描述(https://imgblog.csdnimg.cn/20201111221816518.pngpic_center)
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
秃头王路飞 秃头王路飞
3个月前
总结前端元素的各种高度(上)
HTMLElement.clientHeight只读属性Element.clientHeight对于没有定义CSS或者内联布局盒子的元素为0;否则,它是元素内部的高度(以像素为单位),包含内边距,但不包括边框、外边距和水平
晴空闲云
晴空闲云
Lv1
教师
专注前端,把复杂的编程讲简单,又不失深度。@公众号:晴空闲云
26
文章
4
粉丝
2
获赞