css中常用的几种自适应布局

最新推荐文章于 2024-08-29 01:41:42 发布

List_dong

最新推荐文章于 2024-08-29 01:41:42 发布

阅读量1.3w

点赞数 6

文章标签：前端技术页面布局自适应

一、水平居中（使用text-align+inline-block）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
    text-align:center;
    background:red;
    width:200px;
    height:200px;
    }
.child{
    display:inline-block;
    background:yellow;
    width:100px;
    height:100px;
    }
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>

运行结果：

二、垂直居中（使用table-cell+vertical-align）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
    display:table-cell;
    vertical-align:middle;
    background:red;
    width:200px;
    height:200px;
    }
.child{
    display:inline-block;
    background:yellow;
    width:100px;
    height:100px;
    }
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>

运行效果：

三、水平垂直居中（使用text-align+inline-block+table-cell+vetical-align）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    background:red;
    width:200px;
    height:200px;
    }
.child{
    display:inline-block;
    background:yellow;
    width:100px;
    height:100px;
    }
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>

运行效果：

四、多列布局

（1）定宽+自适应（使用float+margin）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 
.left{
    background-color:red;
    width:100px;
    float:left;
    position:relative;
    }
.rightfix{
    background-color:blue;
    float:right;
    margin-left:-100px;
    width:100%;
    }
.right{
    margin-left:120px;
    }
</style>
</head>
<body>
 
<div class="left">left</div>
<div class="rightfix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
 
 
</body>
</html>

运行结果：

（2）两列定宽+一列自适应（使用float+overflow）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.left{
    background-color:red;
    }
.center{
    background-color:yellow;
    }
.left,.center{
    width:100px;
    float:left;
    margin-right:20px;
    }
 
.right{
    overflow:hidden;
    background-color:blue;
    }
</style>
</head>
<body>
 
<div class="left">left</div>
<div class="center">center</div>
<div class="right"><p>right</p><p>right</p></div>
 
 
 
 
</body>
</html>

运行结果：

(3) 不定宽+自适应（使用float+overflow）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 
.left{
    background-color:red;
    float:left;
    margin-right:20px;
    }
.right{
    background-color:blue;
    overflow:hidden;
    }
.left p{
    width:200px;
    }
</style>
</head>
<body>
 
<div class="left"><p>left</p></div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
 
 
 
</body>
</html>

运行结果：

（4）两列不定宽+一列自适应（使用float+overflow）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 
.left,.center{
    float:left;
    margin-right:20px;
    }
.left{    
    background-color:red;
}
.center{
    background-color:yellow;
    }
.right{
    background-color:blue;
    overflow:hidden;
    }
.left p,.center p{
    width:200px;
    }
</style>
</head>
<body>
 
<div class="left"><p>left</p></div>
<div class="center"><p>center</p></div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
 
 
 
</body>
</html>

运行结果：

（5）等分布局（使用float）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parentwrap{
    width:960px;
    overflow:hidden;
 
    
}
.parent{
    margin-left:-20px;
    overflow:hidden;
    background-color:lightgray;
}
.child{
    background-color:red;
    width:25%;
    height:100px;
    float:left;
    padding-left:20px;
    box-sizing:border-box;
    background-clip:content-box;
    }
</style>
</head>
<body>
<div class="parentwrap">
<div class="parent">
<div class="child">part1</div>
<div class="child">part2</div>
<div class="child">part3</div>
<div class="child">part4</div>
</div>
</div>
</body>
</html>

运行结果：

（6）定宽+自适应+两块高度一样高

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
    display:table;
    width:100%;
    layout:fixed;
    }
.left{
    background-color:red;
    width:100px;
    padding-right:20px;}
.right{
    background-color:blue;
    }
.left,.right{
    display:table-cell;
    }
</style>
</head>
<body>
<div class="parent">
<div class="left"><p>left</p></div>
<div class="right"><p>right</p><p>right</p></div>
</div>
</body>
</html>

运行结果：

5.全局布局（使用position）

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.top{
    height:100px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    background-color:red;
    }
.left{
    position:absolute;
    top:100px;
    left:0px;
    bottom:50px;
    width:200px;
    background-color:blue;
    }
.right{
    position:absolute;
    top:100px;
    left:200px;
    right:0px;
    bottom:50px;
    background-color:yellow;
    }
.bottom{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    background-color:pink;
    }
.inner{
    min-height:100px;
    }
</style>
</head>
<body>
<div class="top"><p>top</p></div>
<div class="left"><p>left</p></div>
<div class="right"><div class="inner">right</div></div>
<div class="bottom"><p>bottom</p></div>
</body>
</html>

运行结果：