css布局：table布局、两栏布局、三栏布局

来源：互联网发布：avena 36一盒粉末淘宝编辑：程序博客网时间：2024/05/21 11:26

一、最初的布局——table

最初的时候，网页简单到可能只有文字和链接。这时候，大家最常用的就是table。因为table可以展示出多个块的排布。这种布局现在应该不常用了，因为在形色单一时，使用起来方便。但是，现在的网页变得越来越复杂，适配的问题也是越来越多，这种布局已经不再适用。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>文档标题</title>        <style type="text/css">            table{                width: 100%;                height: 600px;                text-align: center;                font-size: 100px;            }        </style>    </head>    <body>        <table border="1">            <tr>                <td>左栏</td>                <td>中间</td>                <td>右栏</td>            </tr>        </table>    </body></html>

这里写图片描述

二、两栏布局

两栏布局：一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>文档标题</title>        <style type="text/css">            .left{                  width: 200px;                  height: 600px;                  background: green;                  float: left;                  display: table;                  text-align: center;                  line-height: 600px;                  color: #fff;                }                .right{                  margin-left: 210px;                  height: 600px;                  background: blue;                  text-align: center;                  line-height: 600px;                }        </style>    </head>    <body>        <div class="left">定宽</div>        <div class="right">自适应</div>    </body></html>

这里写图片描述

三、三栏布局

三栏布局：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。
方法一：使用左右两栏使用float属性，中间栏使用margin属性进行撑开

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>文档标题</title>        <style type="text/css">            .left{                  width: 200px;height: 600px; background: red; float: left;                    }                .right{                  width: 150px; height: 600px; background: green; float: right;                }                .middle{                  height: 600px; background: yellow; margin-left: 220px; margin-right: 160px;                }        </style>    </head>    <body>        <div class="left">左栏</div>        <div class="right">右栏</div>        <div class="middle">中间栏</div>    </body></html>

这里写图片描述
缺点是：1. 当宽度小于左右两边宽度之和时，右侧栏会被挤下去；2. html的结构不正确

方法二：使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>文档标题</title>        <style type="text/css">            .left{            background: pink;            width: 200px;            height: 600px;            position: absolute;            top: 0;            left: 0;        }        .middle{            height: 600px;            margin: 0 220px;            background: blue;        }        .right{            height: 600px;            width: 200px;            position: absolute;            top: 0;            right: 0;            background: yellow;        }        </style>    </head>    <body>        <div class="left">左栏</div>        <div class="middle">中间栏</div>        <div class="right">右栏</div>    </body></html>

这里写图片描述
好处是：html结构正常。
缺点是：当父元素有内外边距时，会导致中间栏的位置出现偏差。

方法三：使用float和BFC配合圣杯布局
将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>文档标题</title>        <style type="text/css">            .wrapper{                overflow: hidden;  //清除浮动            }            .middle{                width: 100%;                float: left;            }            .middle .main{                margin: 0 220px;                background: pink;            }            .left{                width: 200px;                height: 300px;                float: left;                background: yellow;                margin-left: -100%;            }            .right{                width: 200px;                height: 300px;                float: left;                background: grey;                margin-left: -200px;            }        </style>    </head>    <body>        <div class="wrapper">            <div class="middle">                <div class="main">中间</div>            </div>            <div class="left">                左栏            </div>            <div class="right">                右栏            </div>        </div>    </body></html>

这里写图片描述
缺点是：1. 结构不正确 2. 多了一层标签。

方法四：flex布局

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>文档标题</title>        <style type="text/css">            .wrapper{                display: flex;            }            .left{                width: 200px;                height: 600px;                background: pink;            }            .middle{                width: 100%;                height: 600px;                background: yellow;                marign: 0 20px;            }            .right{                width: 200px;                height: 600px;                background: blue;            }        </style>    </head>    <body>        <div class="wrapper">            <div class="left">左栏</div>            <div class="middle">中间</div>            <div class="right">右栏</div>        </div>    </body></html>

这里写图片描述
除了兼容性，一般没有太大的缺陷

end、、、、、、

阅读全文

0 0