Html的box-sizing:border-box用法

最新推荐文章于 2025-06-24 17:05:01 发布
最新推荐文章于 2025-06-24 17:05:01 发布
阅读量3.5k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： html 文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36949892/article/details/91348058
本文详细介绍了CSS属性box-sizing:border-box的使用方法及作用。该属性能有效避免元素内容撑开边界，确保设置的边框和内边距在预设宽度内计算，适用于各种布局需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Html的box-sizing:border-box用法

  1. 当你没有给盒子添加宽高的时候，这条指令可以防止内容将盒子撑开。
  2. 当你给盒子添加一定的宽高后，那么你所设置的边框就会在盒子的内部占你所设置的像素。
  3. 而当你没有设置宽高的时候，设置边框属性还是会占像素。
  4. 所以这条指令的主要作用就是防止盒子的内容撑开盒子。
  5. 这条指令可以写在通配符选择器中，就可以不用一直添加这个样式。
  6. 盒子内容的宽高等于你所设置的宽高减去你所设置的边框再减去内边距。
box-sizing: border-box
qq_46641049的博客
03-19 493
【代码】box-sizing: border-box。
html5 box sizing,CSS属性参考 | box-sizing
weixin_39712821的博客
06-21 871
CSS box-sizing 属性用来改变默认的CSS盒模型对元素宽度和高度的计算方式。在CSS中，每一个元素都有一个盒模型。盒模型包括4个区域：content box(内容区域)、padding box(内边距区域)、border box(边框区域)和 margin box(外边距区域)。默认情况下，当一个元素的尺寸被设定之后，width和height属性就决定了这个元素的content box...
HTML 盒子模型（ box-sizing: border-box）
小海鲜的博客
08-09 1478
盒子模型，就是指，按百分比固定div的宽度、高度之后，不会被padding、border等扩充而破坏了初始化的百分比。
第三节 布局与盒模型-盒模型与box-sizing
最新发布
qq_40860137的博客
06-24 614
布局与盒模型-盒模型与box-sizing
html-box-sizing
cxu123321的博客
12-24 2584
CSS中的box-sizing属性定义了user agent应该如何计算一个元素的总宽度和总高度。 在CSS 盒子模型的默认定义里，你对一个元素所设置的width与height只会应用到这个元素的内容区。 如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。 这意味着当你调整一个元素的宽度和高度时需要时刻注意到...
html5 box-sizing
study724的专栏
03-05 906
前几天，在写自适应布局时，并行的两元素A与B设置的宽度：（A：width:70%;B:width:28%），其是没有超过一行的宽度的，但其布局却撑破，挤压得使B元素停留在下一行中，后来发现是我为A、B元素都设置了padding值的缘由，但布局已定，该怎么办？     想到以前很少用的html5的一个属性：box-sizing:border-box|content-box|inherit （具体意
box-sizing: border-box；是什么意思
m0_64711772的博客
03-26 3994
box-sizing: border-box；是什么意思
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
深入理解 `box-sizing: border-box；`：CSS 布局的利器
engchina的专栏
02-02 1474
深入理解 `box-sizing: border-box;`：CSS 布局的利器
关于box-sizing的全面理解
12-13
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 语法box-sizing: content-box|border-box|inherit; ...
box-sizing: border-box；到底是干什么的？使用场景是什么？底层原理是什么？
长风破浪会有时的博客
11-01 1630
是一个非常有用的 CSS 属性值，用于精确控制元素的大小，尤其是在需要加上边框和内边距的情况下。通过使用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计算入...
html+css:box-sizing属性
u011300580的博客
02-21 442
CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型。 对于form中的有部分元素还是基于传统的Box Model上，比如说input中的submit,reset,button和select等元素，这样如果我们给其设置border和padding他也只会往内延伸。 取值说明： 1、content-box:此值为其默认值，其让元素维持W3C
box-sizing属性
jwz934738949的博客
04-18 686
在我们设置盒子模型的内边距与外边距，如果我们想要保持宽度或高度不会改变的话，就需要使用box-sizing标签。为了保持宽度或者高度不发生改变，会减去一部分内容的宽度或高度。 box-sizing: cotent-box：边框+内边距+内容宽高； boxing-sizing: border-box：内容宽高。 <!doctype html> <html> &lt...
box-sizing:border-box;和 box-sizing:content-box；
.
01-27 756
不同的浏览器解析页面方式稍有不同，就会出现兼容问题。如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .cls{ width: 300px; height: 200p
HTML+CSS基础之浅层理解box-sizing:content-box | border-box | inherit
SoulArbiter的博客
04-15 3231
在css2.中我们设置一个盒模型后，该盒子总占有宽高是为我们设定的内容宽高+内边距（width+padding） 这有时会在实际开发时 由于计算的疏忽给我们带来一些不便  于是 css3的时候  引入了一种新的规范 box-sizing ------------------------------分割线------------------------------ box-sizing
HTML & CSS box sizing
木木木森林
10-06 235
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外
html css box sizing,css3box-sizing详解
weixin_32073733的博客
06-18 384
人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。box-sizing:盒大小,盒模型.我们经常遇到左右模块宽度为50%，加个边框会掉下去，加一个这个样式就能解决，看下栗子： p.container{width:300px;border:10px solid blue;}p.box{box-sizing:border-box;-moz-box-siz...
详解HTML的盒模型以及HTML相关知识点
rr20060119的博客
10-14 4222
HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页结构的标记语言。HTML用于描述和定义网页的结构和内容，通过使用标签和属性来标记和组织文档中的各个元素。一个HTML文档由DOCTYPE>文档类型声明、根元素以及头部和主体组成。HTML标签用于定义文档的不同部分和元素，如标题、段落、链接、图像等。每个标签通常有一个起始标签和一个结束标签，并可以包含其他嵌套标签。
box-sizing: border-box;
06-13
### CSS `box-sizing: border-box` 使用方法及效果 #### 1. `box-sizing: border-box` 的定义与作用 `box-sizing` 是一个 CSS 属性，用于控制元素的盒模型计算方式。当设置为 `border-box` 时，元素的宽度和高度将包括内容区域、内边距（padding）和边框（border），而不仅仅是内容区域的宽度和高度[^4]。这意味着，即使添加了 `padding` 和 `border`，元素的总宽度和高度也不会超出指定的值。 #### 2. 使用方法 通过在 CSS 中声明 `box-sizing: border-box;`，可以改变元素的盒模型计算方式。以下是一个示例代码： ```css .element { box-sizing: border-box; width: 300px; height: 200px; padding: 20px; border: 1px solid #000; } ``` 在这个例子中，`.element` 的总宽度为 300px，总高度为 200px。即使添加了 `padding` 和 `border`，元素的实际宽度和高度仍然保持为 300px 和 200px[^4]。 #### 3. 效果与优势 使用 `box-sizing: border-box;` 可以让开发者更直观地控制元素的尺寸。例如，在设计固定宽度的布局时，不需要额外考虑 `padding` 和 `border` 对总宽度的影响[^1]。这使得布局更加灵活且易于维护。 #### 4. 全局应用 为了确保整个页面的一致性，可以通过全局样式表将所有元素的 `box-sizing` 设置为 `border-box`： ```css * { box-sizing: border-box; } ``` 这样可以避免因不同元素使用不同的盒模型而导致的布局问题[^3]。 #### 5. 示例对比 以下是一个对比示例，展示 `content-box` 和 `border-box` 的区别： ```css /* content-box */ .content-box { width: 300px; height: 200px; padding: 20px; border: 1px solid #000; box-sizing: content-box; } /* border-box */ .border-box { width: 300px; height: 200px; padding: 20px; border: 1px solid #000; box-sizing: border-box; } ``` - 在 `content-box` 模式下，`.content-box` 的实际宽度为 342px（300 + 2 * 20 + 2 * 1），高度为 242px。 - 在 `border-box` 模式下，`.border-box` 的实际宽度和高度分别为 300px 和 200px[^2]。 #### 6. 注意事项 虽然 `box-sizing: border-box;` 提供了更直观的尺寸控制方式，但在某些情况下可能需要特别注意： - 如果需要精确计算内容区域的大小，则需要减去 `padding` 和 `border` 的值。 - 在混合使用 `content-box` 和 `border-box` 时，可能会导致布局不一致的问题[^3]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值