html+css常见布局实现方法
前言
这是一篇关于html+css布局的总结博文,这些布局在日常开发中非常常见。本文提供的方法只是其中一种,现实中解决问题的办法往往不止一种,且需要具体问题具体分析。
本文主要讲述的布局
1.字体居中:水平居中、垂直居中;
2.多个div元素水平分布;
3.单个div元素居中:水平居中、垂直居中;
背景是以上所有情况外面都套着一层div,如下:
1.情况一:
<div>
一段文字
</div>
2.情况二:
<div>
<div></div>
<div></div>
<div></div>
</div>
3.情况三:
<div>
<div></div>
</div>
字体居中
1.水平居中
重要css代码(代码放的位置请看实例,不一定全部放一起,这里不再详细区分):
text-align: center;
实例:
<!DOCTYPE html>
<html>
<head>
<title>布局总结</title>
</head>
<style>
body {
background-color: rgb(30, 30, 30);
color: white;
}
.title {
text-align: center;
}
</style>
<body>
<h1 class="title">布局总结</h1>
</body>
</html>
效果:
2.垂直居中
重要css代码:
line-height: 400px;
justify-content: center;
要注意的是,line-height的高度要跟元素div的高度保持一致。
实例:
<!DOCTYPE html>
<html>
<head>
<title>布局总结</title>
</head>
<style>
body {
background-color: rgb(30, 30, 30);
color: white;
}
div {
width: 400px;
height: 400px;
background-color: white;
border-radius: 5px;
margin: 0 auto;
line-height: 400px;
justify-content: center;
color: rgb(30, 30, 30);
font-size: 24px;
}
</style>
<body>
<div>
布局总结
</div>
</body>
</html>
效果:
如果想让字体垂直、水平居中,当然把以上两部分的代码结合起来就行
实例:
<!DOCTYPE html>
<html>
<head>
<title>布局总结</title>
</head>
<style>
body {
background-color: rgb(30, 30, 30);
color: white;
}
div {
width: 400px;
height: 400px;
background-color: white;
border-radius: 5px;
margin: 0 auto;
line-height: 400px;
justify-content: center;
color: rgb(30, 30, 30);
font-size: 24px;
text-align: center;
}
</style>
<body>
<div>
布局总结
</div>
</body>
</html>
效果:
多个div水平分布
重要css代码:
display: flex;
justify-content: space-around;
flex是一个异常强大的布局,这个工具能使同级的元素按照特定样式实现快速布局,如 以上的第二行代码,使得3个元素等分剩余空间,使得他们能够分布在屏幕中间并且间隔相等。
推荐学习链接:Flex 布局教程:语法篇 - 阮一峰
实例:
<!DOCTYPE html>
<html>
<head>
<title>布局总结</title>
</head>
<style>
body {
background-color: rgb(30, 30, 30);
color: white;
}
.layout {
display: flex;
justify-content: space-around;
}
.layout-item {
width: 200px;
height: 200px;
color: rgb(30, 30, 30);
border-radius: 10px;
text-align: center;
line-height: 200px;
justify-content: middle;
background-color: white;
}
</style>
<body>
<div class="layout">
<div class="layout-item">
布局1
</div>
<div class="layout-item">
布局2
</div>
<div class="layout-item">
布局3
</div>
</div>
</body>
</html>
效果:
单个div居中
1.水平居中
重要css代码:
margin: 0 auto;
margin: 0 auto; 第一个参数设置元素到父级元素上下外边距的距离,其中0代表上下外边距都为0,第二个参数设置元素到父元素左右外边距的距离,其中auto代表左右自动等分剩余空间,既然是等分剩余空间,当然是会使得元素基于父元素水平居中了。可能有人会想把0设置成auto,就能使得元素基于父元素垂直居中,事实上,这个方法行不通,在此背景下,无论把第一个参数设置成什么值,样式都不会有任何变化。
实例:
<!DOCTYPE html>
<html>
<head>
<title>布局总结</title>
</head>
<style>
body {
background-color: rgb(30, 30, 30);
color: white;
}
.layout {
width: 800px;
height: 800px;
background-color: white;
border-radius: 10px;
margin: 50px auto;
}
.layout-item {
width: 200px;
height: 200px;
background-color: rgb(30, 30, 30);
border-radius: 10px;
text-align: center;
line-height: 200px;
justify-content: middle;
color: white;
margin: 0 auto;
}
</style>
<body>
<div class="layout">
<div class="layout-item">
布局
</div>
</div>
</body>
</html>
效果:
2.垂直居中
重要css代码:
display: flex;
align-items: center;
align-items: center;意思是将flex布局下的所有元素垂直居中。网上会提供更多的方法,其中比较多人提到的是利用绝对定位和相对定位来使得元素居中,那种方法会更加灵活,但如果只是简单想要使得元素居中,本文提供的方法更为简洁一些。
实例:
<!DOCTYPE html>
<html>
<head>
<title>布局总结</title>
</head>
<style>
body {
background-color: rgb(30, 30, 30);
color: white;
}
.layout {
width: 800px;
height: 800px;
background-color: white;
border-radius: 10px;
margin: 0 auto;
display: flex;
align-items: center;
}
.layout-item {
width: 200px;
height: 200px;
background-color: rgb(30, 30, 30);
border-radius: 10px;
text-align: center;
line-height: 200px;
justify-content: middle;
color: white;
margin: 0 auto;
}
</style>
<body>
<div class="layout">
<div class="layout-item">
布局
</div>
</div>
</body>
</html>
效果: