boxsizing常用属性（html代码文本框加上这个-moz-box-sizing:content-box; box-sizing:border-box;，火狐浏览器就不会超出）
本文目录
- html代码文本框加上这个-moz-box-sizing:content-box; box-sizing:border-box;，火狐浏览器就不会超出
- box-sizing是css3的新属性吗
- css中boxsizing怎么继承
- css中box的padding属性包括的属性有
- box-sizing属性有哪些
html代码文本框加上这个-moz-box-sizing:content-box; box-sizing:border-box;，火狐浏览器就不会超出
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内，其实就是怪异模式了~
你采用了border-box属性，火狐兼容这个属性，所以边框被算进高度里面，如果不采用的话，边框是在文本框的高度基础上再加上去的，比如，你设置高度为20；box-sizing:border-box，那么文本框高度是20；但是如果不添加box-sizing:border-box的话，文本框的高度会是22，所有就比别的高出2像素
box-sizing是css3的新属性吗
是的，针对于div盒子中的border,padding属性，使这些属性定义的宽度自动向内减去，免去了需要重新数字计算div尺寸的麻烦。使用后，不论如何改变div盒子内border和padding属性的尺寸，div盒子的占位大小都不会改变。
css中boxsizing怎么继承
box-sizing是CSS的一个属性，很好的解决了盒模型的相关问题。CSS中的盒模型（Box model）分为两派，一派是W3C的标准模型，一派是IE的传统模型。那它们之间有什么不同的呢？首先需要明确它们都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；而不同的地方就在于两者的计算方法不一至：（下面引用一些公式向大家展示一下两者的不同之处）
W3C的标准盒模型
IE传统盒模型（IE6以下不含IE6版本或“QuirksMode下IE5.5+”）
接下来直接看看box-sizing的应用吧。
box-sizing属性可以分为两个值：content-box（default），border-box。
content-box，border和padding不计算入width之内
border-box，border和padding计算入width之内
（注1：ie8+浏览器支持content-box和border-box；ff则支持全部三个值）
（注2：使用时，有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-）
栗子，接住：
《style type="text/css"》
.content-box{
-webkit-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.border-box{
-webkit-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
《/style》
我是在谷歌下运行的，所以加了-webkit-前缀，效果如下：
蓝色加边框：总宽150px，高150px
黄色加边框：总宽100px，高100px
css中box的padding属性包括的属性有
1、左补距离(设置距左内边距)。
2、头顶补距离(设置距顶部内边距)。
3、右补距离(设置距右内边距)。
4、底补距离(设置距低内边距)。
box-sizing属性有哪些
box-sizing出现是border-box有强烈的需求，在许多场合也更符合大多数人对于sizing的直觉。但margin-box其实很少人会这样理解sizing。
stackoverflow这个提问者的需求改用border和border-box，或者用calc函数，或者改用flexbox等都可以达成，且可能更符合直觉。况且margin存在collaspe和负值，如果要引入margin-box，会有点复杂，理解成本估计比前面的那些方式都要高。
本文相关文章：
textbox只能输入数字（怎么使textbox文本框只能输入数字）
2026年9月1日 05:50
datagridview选中多行（dataGridView选择多行，指定一列的数据显示到textbox）
2026年7月17日 03:30
更多文章：
idea控制台乱码（idea 输出 System.out.println（） 控制台乱码）
2026年10月14日 07:30
2026年10月14日 06:20
spring事务的作用（为什么要使用spring的事务，一般在什么情况下使用）
2026年10月14日 05:40
2026年10月14日 04:50
linux怎么进入命令行（怎么样配置linux使其启动时直接登录到命令行模式）
2026年10月14日 02:00
java培训机构好还是大学好（大学生想转行学java，该去java培训班还是自学呢）
2026年10月13日 23:30
2026年10月13日 19:10
2026年10月13日 19:00
前端面试必背十个点（资深HR揭秘：Web前端面试技巧有哪些）
2026年10月13日 17:50
sqlplus重置用户名密码（Oracle中的plus的用户名和密码忘了怎么办）
2026年10月13日 17:40
