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
    评论
专栏目录
关于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: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里。
box-sizing:border-box;的一些坑
zhuhaomingoo的博客
01-25 1万+
近日在使用新属性box-sizing:border-box;的时候遇到了一些问题很致命，很费时间，情况就如下面的例子。给全局加了box-sizing:border-box;属性。文字里需要带入彩色的标签，高度是16px,左右padding各5px，line-height自然而然就是16了。但这时就会出现图一的情况文字上下并不是剧中的。从正常逻辑思维出发，我找不到一丝纰漏怎么改也不对怎么给都是剧中不...
* { Box-sizing: Border-box } FTW
u011153667的博客
05-24 387
One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you star
一个box-sizing: border-box和felx混合使用中遇到的问题
weixin_30251829的博客
07-04 3060
之前在项目中遇到一个布局上很趣的问题(也可能是笔者才疏学浅，哈哈)。布局大概是这样的： 外层包裹器：采用flex布局，并指定内部子弹性盒子元素水平显示 侧边栏：flex盒子的子元素，可收起和展开。展开时显示菜单图标和菜单名称，收起时仅显示菜单图标。点击菜单图标或者文字(整个菜单项)跳转到预设置的路由上。展开时宽度为200px，收起时宽度为45px。 头部与内容区域：fle...
flex 中 onbeforeunload 不弹框_一个box-sizing: border-box和felx混合使用中遇到的问题 - james·von...
weixin_27875131的博客
01-18 338
之前在项目中遇到一个布局上很趣的问题(也可能是笔者才疏学浅，哈哈)。布局大概是这样的：外层包裹器：采用flex布局，并指定内部子弹性盒子元素水平显示侧边栏：flex盒子的子元素，可收起和展开。展开时显示菜单图标和菜单名称，收起时仅显示菜单图标。点击菜单图标或者文字(整个菜单项)跳转到预设置的路由上。展开时宽度为200px，收起时宽度为45px。头部与内容区域：flex盒子的子元素。设置为flex...
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
萌狼蓝天の技术栈
03-11 1311
设置 box-sizing:border-box(原本的默认值为:content-box) box-sizing: content-box;/*盒子宽度=CSS中设置的width+border+padding*/ box-sizing: border-box;/*盒子的宽度=css中设置的width*/ 实例对比 <!DOCTYPE html> <html lang="en"&...
从box-sizing:border-box属性入手，来了解盒模型
TwcatL_tree
01-20 5731
    从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。     背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题...
盒子模型与内外边距
Tianjiangganquan的博客
11-23 222
【代码】盒子模型与内外边距。
CSS水平垂直对齐方式
qq_30906791的博客
11-01 266
边框 为什么把边框归类于布局的属性呢？ 因为在布局的时候常常看不到效果，这个时候如果使用边框显示元素的位置，就比较容易知道自己布局的效果，方便学习布局 另外，边框属于盒子模型的一部分 html标签也有边框，并且是最外面的边框 body是仅次于html第二层的边框 默认有的浏览器html标签与body标签之间会有边距，可以将body的外边距设置为0，这是一个好习惯。 元素高度和宽度 设置元素的高度和宽度，仅仅是指元素内容本身的高度和宽度，不包括内边距，边框的宽度以及外边距 最大宽度最小宽度以及最大高度最小高度
box-sizing:border-box的理解和作用
热门推荐
qq_51066068的博客
09-26 2万+
box-sizing:border-box的理解和作用。CSS中代码background:url(图片) no-repeat right center的意思
WEB-前端学习day5
qq_44850230的博客
04-07 262
1.css的三大特性 层叠性、继承性、优先性 层叠性： 1.什么是样式冲突？ 当同一个标签被多次设置同一样式的时候会发生样式冲突 2、什么是样式的层叠性？ 当样式冲突的时候，只会有一个起作用，即样式的层叠，就近原则 <style> div { color: pink; font-size: 20px; /* 这个属性不会被覆盖掉 */ } div {
一、CSS盒子模型[外边距、内边距、box-sizing、边框、轮廓线]
黑日里不灭的light
09-29 478
介绍：盒子模型如下图，盒子大小组成有、和，即height设置的高度只是具体内容的高度，不是盒子的高度。
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
关于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
width: 580rpx; padding: 0 30rpx 0 20rpx; box-sizing: border-box;设置border-sizing:border-box意义
最新发布
01-19
`box-sizing: border-box;` 是CSS中的一个属性，用于控制元素的盒模型。默认情况下，元素的宽度和高度只包括内容区域，而不包括边框和内边距。这意味着如果给元素设置了宽度和内边距，那么元素的实际宽度会比设置的宽度更宽。 使用`box-sizing: border-box;`可以改变这种行为，使得元素的宽度和高度包括边框和内边距。也就是说，设置了`box-sizing: border-box;`后，元素的实际宽度和高度会根据设置的宽度和高度来计算，而不会受到边框和内边距的影响。 在你提供的代码中，`width: 580rpx; padding: 0 30rpx 0 20rpx; box-sizing: border-box;`的意义是设置一个宽度为580rpx的元素，并且该元素的内边距为上0右30下0左20，并且使用`box-sizing: border-box;`来确保元素的实际宽度和高度包括边框和内边距。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值