CSS3中盒子的box-sizing属性

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

上一篇:matlab 相关代码记录


下一篇:cocos2d-html5在cocos2d-x里面打包编译