1.flex布局
当使用flex布局的时候涉及到两个东西，容器container和项目items
container：父元素为container，通过给父元素container加样式可以改变其内部items的布局
items：container内的子元素为items
让一个元素变成container的方法：让display：flex就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/css.css">
<title>less01</title>
</head>
<body>
<body>
<div class="menu">
<div class="box">语文</div>
<div class="box">数学</div>
<div class="box">体育</div>
</div>
</body>
<style>
.menu{
display: flex;
}
.box{
flex: 1;
}
</style>
</body>
</html>
2.float布局
1.通过改变子元素的float：left/right值来让元素布局，需要时可以在子元素上加上width
2.当子元素浮动之后会造成父元素塌陷的情况，需要在父元素上加上clearfix：after来清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/css.css">
<title>less01</title>
</head>
<body>
<div class="container">
<div class="box">语文</div>
<div class="box">数学</div>
<div class="box">体育</div>
</div>
</body>
<style>
.container {
width: 100%;
}
.box {
float: left;
width: 33.33%;
}
</style>
</body>
</html>
扫一扫
2302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
