box-sizing 的使用

最新推荐文章于 2025-07-14 14:22:40 发布
原创 最新推荐文章于 2025-07-14 14:22:40 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#box-sizing #css

本文详细介绍了CSS属性box-sizing的两种模式：content-box和border-box的区别及用法。解释了这两种模式下元素宽度和高度的计算方式，并给出了具体的使用场景。

box-sizing 的使用


(1)border-box：如果设置padding，内容往里面挤

内容的宽度：width减去（padding-left加padding-right）

元素的宽度：width

(2)content-box：如果设置了padding，往外面撑

 内容的宽度：width

元素的宽度：width加上（padding-left加padding-right）

 

语法

box-sizing: content-box|border-box|inherit;
值 描述
content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。

什么是CSS的box-sizing属性？它有哪些取值，各有什么不同
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-11 2051
box-sizing`属性的基本概念`box-sizing`的作用取值及其作用示例一：使用`content-box`计算元素尺寸代码解释示例二：使用`border-box`计算元素尺寸代码解释其他取值`inherit`示例三：使用`inherit`取值代码解释不同角度的功能使用思路思路一：创建固定尺寸的布局示例四：创建固定尺寸的布局思路二：制作响应式布局示例五：制作响应式布局思路三：解决百分比内边距和边框问题示例六：解决百分比内边距和边框问题实际工作中的使用技巧在CSS布局中，box-sizing。
深入理解 `box-sizing: border-box；`：CSS 布局的利器
engchina的专栏
02-02 1529
深入理解 `box-sizing: border-box;`：CSS 布局的利器
标准盒模型（content-box）与怪异盒模型（border-box）的区别？box-sizing 的作用是什么？
最新发布
前端大白话
07-14 1067
各位前端战友们，是不是也曾有过这样的经历：明明给div设了width: 200px，加了个padding: 20px，结果元素直接“胖”到超出父容器，整个布局瞬间乱成一锅粥？调试时对着控制台里的盒模型图抓头发，心里默念“这到底是哪个环节出了岔子”？ 作为一名写了8年代码的前端老司机，我太懂这种被盒模型支配的恐惧了。就像连续改了3天的bug后突然收到产品经理的需求变更，那种窒息感简直一模一样。但别慌，今天这篇文章就像一剂“代码布洛芬”，带你轻松搞懂标准盒模型（content-box）和怪异盒模型（borde
box-sizing的用法
weixin_30480075的博客
08-12 129
box-sizing规定两个并排的带边框的框： 例如 以上案例父元素是600px，子元素各占百分之五十，因为两个子元素有边框。导致没有浮动在一排 加了box-sizing:border-box 两个子元素边浮动在一起了 box-sizing:border-box 可以让元素的边框，边距加起来等于实际的宽度。 转载于:https:...
box-sizing使用方法
清风明月的博客
02-26 638
box-sizing: content-box|border-box|inherit; content-box：在宽度和高度之外绘制元素的内边距和边框 border-box：内边距和边框都在设定的宽度和高度内绘制 inherit ：规定应从父元素继承box-sizing属性的值 ...
box-sizing属性的用法
yangyang的专栏
08-10 633
box-sizing属性用来设置或检索对象的盒模型组成模式 起因是因为盒子模型分为标准盒子模型和IE盒子模型。 这意味着，如果我们设置一个宽度为200px，而实际呈现的盒子的宽度可能会大于200px(除非没有左右边框和左右补白)。这可能看起来比较怪，CSS设置的宽度仅仅是内容区的宽度，而非盒子的宽度。 这导致的直接结果是当我们希望页面呈现的盒子的宽度是200px的时候，我们需要减去它的左右边框和...
box-sizing的使用
qq_36195950的博客
08-06 800
盒子模型 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑，尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度，需要加上一些其它的属性，例如： padding + border + width= 盒子的宽度 padding+ ...
CSS3属性box-sizing使用指南
12-13
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码代码如下:box-sizing: content-box | padding-box | border-box 默认值是 content-box ，对应CSS2.1规范中标准的盒子...
关于box-sizing的全面理解
12-13
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内...
详解CSS3中的box-sizing（content-box与border-box）
12-14
content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式： box-sizing：content-...
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计算入...
box-sizing 最主要的用法
qq_40276992的博客
07-09 272
box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。 如果你创造了一个 没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 width:100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为： 100px(width)+210px(padding)+2*10px(border)=140px 所以你会得到一个比你预期（100px）还要更大的容器，结果就是会
Box-Sizing
精彩人生
02-16 2360
来自：http://www.w3cplus.com/content/css3-box-sizing box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS
box-sizing的简单用法
m0_61487366的博客
12-15 389
初始代码： <style> *{ margin: 0; padding: 0; } li{ list-style: none; } .clearfix::after{ display: block; content: ''; clear: both; } .box{ width: 1000px; margi...
CSS的伪类和伪元素，看完这篇文章你就懂了
m0_60228652的博客
07-21 305
问：BFC 与 IFC 区别 BFC 是块级格式上下文，IFC 是行内格式上下文： 内部的 Box 会水平放置 水平的间距由 margin，padding，border 决定 问：BFC会与float元素相互覆盖吗？为什么？举例说明 不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是 BFC，也没有设置 float，会形成对上面的元素进行包裹内容的情况，如果设置了下面元素为 overflow：
盒子模型中box-sizing的使用
月落星河
01-31 579
CSS 盒子模型(Box Model) 这里是引用所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 盒子中主要的属性就5个：width、height、padding、border、margin。 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 我们一般使用控制台选中的都是内容的宽度，不
浅谈box-sizing的用法
xi_2130的博客
09-21 1765
box-sizing，css3新属性，为了改变ie浏览器的盒模型遗留的width（名副其实）bug属性：content-box | border-box两种属性的用法和区别：<!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <style type="text/css"> *{
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box解析每行css代码
06-09
### 逐行解析 CSS 代码 `-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box` #### 1. `-webkit-box-sizing: border-box;` 此代码为 Webkit 内核浏览器（如 Chrome 和 Safari）提供兼容性支持，确保这些浏览器能够正确应用 `box-sizing: border-box` 的行为[^4]。具体来说，它改变了元素的盒模型计算方式，使得宽度和高度包含内边距（padding）和边框（border），而不是将它们加到指定的宽高之外。 #### 2. `-moz-box-sizing: border-box;` 此代码专门为 Mozilla Firefox 浏览器的 Gecko 内核提供兼容性支持，功能与 `-webkit-box-sizing` 相同，即改变盒模型计算方式，使宽度和高度包含内边距和边框[^4]。 #### 3. `box-sizing: border-box;` 这是标准的 CSS 属性定义，适用于所有现代浏览器，无需特定前缀。当设置为 `border-box` 时，元素的总宽度和高度包含了内容、内边距和边框。这意味着为元素设定的宽度和高度将同时包含这些部分，无论其内边距和边框如何变化[^2]。 例如： ```css .example { box-sizing: border-box; width: 200px; padding: 20px; border: 10px solid black; } ``` 在这种情况下，元素的实际宽度将始终保持为 200px，而不会因为内边距和边框的增加而超出指定宽度[^2]。 --- ### 兼容性意义 在早期的浏览器版本中，不同厂商对 CSS 规范的支持程度不一致，导致某些属性需要通过特定的前缀来实现跨浏览器兼容性。`-webkit-` 和 `-moz-` 前缀分别针对 Webkit 和 Gecko 内核浏览器提供了兼容性支持，确保即使在旧版浏览器中也能正确渲染样式。 随着浏览器技术的发展，大多数现代浏览器已经完全支持无前缀的标准属性 `box-sizing: border-box`，但仍保留前缀形式以向后兼容旧版浏览器。 --- ### 示例代码解析 以下是一个完整的示例，展示 `box-sizing: border-box` 的效果： ```css .imgBox img { width: 140px; height: 140px; padding: 20px; border: 20px solid orange; margin: 10px; } #contentBox img { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } #borderBox img { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } ``` - 在 `#contentBox img` 中，使用了 `content-box` 模式，此时元素的宽度和高度仅包括内容区域，内边距和边框会额外增加到指定尺寸之外[^3]。 - 在 `#borderBox img` 中，使用了 `border-box` 模式，此时元素的宽度和高度包括内容、内边距和边框，实际渲染尺寸不会超出指定值[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值