box-sizing属性值和作用

最新推荐文章于 2024-08-04 22:27:53 发布
最新推荐文章于 2024-08-04 22:27:53 发布
阅读量1.1w 收藏 16
点赞数 3
分类专栏： CSS 面试 前端集结号 文章标签： box-sizing css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/candy_tity/article/details/54632878
版权
前端集结号 同时被 3 个专栏收录
61 篇文章 5 订阅
订阅专栏
CSS
12 篇文章 0 订阅
订阅专栏
面试
4 篇文章 0 订阅
订阅专栏

兼容问题
首先，box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容。

属性值

  • box-sizing：content-box
  • box-sizing：border-box
  • box-sizing：inherit

content-box

  • 这是box-sizing的默认属性值
  • 是CSS2.1中规定的宽度高度的显示行为
  • 在CSS中定义的宽度和高度就对应到元素的内容框
  • 在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box

  • 在CSS中微元素设定的宽度和高度就决定了元素的边框盒
  • 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制
  • CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

inherit

  • 规定元素是从父元素那里继承box-sizing的属性值
陈田田
关注
专栏目录
box-sizing属性是什么
lin123_00的博客
04-24 1296
box-sizing属性定义及用法 box-sizing属性是css3中新增的属性，允许你以某种方式定义某些元素，以适应指定区域（假如您需要并排放置两个带边框的框，可通过将 box-sizing属性设置为"border-box"，这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中）； Internet Explorer、Opera和Chrome浏览器支持box-sizing属性...
box-sizing属性的content-box值和border-box值的区别
qq_44329870的博客
11-06 627
box-sizing属性 content-box：容器的实际宽度和高度等于设置的width值或height值和border、padding之和。 border-box：容器的实际宽度和高度等于设置的width值或height值，定义的border和padding不会改变对象的实际宽高，而是被包含在width和height之内。 举例代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-
box-sizing 的作用
weixin_33850015的博客
01-12 648
box-sizing：content-box | border-box content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。border-box：paddi...
【CSS】box-sizing 属性
小秀的博客
06-09 4282
css中的box-sizing属性
box-sizing
最新发布
QQ1257871322的博客
08-04 240
使用box-sizing属性可以解决一些常见的布局问题，例如当给一个元素设置固定宽度和内边距时，如果不使用border-box，元素的实际宽度会超出设置的宽度，导致布局错乱。此外，box-sizing属性还可以用于响应式布局，通过设置元素的宽度为百分比，并配合使用border-box，可以实现元素在不同屏幕尺寸下的自适应布局。border-box：这是CSS3引入的新值，元素的宽度和高度包括内容区域、边框和内边距，但不包括外边距。这意味着元素的实际宽度等于内容区域的宽度，边框和内边距的宽度都被包含在内。
CSS中box-sizing属性的作用
weixin_30835923的博客
04-12 646
今天在项目中看到box-sizing这个属性，以前用过，但是不常用！注意，它是CSS3里的属性喔！ W3C 盒子模型：标准盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是标准盒模型，它也是标准 w3c 盒子模型。 IE盒子模型：怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为是怪异盒模...
CSS解读之box-sizing属性
热门推荐
zhanglir333的博客
11-27 1万+
box-sizing属性是CSS3中引入的，有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。这句话有点绕，我理解为它是一种容器高宽的计算方法，具体是怎样的一种计算方法，和传统的计算方法又有什么区别，通过下面的例子我们可以很直观的了解到。        如图1-1所示，两个div均统一设置属性，然后针对第二个div
CSS盒子模型box-sizing属性详解
qq_34466755的博客
11-03 1万+
1.content-box chrome浏览器默认的盒子属性值。 content-box的width和height从content算起，不包含border和padding。 2.border-box IE浏览器默认的盒子属性值。 border-box的width和height从border算起,包含border和padding <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
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
这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定...
css3 box-sizing属性使用参考指南
12-01
CSS3的`box-sizing`属性是一个非常重要的样式规则，它允许开发者改变元素的盒模型，从而更好地控制元素的布局和尺寸。盒模型是CSS布局的基础，理解`box-sizing`属性对于构建响应式和灵活的网页设计至关重要。 在CSS...
box—sizing 属性的了解
子玉的博客
09-21 1364
它定义了一个元素的内容框（content box）应包含哪些内容，以及内边距（padding）、边框（border）和外边距（margin）是否应该被包含在元素的总宽度和高度中。（默认值）：元素的宽度和高度仅包括内容框，不包括内边距、边框和外边距。这意味着如果你设置元素的宽度为100像素，那么元素的内容框宽度将为100像素，而内边距、边框和外边距将会增加到这个宽度之外。这意味着如果你设置元素的宽度为100像素，那么元素的总宽度将为100像素，包括内容框、内边距和边框，而外边距将增加到这个总宽度之外。
box-sizing作用
qq_61955800的博客
07-20 567
是 CSS 中的一个属性，它的作用是让元素的宽度和高度包括其边框和填充(padding)。这样，当你为一个元素设置宽度和高度时，不会因为边框和填充的原因而超出预期的大小。使得padding额外的空间依然包含在width100%中。
box-sizing的作用
tiandaochouqin_1的博客
02-17 2113
box-sizing:content-box;   写这条语句以及不写这条语句，都等同于以前的盒模型。即 padding、border都会加宽加高盒子   box-sizing:border-box; CSS3新属性。 padding、border不会加宽加高盒子...
box-sizing属性
cao_dan的博客
08-24 748
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高 border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置wi...
盒模型宽高定义box-sizing
demographic2017的博客
02-28 184
以前盒模型默认的宽高是指内容的宽高。css3后可以用box-sizing来指定宽高。 box-sizing：content-box | border-box 默认值：content-box content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Elemen...
css——box-sizing属性
weixin_52512511的博客
07-22 1062
盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content。如果想要盒子模型中的content宽度与通过css width属性设置的宽度相同，则使用。如果想使整个盒子宽度固定(即使padding和border发生变化)时使用。box-sizing 就是指定盒子的大小和结构的。
理解box-sizing属性
weixin_34289744的博客
02-13 605
box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性： box-sizing: content-box|border-box|inherit: 复制代码content-box 使得元素的宽高即为内容区的宽高 &lt;style&gt; * { padding:0; margin:0 ...
描述box-sizing及其所有属性值
07-14
3. inherit：继承父元素的box-sizing属性值。 这些属性值可以通过给元素应用CSS样式来进行设置，例如： ```css .box { box-sizing: content-box; } .box { box-sizing: border-box; } ``` 通过合理地使用box-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值