【box-sizing】学习

时间：2014-06-07 10:19:40 阅读：259 评论：0 收藏：0 [点我收藏+]

标签：android c style class blog code

bubuko.com,布布扣

中间的两个卡片设置了box-sizing:border:box，width:50%，padding值固定。卡片宽度根据media queries随着屏幕拉伸自动缩放。

这个属性特别适合这种容器宽度自适应，但有固定边距的场景。web设计中配合media queries使用，移动web中可以自适应屏幕。

想起了网易云阅读pad版的图集类文章的排版就有这样自适应宽度但边距固定的需求(pad版需要自适应ipad，android pad，win8 pc and pad)

比如有下面一种模板，卡片中间的缝隙为4px宽，宽度自适应设备屏幕。

bubuko.com,布布扣

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    html,body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .row {
        height: 50%;
    }

    .row div {
        height: 100%;
        border:2px solid #000;
        float: left;
    }

    .column1 {
        width: 50%;    
    }

    .column2 {
        width: 33.333333%;
    }
    </style>
</head>
<body>
<div class="row">
    <div class="column1"></div>
    <div class="column1"></div>
</div>
<div class="row">
    <div class="column2"></div>
    <div class="column2"></div>
    <div class="column2"></div>
</div>
</body>
</html>