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

晴空闲云
• 阅读 1782

我们知道传统的盒子模型,如果增加内边距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,老麻烦了。

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Souleigh ✨ Souleigh ✨
3年前
几个有点意思的 CSS 技巧
如果你是一名前端开发人员或者想成为一名开发人员,那么,我今天与你分享的9个CSS技巧,你需要知道一下。现在,我们开始吧。1、学习盒子模型你在学习CSS时,应该避免使用Bootstrap或TailwindCSS等框架,这些工具非常适合构建漂亮的网站,但如果你还不能正确的了解CSS,则建议不要使用这些框架中的任何一个。因为如果你使用了这些工具,你将无法学习
秃头王路飞 秃头王路飞
2年前
总结前端元素的各种高度(上)
HTMLElement.clientHeight只读属性Element.clientHeight对于没有定义CSS或者内联布局盒子的元素为0;否则,它是元素内部的高度(以像素为单位),包含内边距,但不包括边框、外边距和水平
LinMeng LinMeng
3年前
css之元素居中
行内元素居中文本垂直居中单行文本垂直居中设置lineheight与盒子高度一样就行这里有一个误区,我经常在设置单行文本居中的时候,会习惯性的设置height属性与linheight属性一样,其实完全没必要,只设置lineheight就行,这时候盒子的高度由lineheight撑起来,与height完全相同。多行文本垂直居中1.ve
菜园前端 菜园前端
1年前
你真的了解的CSS3盒模型和CSS3特性知识吗
原文链接:什么是CSS3?CSS3是CSS一个新的标准,直接理解为是CSS的升级版,里面新增了很多样式(特性)。CSS3盒子模型:::warningCSS3盒子模型必须要掌握,否则你在实际开发中遇到样式错乱很难排查问题。:::旧版的IE浏览器与其它浏览器解
Wesley13 Wesley13
3年前
HTML5中新增的布局标签
1.1.1  盒子模型层次盒子模型的层次遵循以下顺序:内容paddingà边框àbackgroundimageàbackgroundcoloràmargin!(https://oscimg.oschina.net/oscnet/722909c8dcfd273c73b0c6534e20f8d9bd4.gif)!(ht
Wesley13 Wesley13
3年前
HTML中经常用到的对齐,居中方式
在编写一片网页时,我们经常需要使一些文本或者图片,盒子居中!但是在众多的写法里,那些才能使我们的目的最快,最有效的达到呢!居中也是有轴线之分的,水平轴,垂直于水平轴的轴,交叉轴。1盒子居中margin:auto;通常在这此行只有一个盒子的情况下使用\需要定宽\常规流和浮动不用\2文本居中   定义水平轴线对齐方式flexst
Stella981 Stella981
3年前
HTML前端开发之路——盒子背景属性
1.backgroundclip属性简介backgroundclip属性用于设置盒子背景的一个显示区域,分别有borderbox,paddingbox,contentbox;borderbox表明背景是从边框开始,即包含边框;paddingbox表明背景是从内边距开始,不包含边框;
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
CSS 清除浮动的4种方法
1\.为什么要清除浮动因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。!在这里插入图片描述(https://imgblog.csdnimg.cn/20201111221816518.pngpic_center)
晴空闲云
晴空闲云
Lv1
男 · 软件工程师
专注计算机科学,阅读、思考、写作。
文章
26
粉丝
8
获赞
35