您的位置：首页 > Web前端 > CSS

HTML+CSS多种布局技巧

2017-08-17 21:33 656 查看

一、水平居中

水平居中多用于标题以及内容区域的组织形式，以下是五种实现水平居中的方法：

方法一： 使用inline-block和text-align实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平居中（1）</title>
<style>
.parent{
text-align: center;
}
.child{
display: inline-block;
height: 200px;
background: green;
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
使用inline-block和text-align实现水平居中
</div>
</div>
</body>
</html>

优点：兼容性好

缺点：需要同时设置子元素和父元素

方法二： 使用margin：0 auto来实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平居中（2）</title>
<style>

.child{
margin: 0 auto;

width: 300px;
height: 200px;
background: green;
color: white;
}

</style>
</head>
<body>
<div class="child">
使用margin：0 auto来实现水平居中
</div>
</body>
</html>

优点：兼容性好

缺点：需要指定宽度

方法三： 使用table和margin：0 auto实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平居中（3）</title>
<style>
.child{
display: table;
margin: 0 auto;

height: 200px;
background: green;
color: white;
}
</style>
</head>
<body>
<div class="child">
使用table和margin：0 auto实现水平居中
</div>
</body>
</html>

优点：只需对自身进行设置

缺点：IE6、7不兼容需要调整

方法四： 使用绝对定位实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平居中（4）</title>
<style>
.child{
position: absolute;
left: 50%;

transform: translate(-50%);/*也可使用margin-left设置盒子的一半,不过此时要设置盒子的宽度*/

height: 200px;
background: green;
color: white;
}
</style>
</head>
<body>
<div class="child">
使用绝对定位实现水平居中
</div>
</body>
</html>

缺点：兼容性差，需IE9 及以上可用

* 方法五：* 使用flex 布局实现

1、只设置父元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平居中（5-1）</title>
<style>
.parent{
display: flex;
justify-content: center; /*设置水平方向位置，还有flex-end、flex-start等值*/

}
.child{
height: 200px;
background: green;
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
使用flex 布局实现水平居中
</div>
</div>
</body>
</html>

2、父元素和子元素都需要设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平居中（5-2）</title>
<style>
.parent{
display: flex;
}
.child{
margin: 0 auto;

height: 200px;
background: green;
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
使用flex 布局实现水平居中
</div>
</div>
</body>
</html>

缺点：兼容性差、如果进行大面积的布局可能会影响效率

二、垂直居中

方法一： 使用vertical-align: middle，由于使用它的时候对齐的基线是用行高的基线作为标记，故需要设置line-height和display：table-cell/inline-block

1、设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中（1）</title>
<style>
.parent{
display: table-cell;
vertical-align: middle;
height: 500px;
}
.child{

background: green;
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
使用vertical-align: middle实现垂直居中
</div>
</div>
</body>
</html>

* 方法二：* 使用绝对定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中（2）</title>
<style>
.child{
position: absolute;

top: 50%;
transform: translate(0,-50%);
background: green;
color: white;
}
</style>
</head>
<body>
<div class="child">
使用vertical-align: middle实现垂直居中
</div>

</body>
</html>

方法三： 使用flex实现，用它实现垂直居中的时候需要给父元素一个高度

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中（3）</title>
<style>
html,body,.parent{
height: 100%; //parent的100%高度是根据父元素body>html 的高度设定的，也可以直接设定具体的高度值，不用百分比
}
.parent{
display: flex;
align-items: center; /*定义body的元素垂直居中*/
}

.child{
width: 300px;
height: 300px;
background: green;
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
使用flex实现垂直居中
</div>
</div>

</body>
</html>

三、水平垂直全部居中

方法一：利用绝对定位实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中（1）</title>
<style>

.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: green;
color: white;
}
</style>
</head>
<body>
<div class="child">
使用flex实现水平垂直居中
</div>

</body>
</html>

方法二： 使用flex实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中（2）</title>
<style>
.parent{
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
.child{
background: green;
color: white;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
使用flex实现水平垂直居中
</div>
</div>

</body>
</html>

四、多列布局

情况一： 左列定宽，右列自适应

1、使用float+margin-left实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左列定宽，右列自适应</title>
<style>
.left{
float: left;
width: 200px;
height: 500px;
background: red;
}
.right{
margin-left: 210px;
height: 500px;
background: green;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</body>
</html>

2、使用float+overflow实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左定宽，右自适应（2）</title>
<style>
.left{
width: 200px;
height: 500px;
float: left;
background: red;
}
.right{
overflow: hidden;
height: 500px;
background: green;
}
</style>
</head>
<body>

<div class="left">
定宽
</div>
<div class="right">
自适应
</div>

</body>
</html>

3、使用flex实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左定宽，右自适应（3）</title>
<style>
.parent{
display: flex;
}
.left{
width: 200px;
height: 500px;
background: red;
}
.right{
flex: 1;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>
</div>
</body>
</html>

4、使用table实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左列自适应，右列定宽</title>
<style>
.parent{
display: table;
table-layout: fixed;
width: 100%;
}
.left{
display: table-cell;
width: 200px;
height: 500px;
background: red;
}
.right{
display: table-cell;

background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>

</div>

</body>
</html>

情况二： 右列定宽，左列自适应

1、使用float+margin-right 实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左列自适应，右列定宽</title>
<style>

.left{
float: left;
width: 100%;
height: 500px;
margin-right: -210px;
background: red;
}
.right{
float: right;
width: 200px;
height: 500px;
background: green;
}
</style>
</head>
<body>

<div class="left">
自适应
</div>
<div class="right">
定宽
</div>

</body>
</html>

2、使用flex实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左列自适应，右列定宽（2）</title>
<style>
.parent{
display: flex;
}
.left{
flex: 1;
/*margin-right: 20px;*/
height: 500px;
background: red;
}
.right{
width: 200px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
自适应
</div>
<div class="right">
定宽
</div>

</div>

</body>
</html>

3、使用table实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左列自适应，右列定宽</title>
<style>
.parent{
display: table;
table-layout: fixed;
width: 100%;
}
.left{
display: table-cell;
height: 500px;
background: red;
}
.right{
display: table-cell;
width: 200px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="right">
自适应
</div>

</div>

</body>
</html>

情况三： 两列定宽，一列自适应

1、使用float+margin实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左列自适应，右列定宽（1）</title>
<style>

.left{
width: 200px;
float: left;
background: red;
}
.center{
width: 200px;
float: left;
margin-left: 10px;
background: orangered;
}
.right{
margin-left: 420px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="center">
定宽
</div>
<div class="right">
自适应
</div>

</div>

</body>
</html>

2、使用float+overflow实现

<html>
<head>
<meta charset="UTF-8">
<title>两列定宽，一列自适应（2）</title>
<style>

.left{
width: 200px;
float: left;
background: red;
}
.center{
width: 200px;
float: left;
margin-left: 10px;
background: orangered;
}
.right{
overflow: hidden;
margin-left: 420px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="center">
定宽
</div>
<div class="right">
自适应
</div>

</div>

</body>
</html>

3、使用table实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列定宽，一列自适应</title>
<style>
.parent{
display: table;
table-layout: fixed;
width: 100%;
}
.left{
display: table-cell;
width: 200px;
background: red;
}
.center{
display: table-cell;
width: 200px;
margin-left: 10px;
background: teal;
}
.right{
display: table-cell;
margin-left: 420px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="center">
定宽
</div>
<div class="right">
自适应
</div>

</div>

</body>
</html>

4、使用flex实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列定宽，一列自适应</title>
<style>
.parent{
display: flex;
}
.left{

width: 200px;
background: red;
}
.center{

width: 200px;

background: teal;
}
.right{
flex: 1;

background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="center">
定宽
</div>
<div class="right">
自适应
</div>

</div>

</body>
</html>

情况四： 两侧定宽，中间自适应

1、使用float+margin实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两侧定宽，中间自适应（1）</title>
<style>
.left{
float: left;
width: 200px;
background: red;
}
.center{
float: left;
margin-right: -400px;
width: 100%;
background: teal;
}
.right{
float: right;
width: 200px;
background: green;
}
</style>
</head>
<body>
<div class="left">
定宽
</div>
<div class="center">
自适应
</div>
<div class="right">
定宽
</div>

</body>
</html>

2、使用table实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两侧定宽，中间自适应（2）</title>
<style>
.parent{
display: table;
table-layout: fixed;
width: 100%;
}
.left{
display: table-cell;
width: 200px;
background: red;
}
.center{
display: table-cell;
flex: 1;
background: teal;
}
.right{
display: table-cell;
width: 200px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="center">
自适应
</div>
<div class="right">
定宽
</div>
</div>

</body>
</html>

3、使用flex实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两侧定宽，中间自适应（3）</title>
<style>
.parent{
display: flex;

}
.left{

width: 200px;
background: red;
}
.center{
flex: 1;
background: teal;
}
.right{

width: 200px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
定宽
</div>
<div class="center">
自适应
</div>
<div class="right">
定宽
</div>

</div>

</body>
</html>

情况五： 多列等分布局

1、使用float实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列等分布局（1）</title>
<style>

.column{
float: left;
width: 20%;
margin-left: 10px;
text-align: center;
background: red;
}
</style>
</head>

<body>

<div class="column">
1
</div>
<div class="column">
2
</div>
<div class="column">
3
</div>
<div class="column">
4
</div>

</body>
</html>

2、使用table实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列等分布局（2）</title>
<style>
.parent{
display: table;
table-layout: fixed;
width: 100%;
}
.column{
display: table-cell;
margin-left: 10px;
text-align: center;
background: red;
}
</style>
</head>

<body>
<div class="parent">
<div class="column">
1
</div>
<div class="column">
2
</div>
<div class="column">
3
</div>
<div class="column">
4
</div>
</div>
</body>
</html>

3、使用flex实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列等分布局（3）</title>
<style>
.parent{
display: flex;
}
.column{
flex: 1;
background: red;
}
.column+.column{
margin-left:20px;
}
</style>
</head>

<body>
<div class="parent">
<div class="column">
1
</div>
<div class="column">
2
</div>
<div class="column">
3
</div>
<div class="column">
4
</div>
</div>
</body>
</html>

情况六： 九宫格布局

1、使用flex实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左列自适应，右列定宽</title>
<style>
.parent{
display:flex;
flex-direction:column;
}
.row{
height:100px;
display:flex;
}
.item{
width:100px;
background:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 布局

相关文章推荐

新的分享

章节导航