HTML+CSS box-sizing：border-box应用场景

最新推荐文章于 2024-07-09 15:27:52 发布
最新推荐文章于 2024-07-09 15:27:52 发布
阅读量324 收藏 2
点赞数
分类专栏： CSS问题汇总 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44240648/article/details/126157561
版权

HTML+CSS box-sizing：border-box应用场景

1. 设置生效场景

对于明确设置宽高的块级元素，设置box-sizing：border-box属性后，块级元素的内容+border的大小会严格限制在块级元素的宽高内

  1. 不设置时，border往外扩张
    在这里插入图片描述

  2. 设置后，border限制在content元素内
    在这里插入图片描述

2. 不需要设置情况

  1. 块级元素嵌套，父元素设置好宽高，子元素aotu时，子元素border+内容自动限制在父元素里面
    在这里插入图片描述

  2. 定位
    在这里插入图片描述

  3. flex

在这里插入图片描述

总结

当块级元素的 宽 或者 高 的值auto时，内容+border就不会超出父元素宽高范围，会被压缩在父元素内容里面

橙柚007
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
css3 box-sizing属性使用参考指南
12-01
在这个例子中，`.box_sizing`的子元素`.in`应用了`border-box`，因此元素的宽度100%包含了边框和内边距，不会导致父元素`.box_sizing`的溢出。在不同的浏览器中，由于历史兼容性问题，可能需要使用各种前缀 `-webkit...
HTML & CSS box sizing
木木木森林
10-06 193
box-sizing属性介绍 box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。 box-sizing : content-box|border-box|inherit; (1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。 即总宽度=margin+border+padding+width (2) border-box , 设置的width值其实是除margin外
CSS box-sizing 属性详解
最新发布
My_wife_QBL的博客
07-09 857
CSS 盒模型是描述 HTML 元素在页面中布局的基本模型。每个 HTML 元素都被视为一个矩形的盒子，这个盒子由内容区域、内边距（padding）、边框（border）和外边距（margin）组成。盒模型的计算方式对元素的最终尺寸有重要影响。box-sizing.element {/* 或 box-sizing: border-box;*/：使用标准盒模型，元素的宽度和高度仅包括内容区域。：使用替代盒模型，元素的宽度和高度包括内容区域、内边距和边框。
css3的box-sizing:border-box；
weixin_43846020的博客
09-21 647
响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。 假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（4%*5（5列）=20%）的占宽比；然后我们从总宽比（100%）里面减去20%，得到的就是
content-box和border-box区别以及应用场景
lykia123的博客
06-10 3543
content-box和border-box区别以及应用场景【保证一看就彻底懂了】 首先这两个是什么？ 他们是css box-sizing的两个值，是两种不同的盒模型，用content-box，元素的宽高就等于width和height的值，他的宽高不受padding,border的影响，而用border-box，元素的宽高是受padding,border影响的，元素实际宽度是等于width-padding左右-border左右，也就是当width不变，padding/border发生变化时，内容的宽高是会相
css box-sizing
hugejihu9的专栏
01-23 174
文章来自：源码在线https://www.shengli.me/css/621.html     效果：      
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计算入...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。... box-sizing: content-box|border-box|inherit;  值 描述 conte
CSS box-sizing
JunChow
05-18 148
CSS框属性的基本规范中指出：文档的每个元素都被构造成文档布局内的一个矩形框，矩形框的每一层的大小都可以使用特定CSS属性进行调制。 盒模型 块元素的盒子模型结构 content表示内容框是盒子中内容显示的区域，width和height属性用与设置内容框的宽度和高度。 padding表示CSS框的内边框，位于内容框外边缘与边界的内边缘之间 border表示CSS框的边界，它是一...
css 中的 box-sizing
bubbleSweet的博客
05-09 591
此处总结一下 box-sizing 分别等于 content-box 和 border-box 值时的区别 1、border-box 如下在父容器中写了两个孩子 div <div class = "father"> <div class = "child1"></div> <div class = "child2"></div> </div> 样式如下 .
css中box-sizing的使用场景
xu3tu的博客
01-24 1893
首先，要知道box-sizing是用来干啥的：改变盒模型中宽度和高度的定义范围。  border-box: width = content + padding + border ，也就是IE的盒怪异模式。  content-box:width = content 正常模式 使用场景分析：当需要以content + padding + border为整体的时候使用border-box，例如
CSS 之box-sizing
倚树探星的博客
01-24 278
w3cschool参考 一、box-sizing: border-box border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度 没有写box-sizing: border-box; 写了box-sizing: border-box; 二、效果图分析 border-box 告诉浏览器去理...
CSS属性 - box-sizing
coolchaobing的博客
07-29 234
认识CSS属性 - box-sizing
CSS系列之 box-sizing
老__L的博客
02-19 6104
本文主要介绍CSS的box-sizing属性。box-sizing属性定义了如何计算一个元素的总宽度和总高度。
CSS的box-sizing属性
mengxianglong123的博客
12-17 199
1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变 2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变 和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度 3.box-sizi...
css——box-sizing属性
weixin_52512511的博客
07-22 1042
盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content。如果想要盒子模型中的content宽度与通过css width属性设置的宽度相同，则使用。如果想使整个盒子宽度固定(即使padding和border发生变化)时使用。box-sizing 就是指定盒子的大小和结构的。
css中box-sizing: border-box
07-15
CSS中的box-sizing属性用于控制盒模型的计算方式，其中`box-sizing: border-box;`是一种常用的取值。 默认情况下，当设置元素的宽度和高度时，浏览器会将这些尺寸值应用于元素的内容框（content box），然后再加上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值