转: css box-sizing的用法

當你設定一個元素樣式為 box-sizing: border-box;,這個元素的內距和邊框將不會增加元素本身的寬度。

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Test box-sizing</title>
<style>
.simple {
width: 500px;
margin: 20px auto;
border: solid red 40px;
/*-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;*/
box-sizing: border-box;
} .fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
/*-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;*/
box-sizing: border-box;
}
</style>
</head> <body>
<div class="simple">我們現在一樣大小了!
</div>
<div class="fancy">喔耶!</div>
</body> </html>
上一篇:常用Git代码托管服务分享


下一篇:Git 在团队中的最佳实践--如何正确使用Git Flow[转]