首页 > 代码库 > 转: css box-sizing的用法

转: 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>

 

转: css box-sizing的用法