在 了解 box -s izing之前，让我们来稍稍回顾一下 盒子 模型，模型分为：标准 盒模型 +IE盒模型。那这有什么区别呢？见图所示：
从上图可以看到标准 w3c 盒子模型的范围包括 m arg in、border、padding、content，并且 content 部分不包含其他部分。
从上图可以看到 ie 盒子模型的范围也包括 mar gin 、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
当然前端工程师在写页面布局的时候该采取的是 标准的盒模型（需要在页面ht ML 声明处加上docty PE 声明），告知浏览器按照标准盒模型的方式进行渲染页面，反之，页面会根据 不用 的浏览器进行解析，IE会使用IE的盒模型进行渲染，FIREFOX 和 GOOGLE 等会按照标准模式惊醒渲染，显然是不合常理的。
所以为了让我们写的网页能兼容各个浏览器，最好使用标准 w3c 盒子模型。
说完了盒子模型，进入到我们这个css属性box-sizing的了解。
box-sizing的三个属性值: content-box在 宽 度和高度之外 绘制 元素的 内边距 和边框|border-box为元素指定的任何内 边距 和边框都将在已设定的宽度和高度内进行绘制|inher IT 规定应从父元素继承 box-sizing 属性的值;box-sizing 属性允许您以特定的方式定义匹配某个区域的 特定元素 。
ie8+浏览器支持content-box和border-box；
ff则支持全部三个值。
<!doctype html p ub lic "-//w3c//dtd xhtml 1.0 transitional//en" "http://HdhCmsTestw3. org /tr/xhtml1/dtd/xhtml1 -t ransitional.dtd">
<html lang="en">
<head>
< ;m eta charset="utf-8">
<title>box-sizing 事项 </title>
<style type="text/css">
*{padding: 0;margin: 0;font-f ami ly: " 微软雅黑 ";box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */
- webkit -box-sizing:border-box; /* Safari */}
.content{width: 800px;h ei ght: 500px;margin: 30px auto;border: 5px solid # e2e2e2;padding: 10px}
</style>
</head>
<body>
<div class="content">
这是内容@！
</div>
</body>
</html>
在进行box-sizing属性修饰之后盒子得到的宽度是：770px = 800px - 10px -20px;
意思 是内填充和边框在已经设定的content盒子800像素里面进行绘制，导致了content盒子的宽度为：770。
在不进行box-sizing属性修饰之后盒子得到的宽度是：800px;
box-sizing这个属性在我们前端开发 过程中 ，使得页面布局显得十分整齐， 简单 ！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 谈谈对css属性box-sizing的了解 全部内容，希望文章能够帮你解决 谈谈对css属性box-sizing的了解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于谈谈对css属性box-sizing的了解的详细内容...