css3之box-sizing

最新推荐文章于 2025-12-07 22:07:37 发布
最新推荐文章于 2025-12-07 22:07:37 发布 · 90 阅读 · 0
文章标签：

#box-sizing #css3

本文详细介绍了CSS中两种不同的盒模型：content-box和border-box，并通过示例对比了它们的区别。此外，还提供了这两种盒模型在不同浏览器中的兼容性情况。

简单记录，个人学习。

 

box-sizing:

 

 

  •   content-box -------维持css2.1盒模型的组成模式，element width = border+padding+content
  •   border-box  -------改变css2.1盒模型的组成模式，elemnet width = content
贴上两个图----资源来源于 http://chic.chicchina.net/shuxin/box-sizing.asp


 border-box下的width    ( 注释：发现图错了，宽高度还是200*70)
 content-box下的width

兼容性：



 

  • -moz-box-sizing:border-box          Firefox(Gecko) 
  • -webkit-box-sizing:border-box      Safari(Webkit) 3.0
  • box-sizing:border-box                   Opera 7以上 |  IE8  |  IE9
 
 
CSS3之box-sizing：border-box作用
zqr4818的博客
05-30 357
CSS3之box-sizing：border-box作用
CSS中的box-sizing
wz310的博客
07-11 512
box-sizing有两个属性：content-box/border-box，content-box: width仅指内容框宽度，不包括padding和border宽度，该属性的盒子为标准盒子模型，border-box: width指内容框宽度+左右padding+左右border宽度，该属性的盒子为IE盒子模型
CSS属性 - box-sizing
coolchaobing的博客
07-29 289
认识CSS属性 - box-sizing
#Css篇： box-sizing: content-box& box-sizing: border-box
...
10-12 685
box-sizing 是 CSS 中的一个属性，用于指定元素的总尺寸应该如何计算。
CSS3 box-sizing属性
猫老板的豆
07-27 488
简介 box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度。 // box-sizing 有三种属性 box-sizing: content-box|border-box|inherit; content-box ( 默认值 - 标准盒模型 ) 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 width = 内容的宽度
CSS box-sizing 属性详解
My_wife_QBL的博客
07-09 1312
CSS 盒模型是描述 HTML 元素在页面中布局的基本模型。每个 HTML 元素都被视为一个矩形的盒子，这个盒子由内容区域、内边距（padding）、边框（border）和外边距（margin）组成。盒模型的计算方式对元素的最终尺寸有重要影响。box-sizing.element {/* 或 box-sizing: border-box;*/：使用标准盒模型，元素的宽度和高度仅包括内容区域。：使用替代盒模型，元素的宽度和高度包括内容区域、内边距和边框。
CSS中box-sizing的用法
810cheng
04-01 685
CSS中boxsizing的用法
【CSS】box-sizing 属性
小秀的博客
06-09 5214
css中的box-sizing属性
大白话CSS 中的box-sizing属性，它有哪些值以及各自的作用
前端大白话
03-07 1195
属性主要是用来规定浏览器应该怎样计算一个元素的尺寸的。简单来讲，就是决定了元素的宽度、高度以及它的内边距、边框等这些东西是怎么组合起来占据页面空间的。属性是用来管着浏览器怎么计算一个元素的大小的。简单说，就是决定了元素的宽度、高度，还有它里面的内边距、边框这些东西怎么一起占空间。属性的不同值可以让我们更灵活地控制元素在页面上的尺寸和布局，根据不同的设计需求选择合适的值，能让我们的网页布局更合理、更美观。
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
CSS3 box-sizing属性详解
12-13
 3、border-box，border和padding计算入width之内，其实就是怪异模式了~ 注意： ie8+浏览器支持content-box和border-box； ff则支持全部三个值。 使用时： -webkit-box-sizing: 100px; // for ios-safari, and
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定...
CSS3属性box-sizing使用指南
12-13
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码代码如下:box-sizing: content-box | padding-box | border-box 默认值是 content-box ，对应CSS2.1规范中标准的盒子...
css3 box-sizing属性使用参考指南
12-01
CSS3的`box-sizing`属性是一个非常重要的样式规则，它允许开发者改变元素的盒模型，从而更好地控制元素的布局和尺寸。盒模型是CSS布局的基础，理解`box-sizing`属性对于构建响应式和灵活的网页设计至关重要。 在CSS...
CSS3 分页设计指南
最新发布
lsx202406的博客
12-07 217
CSS3分页设计是网站和应用程序中不可或缺的一部分。通过本文的介绍，相信您已经掌握了CSS3分页的设计方法和技巧。在实际应用中，可以根据需求调整分页样式，打造出既实用又美观的分页效果。
元素的显示和隐藏 html5和css3的一些新特性
2301_80872441的博客
12-04 184
属性 伪类选择器 类权重都是10。
CSS3 过渡
lsx202406的博客
12-07 213
CSS3过渡为网页元素添加了丰富的动态效果，使得网页的交互性和视觉效果得到了极大的提升。通过本文的介绍，相信读者已经对CSS3过渡有了深入的了解。在实际开发中，合理运用CSS3过渡，可以提升网页的视觉效果和用户体验。
gird布局之九宫格布局
syt_1013的博客
12-04 273
非原创，内容来源渡一袁老师，简单记录下吧。
-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）...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值