码迷,mamicode.com
首页 > Web开发 > 详细

转: css box-sizing的用法

时间:2016-09-15 16:34:26      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:

當你設定一個元素樣式為 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的用法

标签:

原文地址:http://www.cnblogs.com/wucg/p/5874956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!