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

CSS3:box-sizing 怪异盒模型

时间:2015-09-03 15:23:37      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <link rel="stylesheet" href="style/box.css">
</head>
<body>


标准盒模型
<hr />
    <div class="bag">
        <div class="shoes_box">
            <div class="shoes">
        鞋子
    </div>
    </div>
    </div>
    
怪异盒模型
<hr />
    <div class="bag1">
        <div class="shoes_box1">
            <div class="shoes1">
        鞋子
    </div>
    </div>
    </div>

</body>
</html>
/*盒子模型*/
.shoes{
    width: 100px;
    height: 100px;
    background: #F69A0B;
    text-align: center;line-height: 100px;
    color: #fff;
}

.shoes_box{
    padding: 10px;
    width: 100px;
    height: 100px;
    background: #FE6403;
    border: 5px solid #02C3F5;
}
.bag{
    width: 130px;
    height: 130px;
    margin:100px;
}


/*怪异盒模型*/
.shoes1{
    width: 100px;
    height: 100px;
    background: #F69A0B;
    text-align: center;line-height: 100px;
    color: #fff;
}

.shoes_box1{
    padding: 10px;
    width: 130px;
    height: 130px;
    background: #FE6403;
    border: 5px solid #02C3F5;
    box-sizing:border-box;
}
.bag1{
    width: 130px;
    height: 130px;
    margin:100px;
}

 技术分享

CSS3:box-sizing 怪异盒模型

标签:

原文地址:http://www.cnblogs.com/tinyphp/p/4765701.html

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