由多列等高布局引发的思考

一道经典的CSS题，是面试时常考的问题之一。

相信大家都知道怎么做了，将parent设置overflow:hidden，子元素都设置超级大的padding-bottom和等量负值的margin-bottom。运用到的知识点是强大的负边距！

当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同
当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会上移、左移

拿一道左边固定右边自适应的题来说吧，为何要将固定宽度的div设置margin-right为负的宽度，因为margin-right为负时它本身不会发生位置变化，但是他后面的自适应div会左移。但仅仅这样还不行，因为自适应div的左移完全挡住了固定宽度的div，我们需要将自适应div的margin-left设为正的宽度，这样才能让元素本身左移。注意自适应div的宽度要设为100%哦。

        #mydiv1 {
            float:left; 
            width: 200px;
            height: 200px;
            margin-right:-200px;
            background: deeppink;
            
        }
        #mydiv2 {
            float: left;
            width:100%;
            height: 200px;
            margin-left:200px;
            background: deepskyblue;
        }

在这里提到了百分数，我们来回顾个小知识点：padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。但是设置height本身还是依据父容器的高度。

扯回来我们的负边距问题，除了两列自适应用得最多的就是三列自适应了。那应该如何实现呢？

首先html上的写法就要注意，把中间自适应部分放在最前面。

    <div class="main">Main</div> 
    <div class="left">Left</div>
    <div class="right">Right</div>

接下来就是重头戏了，将放在左边的div设置margin-left:-100%这样才能让自己跑到最左边；接着将放在右边的div设置margin-left:-200px如此才可以把自己提到右边。

        body{
            margin:0;
            padding:0;
        }
        .left {
            float: left;
            width: 200px;
            height: 500px;
            background: deeppink;
            margin-left: -100%;
        }
        .main {
            float: left;            
            width: 100%;
            height: 500px;
            background: deepskyblue;
        }
        .right {
            float: left;
            width: 200px;
            height: 500px;
            background: deeppink;
            margin-left: -200px;
        }

记住！一切都是为了让自己动！坐上来自己动！

负边距的问题说完了但也只成功了一半，如果我问你overflow:hidden在这里的作用，你可不能只简单回复我个“清除浮动”就完事了。overflow属性约定了容器盒子是否剪裁掉超出其内边界的部分，当一个元素的高度超出了容器盒子的高度，使用overflow可以裁掉超出内边界的部分，整体听父元素的高度。同时overflow还会像float、absolute、inline-block，使其具有包裹性，为这个块级元素生成一个独立的块级上下文BFC，可以包裹浮动流，全部浮动子元素也不会引起容器的高度塌陷。

不得不提面试时还会问到的一个内容zoom。可以用于缩放（类似scale）、清除浮动、解决margin重叠问题。火狐下不能使用，chrome和ie下则可以。

①实现放大两倍——直接zoom:2（在非ie下大家也不用这个方法实现缩放，都用transform:scale(2)了）

②对ie6的hack overflow:hidden; _zoom:1; 清除border内部浮动

③触发IE浏览器的haslayout ，haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，当为true的时候表示有自己的布局，false的时候表示继承父布局。

当当当当~~虽然负边距是很强大啦，但是有没有更简单一点的方法？

有！直接在父元素上display:flex 。这依赖于 align-items 属性，它的默认值是 stretch，也就是在辅轴上将所有子项目拉伸为同一高度（或宽度）以保持对齐。

stretch 默认：

flex-start：

flex-end：

由多列等高布局引发的思考

猜你喜欢