box-sizing常用的属性有哪些？分别有什么作用？

最新推荐文章于 2023-09-21 15:34:29 发布
最新推荐文章于 2023-09-21 15:34:29 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： IT 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckyandLucky/article/details/107962488
版权

答：content-box就是宽高就是元素本身的宽高 边框内边距不算在内
Border-box 就是用元素内容和padding和border一起决定width和height
　　(1)box-sizing: content-box|border-box|inherit;
　　(2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

LuckyandLucky
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于box-sizing的全面理解
12-13
—恢复内容开始— box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法box-sizing: content-box|border-box|inherit; content-box ：w3c标准（默认） border-box ：IE传统标准 content-box: .test1{ box-sizing:content-box; width:200px; padding:10px; borde
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计算入width之内，其实就是怪异模式了~ 注意： ie8+浏览器支持content-box和border-box； ff则支持全部三个值。 使用时： -webkit-box-sizing: 100px; // for ios-safari, and
css3 box-sizing属性使用参考指南
12-01
基础知识 语法： box-sizing ： content-box | border-box | inherit 相关属性 ： 无 取值： content-box:此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content} border-box:此值改变css2.1盒模型组成模式，content|border|padding {element width=content} 说明： 改变容器的盒模型组成方式。 引擎类型 Gecko Webkit Presto Inter
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。也就是其实际的尺寸变成了：设置的宽高尺寸+内边距+边框。这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定元素。 CSS Code复制内容到剪贴板 box-sizing: content-box|border-box|inherit;   值 描述 conte
CSS3属性box-sizing使用指南
12-13
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码代码如下:box-sizing: content-box | padding-box | border-box 默认值是  content-box ，对应CSS2.1规范中标准的盒子模型计算方式，即 width 和 height 是内容区的宽与高， 不包括边框，内边距，外边距；  padding-box 根据MDN的说法，目前还是一个实验性的属性， width 和 height 包括内容区和内边距，不包括边框和外边据；  border-box 包括内边距与边框，不包括外边距。这是I
box-sizing:border-box的理解和作用
热门推荐
Ghjkku的博客
06-02 13万+
要想清楚这个属性的作用，首先要理解盒子模型盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）可以把每一个容器，比如div，都看做是一个盒子模型比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red;这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）相当于一个元素的实际宽高是由
MDN之Web 开发技术【box-sizing】
极客神殿
08-29 589
CSS中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。 box-sizing: border-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px; 在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素...
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" />
box—sizing 属性的了解
最新发布
子玉的博客
09-21 921
它定义了一个元素的内容框（content box）应包含哪些内容，以及内边距（padding）、边框（border）和外边距（margin）是否应该被包含在元素的总宽度和高度中。（默认值）：元素的宽度和高度仅包括内容框，不包括内边距、边框和外边距。这意味着如果你设置元素的宽度为100像素，那么元素的内容框宽度将为100像素，而内边距、边框和外边距将会增加到这个宽度之外。这意味着如果你设置元素的宽度为100像素，那么元素的总宽度将为100像素，包括内容框、内边距和边框，而外边距将增加到这个总宽度之外。
box-sizing属性是什么作用？
斌哥谈编程
05-09 972
文章目录1、场景说明2、未用box-sizing属性之前3、box-sizing属性的作用 1、场景说明 要实现界面主区域块100%显示 2、未用box-sizing属性之前 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-sizing属性是什么作用？</title> <style>
box-sizing 的属性及其作用
qq_44537625的博客
08-23 4700
box-sizing的属性值 box-sizing：content-box box-sizing：border-box box-sizing：inherit content-box（默认的盒子，设置padding和border会撑开盒子，使盒子比原本的宽高更大） box-sizing的默认属性值 由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素...
css-布局- box-sizing 的含义及作用
我有一个梦想的专栏
06-11 1万+
含义 了解过前端的同学都知道前端控制样式使用典型的盒子模型, 盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content; box-sizing 就是指定盒子的大小和结构的。 它支持三种值： box-sizing: content-box; //默认值 内容真正宽度 = 设置的宽度 box-sizing: border-box; // 内...
box-sizing属性的理解
xi1213的博客
02-28 3997
使用原因 在布局盒模型因为padding与border也是具有尺寸的，为避免其对页面布局产生影响，可使用box-sizing: border-box;属性设置盒模型，此时便可只用设置元素宽高。 属性详解 box-sizing的属性有content-box、border-box、inherit。 content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框，此为默认值。 border-box：元素设定的宽度和高度决定了元素的边框盒。元素指定的任何内边距和边框都将在已设定的宽
CSS系列之 box-sizing
老__L的博客
02-19 5079
本文主要介绍CSS的box-sizing属性。box-sizing属性定义了如何计算一个元素的总宽度和总高度。
box-sizing的属性及作用详细介绍【CSS3】
zy1992As的博客
01-12 3220
应用“box-sizing: border-box;当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。●content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。
box-sizing的属性
LuckXinXin的博客
04-06 1745
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。 content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高。 border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置wi...
box-sizing 常用的属性有哪些？分别有什么作用
LuckXinXin的博客
01-30 412
box-sizing: content-box; 默认的标准(W3C)盒模型元素效果 box-sizing: border-box; 触发怪异(IE)盒模型元素的效果 box-sizing: inherit; 继承父元素 box-sizing 属性的值
box-sizing的作用是什么？
07-27
box-sizing属性用于控制元素的盒模型计算方式。它有两个可选值：content-box和border-box。 - content-box是默认值，表示元素的宽度和高度仅包括内容区域，不包括边框（border）和内边距（padding）。换句话说，设置元素的宽度和高度时，只是指定了内容区域的大小。 - border-box表示元素的宽度和高度包括内容区域、内边距和边框的大小。换句话说，设置元素的宽度和高度时，指定的是整个盒子模型的大小，包括内容、内边距和边框。 使用box-sizing: border-box;可以更方便地控制元素的尺寸。当设置元素的宽度和高度时，不需要考虑内边距和边框的影响，因为它们已经被包含在内。这样可以避免由于内边距和边框导致元素尺寸超出所期望的情况。 总结来说，box-sizing属性可以改变元素盒模型的计算方式，使得设置元素尺寸更加直观和方便。使用border-box值时，设置的宽度和高度包括了内容、内边距和边框的大小。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值