css3时代布局新改变

之前有听到同学问css3相关方面的笔试题，用css3实现一些css2比较麻烦的布局,需要实现的是

这样一个功能。其实这里还是有多重实现方式的

一：使用css3的宽度计算功能

我看到上面这个第一反应就是css3的数值可以计算！但是记得不太清楚了，具体怎么计算的还是需要网上查查，恩，结果就是这个样子的：

<style type="text/css">
            .box{
                *zoom:1;
            }
            .box:after{
                display:block;
                content:"clear";
                clear:both;
                visibility:hidden;
                height:0;      
                overflow:hidden;                
            }
            .item {
                height:100px;
                float:left;
            }
            .item:nth-of-type(1) {
                background-color:green;
                width:200px;
            }
            .item:nth-of-type(2) {
                background-color:red;
            }
            .item:nth-of-type(3) {
                background-color:blue;
            }
            .item:nth-of-type(3), .item:nth-of-type(2) {
                width:-moz-calc(50% - 100px);
                width:-webkit-calc(50% - 100px);
                width:-ms-calc(50% - 100px);
                width:-o-calc(50% - 100px);
                width:calc(50% - 100px);
            }
        </style>

直接定义后面的宽度就好，这样子很方便，也很好理解

ps：值得注意的是，如果item不使用float布局的话，要考虑一个字符大小的问题，因为div之间是有空格的，所以需要把字符大小改为0，但是safari有默认的最小字符大小，所以如果需要紧靠在一起的话，还是用float好一点

 

 

二：使用弹性框（flexbox）

如果是使用flexBox的话就简单多了，直接添加个属性就好了：

<style type="text/css">
            .box {
                display:-ms-flexbox;
                display:-webkit-flex;
                display:-o-flex;
                display:-moz-flex;
                display:flex;
            }
            .item {
                height:100px;
            }
            .item:nth-of-type(1) {
                width:200px;
                background-color:red;
            }
            .item:nth-of-type(2) {
                width:50%;
                background-color:green;
                -ms-flex:1;
            }
            .item:nth-of-type(3) {
                -ms-flex:1;
                width:50%;
                background-color:blue;
            }
        </style>

      这里值得一提的是，flex有很多版本，不同版本之间兼容有些不一样，比如ie10就和chrome等现代浏览器对弹性项目的宽度计算不一样，

如果是chrome等现代浏览器的话，百分比宽度代表的是可使用区域的百分比，而如果是ie10的话，需要通过-ms-flex制定相对大小，宽度也是在这个属性内设置，这个属性存在的话width将不起作用，并且宽度百分比表示的是对于父元素的百分比（和普通元素一致）

结尾：相对而言的话，我还是比较倾向于用前一种宽度计算的方法，因为比较好理解，如果是后一种方法的话，众多浏览器版本兼容就是个问题，而且不同的flex版本之间还有写法不一致的问题。。。。。总之，标准尚未统一，一切依旧蛋疼

 

ps：如果想知道flexbox布局更多使用方法及原理，可以看看我的另一篇文章《flexbox 布局使用体会》

转载于:https://www.cnblogs.com/yansi/p/3326488.html