box-sizing: border-box；盒子包含内外边距及边框

已于 2022-12-05 17:10:19 修改
阅读量1k 收藏 2
点赞数
分类专栏： CSS学习 文章标签： css3 css html
于 2022-01-10 17:33:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16714671/article/details/122415369
版权

 怪异盒子模型高宽不包含了内外边距及边框的值。内边距、边框的大小不会影响盒子的大小

正常盒子模型高宽都包含了内外边距及边框的值。内边距、边框的大小会影响盒子的大小

设置box-sizing: border-box;后成为怪异盒子模型，盒子最终的大小的宽高height的大小，盒子最终的大小的宽 width的大小。

原始盒子模型：

加入box-sizing: border-box;属性后: 宽高包含边框及内边距大小，内边距、边框的大小不会影响盒子的大小

qq_16714671
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒子模型与内外边距
Tianjiangganquan的博客
11-23 222
【代码】盒子模型与内外边距。
* { box-sizing: border-box; } 的作用
weixin_30709635的博客
04-13 379
box-sizing:border-box;是CSS3新增属性，了解这个属性，我们先从块级元素的盒子大小说起。 通常一个块级元素实际所占宽高度=外边距（margin）+边界宽度(border-width)+内边距（padding）+高度（height）/宽度（width） 如果设置了border-box，实际所占宽高度=设置的高度（height）/设置的宽度（w...
一、CSS盒子模型[外边距、内边距、box-sizing、边框、轮廓线]
黑日里不灭的light
09-29 478
介绍：盒子模型如下图，盒子大小组成有、和，即height设置的高度只是具体内容的高度，不是盒子的高度。
box-sizing:border-box；
叽里咕噜菩提的博客
12-06 119
内减模式，怪异盒模型 主动将边框及内边距所占的数值从宽高中减掉； 为元素设定的宽度和高度决定了元素的边框盒;就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 ...
盒子模型中边框，内边距，外边距对盒子大小的影响
weixin_46026668的博客
10-29 2054
盒子模型中border，padding，margin对盒子大小的影响。 border是盒子的边框；padding是盒子的内边距；margin是盒子的外边距。 以下边一个例子来解释： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
关于box-sizing的全面理解
12-13
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法box-sizing: content-box|border-box|inherit; ...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定...
CSS3属性box-sizing使用指南
12-13
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码代码如下:box-sizing: content-box | padding-box | border-box ... border-box 包括内边距与边框，不包括外边距。这是I
CSS3 box-sizing属性详解
09-24
在这个例子中，`.content-box` 的宽度和高度只包含内容，`.padding-box` 包含内容和内边距，而`.border-box` 包含内容、内边距和边框。 **实际应用** box-sizing属性在响应式设计和自适应布局中尤其有用，因为它...
css详解box-sizing.zip
01-06
Box Sizing属性允许开发者控制元素的总宽度和高度是否包括边框（border）和内边距（padding）。传统的CSS盒模型是`content-box`模式，这意味着元素的宽度和高度只包括内容区域，不包括边框和内边距。但在`border-box...
盒模型box-sizing:border-box;
txw0415的博客
05-23 162
用盒模型实现一个简单的日历效果代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&q
如何在*{box-sizing:border-box;}下使需要的div失去这个属性
Callback的博客
07-18 3316
今天根据需求的时候需要将原本在CSS中写了全局属性的*{box-sizing:border-box;}之下的两个div两行显示，而不是并排显示。 简单的描述一下*{box-sizing:border-box;}的作用就是可以使两个div并排显示。 这里再拓展一下 我们熟悉的默认盒模型是content-box，也是标准的w3c标准的盒子，在形成的时候是先做content，然后在外面从里到外添加...
[css] box-sizing的宽度包含了哪些？
歌谣的博客
01-22 332
[css] box-sizing的宽度包含了哪些？ 这个得根据box-sizing来计算： 1.box-sizing: content-box; width = width + 2border + 2padding 2.box-sizing: border-box; width = width 但是元素内部会被压缩，content = width - 2border - 2padding 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一
关于css中盒状模型的宽度(box-sizing属性)
qq_43674062的博客
04-12 1588
1.在正常情况下设置一个盒状模型的width时，不包括内外边距和边框，它的宽度就是它本身 html <div class="div1"></div> css .div1 { height: 200px; width: 200px; background: red; } 设置了内外边距和边框后 css .div1 { height: 200px; width: 200
css3 盒子模型 box-sizing:border-box属性
kai480的博客
05-11 330
此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景。比如下图，我给父元素parent设置宽高为500px，背景色为黑色；，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高。，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里。
web前端入门到实战：HTML外边距合并现象、盒子模型以及宽度和高度
软件开发-前端开发-IT
09-27 281
一、 在默认布局的垂直方向上，默认情况下外边距是是不会叠加的，会出现合并现象，谁的外边距较大，就听谁的；但是在水平方向就不会出现这种状况，我们举个例子 span{ display: inline-block; width:100px; height:100px; border:1px soli...
CSS 关于box-sizing: border-box
weixin_46945119的博客
03-18 1885
概念 首先这个border-box的含义是盒子宽度就是原本的width+两边的padding+两边的border；在ie8及以上的浏览器中。如果设置width：100px；padding：5px；border：5px；那么盒子现在的宽度就是120px；如果加上border-box盒子的宽度又重新回到了100px；内容的宽度缩小为80px； 举例 border-box是指将边框border和内边距padding在现有元素的宽度和高度内设置举个例子 比如div的宽度和高度都是100pxpadding是10pxb
box-sizing解决添加边框后尺寸变化问题
qq_44655358的博客
01-25 787
图二是我想要实现的效果，设置了和模板一样的width height但是实现的效果却是20×20 查了一下 发现是box-sizing的问题 box-sizing的CSS属性是用来改变默认的CSS框模型 box-sizing: content-box（默认样式） | padding-box | border-box content-box，border和padding不计算入width之内 padding-box，padding计算入width内 border-box，border和padding计算...
CSS盒模型之内边距、边框、外边距 十九问（持续更新）
weixin_43964148的博客
05-05 555
第一问：什么是盒模型？ 可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。 但是，盒模型有标准盒模型和IE的盒模型。如果你打出来这两种， 第二问：两者...
width: 580rpx; padding: 0 30rpx 0 20rpx; box-sizing: border-box;设置border-sizing:border-box意义
最新发布
01-19
`box-sizing: border-box;` 是CSS中的一个属性，用于控制元素的盒模型。默认情况下，元素的宽度和高度只包括内容区域，而不包括边框和内边距。这意味着如果给元素设置了宽度和内边距，那么元素的实际宽度会比设置的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值