box-sizing属性？

最新推荐文章于 2024-08-29 11:23:00 发布
最新推荐文章于 2024-08-29 11:23:00 发布
阅读量119 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/112117530
版权
  • 用来控制元素的盒子模型的解析模式，默认为content-box
  • context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
  • border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
  • box-sizing 主要是用来计算一个元素中的宽度和高度的总和的值，而具体的计算方式将会根据 box-sizing 的属性值来决定，共有两个属性值：content-box 和 border-box。

当我们了解一个元素的盒模型之后，其实对于这个的理解就简单很多了，比如我们可以这样理解，然后延伸来说明：

  • content-box：一个标准模式下的盒模型的计算方式
  • border-box：一个怪异模式下的盒模型的计算方式

附带说明

  • 目前来说，低版本的 IE 已经逐渐淡出了大家的视线了，所以，怪异模式和标准模式已经不再有太多人去关注，而且 doctype 也基本上会在各种编辑器中自动添加为 <!doctype html> 了，但这不代表我们不会在意盒模型的计算，只是不在意怪异模式和标准模式的浏览器解析方式。
  • 在现在移动端中，很多时候为了便于盒子的计算，我们会使用 box-sizing: border-box; 来操作，把 padding 和 border 的值计算在一个整体的宽度内，当然了，如果有 margin 的话，还是会额外去考虑的。
LuckXinXin
关注
专栏目录
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式： box-sizing：content-box | border-box 区别： content-box：padding和border不被包含在定义的width和height之内。 盒子的实际宽度=设置的widt
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
有时我们会给页面的元素...1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定元素。 CSS Code复制内容到剪贴板 box-sizing: content-box|border-box|inherit;  值 描述 conte
CSS3 核心知识面试题
weixin_30709809的博客
03-04 59
一种常见利用伪类清除浮动的代码 .clearfix:after { content:"."; //这里利用到了content属性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } box-sizing属性？ 用来控制元素的盒子模型的解析模式，...
CSS3 盒子模型：border-box
听海边涛声
08-29 400
CSS3 盒子模型：border-box
CSS解读之box-sizing属性
zhanglir333的博客
11-27 1万+
box-sizing属性是CSS3中引入的，有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。这句话有点绕，我理解为它是一种容器高宽的计算方法，具体是怎样的一种计算方法，和传统的计算方法又有什么区别，通过下面的例子我们可以很直观的了解到。        如图1-1所示，两个div均统一设置属性，然后针对第二个div
box-sizing: border-box;的作用
热门推荐
qq_37453240的博客
01-31 4万+
box-sizing 属性可以被用来调整这些表现: content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包
box-sizing：border-box
mmcrsx_blog的博客
05-16 1092
box-sizing:border-box
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属性使用参考指南
12-01
CSS3的`box-sizing`属性是一个非常重要的样式规则，它允许开发者改变元素的盒模型，从而更好地控制元素的布局和尺寸。盒模型是CSS布局的基础，理解`box-sizing`属性对于构建响应式和灵活的网页设计至关重要。 在CSS...
关于box-sizing的全面理解
12-13
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内...
box-sizing: border-box；
2301_79265530的博客
09-25 382
告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
box-sizing: border-box
记录学编程后遇到的问题，注意点以及相关知识
04-27 319
box-sizing: border-box; 简单的说： 带有 box-sizing: border-box 样式的盒子：盒子的宽度和高度是加上内容、填充、边距之后的。当有填充或者边距时，相应内容的宽度或高度就会缩小，因为之和要达到 width、height。 没有 box-sizing: border-box 样式的盒子：width、height 只是规定内容的宽和高，如果有填充或者边框，盒子的大小就会变化（会加上填充和边框） 对比 ...
css box-sizing:border-box
yuzheh521的博客
12-09 1972
此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景。，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高。比如,给父元素parent设置宽高为500px，背景色为黑色；，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里。
CSS之box-sizing:border-box
qq_44388958的博客
03-11 1272
box-sizing:border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 如果上述的内容还不是太明白，我们就来举个例子： · 比如插入一个DIV，这个DIV的宽度设置为200像素，高度也设置为200像素；那么这个DIV就是宽200px，高200...
CSS中box-sizing: border-box
qq_42009005的博客
04-21 475
CSS中box-sizing: border-box 首先我们先来看一下默认的盒子模型 <div id="">我好累啊</div> div { width: 200px; height: 200px; background-color: #005AA0; border: 10px solid red; padding: 20px; margin: 20px; box-sizing: content-box;//默认的样式,可以
CSS3中如何使用`box-sizing`属性？
最新发布
09-11
`box-sizing`属性是CSS3中用于调整元素盒模型的边距、边框、内边距的计算方式。在CSS中，每个元素的宽度和高度可以通过`width`和`height`属性来设置，但默认情况下，这些尺寸只包括内容区域，不包括边框和内边距。`...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值