一、流体布局
流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值。流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>流体布局</title>
<style>
body{
margin: 0;
}
.con a{
display: block;
width: 25%;
height: 100px;
background-color: tomato;
text-align: center;
text-decoration: none;
font-weight: bolder;
color: white;
line-height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="con">
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
</div>
</body>
</html>
复制代码
示例
如果给 a 标签加了 border,则布局混乱了,有以下两种解决方式:
方式1:calc()
可以通过计算的方式给元素加尺寸,比如:width: calc(25% - 4px);
复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>流体布局</title>
<style>
body{
margin: 0;
}
.con a{
display: block;
width: calc(25% - 4px); /* 看这里 */
height: 100px;
background-color: tomato;
text-align: center;
text-decoration: none;
font-weight: bolder;
color: white;
line-height: 100px;
float: left;
border: 2px solid black; /* 看这里 */
}
</style>
</head>
<body>
<div class="con">
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
</div>
</body>
</html>
复制代码
calc()
方式2:box-sizing 设置为 border-box
- content-box 默认的盒子尺寸计算方式
- border-box 盒子的尺寸计算方式为从边框开始,盒子的尺寸、边框和内填充算在盒子尺寸内
复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>流体布局</title>
<style>
body{
margin: 0;
}
.con a{
display: block;
width: 25%;
height: 100px;
background-color: tomato;
text-align: center;
text-decoration: none;
font-weight: bolder;
color: white;
line-height: 100px;
float: left;
border: 2px solid black; /* 看这里 */
box-sizing: border-box; /* 看这里 */
}
</style>
</head>
<body>
<div class="con">
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
</div>
</body>
</html>
复制代码
box-sizing 设置为 border-box
二、响应式布局
使用媒体查询
复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式布局</title>
<style>
body{
margin: 0;
}
.con div{
width: 23%;
border: 2px solid black;
background-color: tomato;
height: 100px;
margin: 1%;
float: left;
box-sizing: border-box;
text-align: center;
font-weight: bolder;
color: white;
line-height: 100px;
}
@media (max-width: 800px){
.con div{
width: 46%;
margin: 2%;
}
}
@media (max-width: 600px){
.con div{
width: 94%;
margin: 3%;
}
}
</style>
</head>
<body>
<div class="con">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
复制代码
使用媒体查询