CSS3中的box-sizing（content-box与border-box）

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：

content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型

border-box：怪异盒模型，低版本IE浏览器中的盒模型

现代浏览器和IE9+默认值是content-box。

语法格式：

box-sizing：content-box | border-box

区别：

content-box：padding和border不被包含在定义的width和height之内。

盒子的实际宽度=设置的width+padding+border

border-box：padding和border被包含在定义的width和height之内。

盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS如何实现文字下虚线，代码是什么

  css中，可利用“border-bottom”属性设置下虚线样式，该属性用于设置元素的下边框样式，只需将样式值设置为“dashed”，即可实现虚线下边框效果；语法为“元素{border-bottom:虚线粗细值 dashed 颜色值;}”。

• HTML中边框样式属性有哪些，怎样用的？

  本文主要带大家来了解下HTML表格标记入门知识之边框样式属性的内容，这里详细介绍了此属性的应用方法，对朋友们学习很有帮助，下面就小编来一探究竟。

• HTML/CSS中的空格如何处理？哪些规则要了解？

  HTML/CSS中的空格如何处理？其实在HTML/CSS中的空格的处理有一些规则是需要了解的，因此这篇文章就给大家来分享一下HTML/CSS中的空格的处理方法及要注意的问题，对大家学习HTML/CSS有一定的帮助，感兴趣的朋友就继续往下看吧。

• HTML5中main标签的居中的实现方法是什么

  本篇文章中主要的介绍了关于HTML5 main标签的居中，里面有完整的main标签的用法实例，现在让我们一起来看这篇关于HTML5 main标签的介绍吧

• CSS中的居中出现无效的问题怎样解决？

  SS中的居中出现无效的问题怎样解决？一些朋友在使用在使用text-align或者是margin：0 auto进行居中时，出现居中无效的情况，那么这个问题究竟有什么方法来解决呢？下面我们来看两个示例。