css页面布局方法总结

题目：假设高度已知，请写出三栏布局，其中左右栏各宽300px，中间自适应

目前有以下方法可以实现：
1. 浮动布局
2. 绝对定位布局
3. flex布局
4. 表格布局
5. 网格布局

浮动布局
浮动布局会导致元素脱离文档流，造成高度塌陷，这时候就要清楚浮动。
优点是兼容性较好，如果浮动清楚处理的比较合理是没有什么问题的。

<style>
    *{margin:0;padding: 0;}
    .box{width: 100%;}
    .box div{height: 500px;}
    .left{float: left;width: 300px;background: skyblue;}
    .right{float: right;width: 300px;background: green;}
    .content{background: #ccc;}
</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="content">
            <h2>浮动布局</h2>
        </div>
    </div>
</body>

绝对定位布局
绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。
缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。

<style>
    *{margin:0;padding: 0;}
    .box{width: 100%;position: relative;}
    .box div{height: 500px;}
    .left{width: 300px;background: skyblue;position: absolute;left: 0;}
    .right{width: 300px;background: green;position: absolute;right: 0;}
    .content{background: #ccc;position: absolute;left: 300px;right: 300px;}
</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="content">
            <h2>绝对定位布局</h2>
        </div>
    </div>
</body>

flex布局
flexs布局是css3的内容，就是为了解决上面两种方式的不足而出现的，目前的移动端几乎都是用的flex布局。
缺点就是不支持低版本的浏览器（ie8及其一下）。

<style>
    *{margin:0;padding: 0;}
    .box{width: 100%;display: flex;}
    .box div{height: 500px;}
    .left{width: 300px;background: skyblue;}
    .right{width: 300px;background: green;}
    .content{background: #ccc;flex:1;}
</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="content">
            <h2>flex布局</h2>
        </div>
        <div class="right"></div>
    </div>
</body>

table布局
表格布局兼容性比较好，当flex布局处理不好的问题时候可以考录。
缺点是当一个单元格的高度发生改变变得很长的时候其他的表格会跟着一起变动。

<style>
    *{margin:0;padding: 0;}
    .box{width: 100%;display: table;}
    .box div{height: 500px;}
    .left{width: 300px;background: skyblue;display: table-cell;}
    .right{width: 300px;background: green;display: table-cell;}
    .content{background: #ccc;flex:1;display: table-cell;}
</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="content">
            <h2>表格布局</h2>
        </div>
        <div class="right"></div>
    </div>
</body>

网格布局
网格布局是新得规范,目前 ie11+ 支持

<style>
    *{margin:0;padding: 0;}
    .box{width: 100%;display: grid;grid-template-columns: 300px auto 300px;}
    .box div{height: 500px;}
    .left{background: skyblue;}
    .right{background: green;}
    .content{background: #ccc;}

</style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="content">
            <h2>网格布局</h2>
        </div>
        <div class="right"></div>
    </div>
</body>

扩展：如果高度未知，那些布局方式还可以使用？
可以使用的只有：flex布局、table布局

css页面布局方法总结

题目：假设高度已知，请写出三栏布局，其中左右栏各宽300px，中间自适应

猜你喜欢