box-sizing 的作用
box-sizing：content-box | border-box content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距
-
content-Box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-Box告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border+ padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
<span style="font-family: Microsoft YaHei; font-size: 16px">border-Box<a title="width 属性指定了元素内容区的宽度. 内容区在元素padding，border和margin里面。" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width" rel="nofollow" target="_blank">width和<a title="height指定元素内容区高度。 内容区 content area在元素padding,border,and margin 的里面。" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/height" rel="nofollow" target="_blank">height属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的<a title="CSS/Box_model" href="https://developer.mozilla.org/en-US/docs/CSS/Box_model" rel="nofollow" target="_blank">盒模型。注意，填充和边框将在盒子内,例如,.Box {width: 350px; border: 10px solid black;}导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-Box使元素消失。
- <span style="font-family: Microsoft YaHei; font-size: 16px">这里的维度计算为：width = border + padding + 内容的 width，height = border + padding + 内容的 height。
- <span style="font-family: Microsoft YaHei; font-size: 16px">文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
