本文实现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>