box-sizing border-box 的理解

最新推荐文章于 2024-12-03 20:38:59 发布
最新推荐文章于 2024-12-03 20:38:59 发布
阅读量2.3k 收藏 2
点赞数 1
本文通过两个实例对比展示了CSS中box-sizing属性的作用。当使用-webkit-box-sizing:border-box时，元素的宽度和高度会包括边框和内边距，这对于布局控制尤为重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  -webkit-box-sizing: border-box;  则div 设置的宽高将包含 边框及 padding

<!DOCTYPE html>
<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>
    <title>box-sizing</title>
    <style type="text/css">
        .testdiv{
            padding: 10px;;
            width:100px;
            border: 10px solid
        }
    </style>
</head>
<body >
<div class="testdiv"  > 普通</div>
<div class="testdiv"  style="  -webkit-box-sizing: border-box;">
    特殊
</div>
</body>
</html>

效果如下：


第一个div的框架如下


第二个div的框架如下



【高频考点精讲】CSS盒模型深入剖析：border-box到底如何影响你的布局计算？
全栈老李的博客
05-19 941
border-box就像CSS世界里的"防呆设计"，让我们的布局工作更加符合直觉。但全栈老李还是要提醒大家，理解底层原理比记住某个属性更重要。下次当你为布局头疼时，不妨先检查下box-sizing的设置，说不定问题就迎刃而解了。关于盒模型还有什么疑问，欢迎在评论区交流。下期我们会讲另一个布局神器——Flexbox，记得关注哦！
深入理解 `box-sizing: border-box；`：CSS 布局的利器
最新发布
engchina的专栏
02-02 1480
深入理解 `box-sizing: border-box;`：CSS 布局的利器
Box-Sizing
精彩人生
02-16 2356
来自：http://www.w3cplus.com/content/css3-box-sizing box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS
box-sizing:border-box 解释
weixin_33692284的博客
10-05 518
box-sizing:border-box 为ie的怪异盒模型引进的； 如果给标签加上box-sizing:border-box 属性，则会告知浏览器的解析器这个元素的盒模型类型为怪异盒模型； 即给元素设置的宽高不但包括content还会包含padding和border； 分割线------------------------------...
盒子模型box-sizing中content-box和border-box的理解
qq_43690370的博客
06-11 1789
盒子模型box-sizing中content-box和border-box的理解什么是盒子模型box-sizingbox-sizing的三个属性border-box理解 什么是盒子模型 就比如说页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子，这些元素都符合盒子模型的定义。 box-sizing 在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型 W3C标准盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽
带border的响应式布局
ITBwy的博客
09-23 909
击败边框：带border的百分比布局   (2013-12-03 14:00:06) 转载▼   分类： html,css 响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你
box-sizing: border-box；到底是干什么的？使用场景是什么？底层原理是什么？
长风破浪会有时的博客
12-03 2504
是一个非常有用的 CSS 属性，通过设置它可以确保元素的宽度和高度包括内边距和边框，从而避免布局问题并实现精确的尺寸控制。
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
关于box-sizing的全面理解
12-13
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法box-sizing: content-box|border-box|inherit; ...
CSS3 box-sizing属性详解
12-13
box-sizing属性包括content-box（default），border-box，padding-box。  1、content-box，border和padding不计算入width之内  2、padding-box，padding计算入width内  3、border-box，border和padding计算入...
box-sizing:border-box
weixin_43540912的博客
11-08 157
box-sizing:border-box 指由原盒模型转变为：width = padding + border + 原宽度
box-sizing:border-box;理解，盒模型
qq_43197791的博客
12-28 2583
*解决添加padding边距向外加问题 在給下面添加padding时，出现了下面宽度比头部宽出来一部分，其实是padding加到外部。解决方法很简单只需要添加box-sizing:border-box;意思就是改变了盒模型。 pc端只有双击的时候会看到 box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C，后者为IE盒子模型。 .business-title...
box-sizing:border-box的作用
此人很懒，什么都没有写
04-16 1589
要想清楚这个属性的作用，首先要理解盒子模型。 盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容） 可以把每一个容器，比如div，都看做是一个盒子模型 比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red; 这时div的宽高就会变为5...
box-sizing:border-box的理解和作用
热门推荐
qq_51066068的博客
09-26 2万+
box-sizing:border-box的理解和作用。CSS中代码background:url(图片) no-repeat right center的意思
box-sizing: border-box的作用
weixin_30699465的博客
09-17 531
box-sizing:border-box;是CSS3新增属性，了解这个属性，我们先从块级元素的盒子大小说起，通常一个块级元素实际所占宽高度=外边距（margin）+边界宽度(border-width)+内边距（padding）+高度（height）/宽度（width）如果设置了border-box，实际所占宽高度=设置的高度（height）/设置的宽度（width）+外边...
css中_box的属性包括,css box-sizing 属性
weixin_42351363的博客
08-03 1355
box-sizing：content-box | border-box适用于：所有接受 和 的元素content-box：padding 和 border 不被包含在定义的 width 和 height 之内。对象的实际宽度等于设置的 width 值和 border、padding 之和，即 ( Element width = width + border + padding )此属性表现为标...
box-sizing:border-box用于移动端页面的开发！
weixin_44138202的博客
06-17 432
box-sizing:border-box用于移动端页面的开发！ *， *：：before, *；；after{ border-sizing:border-box; } (bootstrap全局中设定该样式) 先从块级元素的盒子大小说起，通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width） 如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（wi
box-sizing中content-box和border-box
玲曦的博客
06-21 920
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )。此属性表现为标准模式下的盒模型。 border-box：padding和border被包含在定义的width和height之内。对象的实...
学习CSS布局 - box-sizing
weixin_30933531的博客
05-03 214
box-sizing 人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做box-sizing的CSS属性。 当你设置一个元素为box-sizing: border-box;时，此元素的内边距和边框不再会增加它的宽度。 这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了box-sizing: border-box; <!DOCTYPE html>...
css中神奇的盒模型-----（box-sizing：border-box）
Amelian的博客
11-26 3684
背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。 注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。 box-sizing属性用于更改
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值