CSS3中盒子的box-sizing属性

时间：2016-09-16 12:54:42 收藏：0 阅读：2548

box-sizing

属性

box-sizing 属性用来改变默认的 CSS盒模型对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

box-sizing：content-box（default） | border-box ;

content-box

　　　　默认值，标准盒模型。 width与 height 只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。

　　　　注意: 内边距, 边框 & 外边距都在这个盒子的外部。

　　　　比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

　　　　
　　　　尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。

border-box

　　　　width 与 height 包括内边距（padding）与边框（border），不包括外边距（margin）。

　　　　这是IE 怪异模式（Quirks mode）使用的盒模型。注意：这个时候内边距和边框将会包括在盒子中。

　　　　比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

　　　　如果计算后的最内部的内容宽度为负值，都会被计算成0，内容还在，所以不可能通过　border-box来隐藏元素。

　　　　　　
　　　　尺寸计算公式：width = border + padding + 内容的宽度，height = border + padding + 内容的高度。

　Demo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*计算height，width时包含了padding border的值*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            /*计算height，width时没有包含padding border*/
            /*-webkit-box-sizing: content-box;*/
            /*-moz-box-sizing: content-box;*/
            /*box-sizing: content-box;*/

            /*计算height，width时包含了padding 的值*!/*/
            /*-webkit-box-sizing: padding-box;*/
            /*-moz-box-sizing: padding-box;*/
            /*box-sizing: padding-box;*/

            background-color: gray;
            border: 10px orange solid;
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<script>

</script>
<body>
    <div>Demo</div>
</body>
</html>

Link...

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing