CSS基础布局

来源：互联网发布：淘宝宝贝宣言编辑：程序博客网时间：2024/06/05 01:20

本文实现CSS中的基础布局，左边定宽右边自适应，右边定宽左右边适应，左右定宽中间自适应，网页内容居中等。

1.左右定宽，中间自适应

实现思路：左边设为absolute，不占实际位置，中间的div就可以上去，再设margin-left ，就可以为左边腾出位置，右边也需要设置absolute,right和top.保证不影响之后的元素。

第一种：

方法：由于左边设为absolute,不占实际位置，所有中间可以顶上去，只需要设margin-left即可。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>左右定宽，中间自适应（第一种方法）</title>    <style>        .wrap div{            height:400px;        }        .wrap{            position: relative;        }        .left{            background-color: darksalmon;            width: 200px;            position: absolute;            left:0;            top:0;        }        .center{            background-color:#5bc0de ;            margin-left: 200px;            margin-right:200px;        }        .right{            position: absolute;            background-color: #b2dba1;            width: 200px;            right:0;            top: 0;        }    </style></head><body><div class="wrap">    <div class="left"></div>    <div class="center"></div>    <div class="right"></div></div><a>edrgesrdtyyyyyyyyyyyyyyyuuuuuuuu</a></body></html>

第二种

方法：中间左浮动，宽度设为100%,需要注意父元素要设overflow:hidden

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>左右定宽，中间自适应(第二种方法)</title>    <style>        .wrap div{            height:400px;        }        .wrap{            position: relative;            overflow: hidden;        }        .left{            background-color: darksalmon;            width: 200px;            position: absolute;            left:0;        }        .center{            float:left;            width:100%;            background-color:#5bc0de;            margin-left: 200px;        }        .right{           /*相对于父元素*/            position: absolute;            background-color: #b2dba1;            width: 400px;            right:0;            top: 0;        }    </style></head><body>    <div class="wrap">        <div class="left"></div>        <div class="center"></div>        <div class="right"></div>    </div>    <a>edrgesrdtyyyyyyyyyyyyyyyuuuuuuuu</a></body></html>

2.左边定宽，右边自适应

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>右边自适应，左边定宽</title>    <style>        .right-auto{            width:100%;        }        .right-auto div{            height: 400px;        }        .left{            float: left;            background: aquamarine;            width:200px;        }        .right{            margin-left: 200px;            background: coral;        }    </style></head><body><div class="wrap">    <div class="right-auto">        <div class="left"></div>        <div class="right"></div>    </div></div><a>edrgesrdtyyyyyyyyyyyyyyyuuuuuuuu</a></body></html>

3.右边定宽，左边自适应

第一种：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>左边自适应，右边定宽</title>    <style>        .right-auto{            /*width:100%;*/            position: relative;        }        .right-auto div{            height: 400px;        }        .left{            float: right;            width: 200px;            background: aquamarine;        }        .right{            margin-right: 200px;            background: coral;        }    </style></head><body><div class="wrap">    <div class="right-auto">        <div class="left"></div>        <div class="right"></div>    </div>    <a>edrgesrdtyyyyyyyyyyyyyyyuuuuuuuu</a></div></body></html>

第二种：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>左边自适应，右边定宽</title>    <style>        .left-auto{            position: relative;        }        .left-auto div{            height: 400px;        }        .left{            margin-left: -300px;            float: left;            width: 100%;            background: aquamarine;        }        #content{            margin-left:300px;        }        .right{            width: 300px;            float: right;            background: coral;        }    </style></head><body><div class="left-auto">    <div class="left" >        <div id="content">            content自适应区，在前面        </div>    </div>    <div class="right" >sidebar固定宽度区</div></div><a>asfsrhterthsdrthttttt</a></body></html>

5.网页内容居中

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>页面内容水平垂直居中</title>    <style>        .center-wrap{            width:100%;            border:1px solid black;        }        .content{            background: darkcyan;            width:60%;            height:200px;            margin:100px auto;        }    </style></head><body><div class="center-wrap">    <div class="content"></div></div></body></html>

阅读全文

0 0