CSS布局套路
2020-12-02 本文已影响0人
我是Msorry
原则
1.不到万不得已，不要写死 width 和 height 成固定数值
2.如果支持 IE8，就用 Float 布局，固定 width
Float 布局
1. 给子元素加上 float:left
2. 作为布局的子元素上不写内容，内容在后代元素上写
3. 给父元素加上 .clearfix
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.parent{
border:1px solid black;
margin-left: auto;
margin-right: auto;
min-width:600px;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.clearfix{
zoom:1;
}/*IE6*/
.navItem{
float:right;
margin-left:20px
}
.logo{
height:36px;
width:100px;
background: #333;
color:white;
line-height:36px;
text-align:center;
}
.nav{
line-height:24px;
padding:6px 0;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div style="float:left">
<div class="logo">logo</div>
</div>
<div style="float:right" class="nav clearfix">
<div class="navItem">导航1</div>
<div class="navItem">导航2</div>
<div class="navItem">导航3</div>
<div class="navItem">导航4</div>
<div class="navItem">导航5</div>
</div>
</div>
</body>
</html>
Float 布局设置间距
在内容子元素上设置外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.parent{
margin-left: auto;
margin-right: auto;
min-width:600px;
background: #ddd;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.clearfix{
zoom:1;
}/*IE6*/
.art{
width:600px;
background: #f60;
margin:auto;
}
.art >.sider{
float:left;
width:33.333333%;
}
.art >.main{
float:left;
width:66.666666%;
}
.sider >.siderContent{
height:300px;
border:1px solid black;
margin-right:20px;
}
.main >.mainContent{
height:300px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="art clearfix">
<div class="sider">
<div class="siderContent">广告1</div>
</div>
<div class="main">
<div class="mainContent">广告2</div>
</div>
</div>
</body>
</html>
在布局子元素上设置 calc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.parent{
margin-left: auto;
margin-right: auto;
min-width:600px;
background: #ddd;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.clearfix{
zoom:1;
}/*IE6*/
.art{
width:600px;
background: #f60;
margin:auto;
}
.art >.sider{
float:left;
width:calc(33.333333% - 20px); /*关键*/
margin-right:20px; /*关键*/
}
.art >.main{
float:left;
width:66.666666%;
}
.sider >.siderContent{
height:300px;
border:1px solid black;
}
.main >.mainContent{
height:300px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="art clearfix">
<div class="sider">
<div class="siderContent">广告1</div>
</div>
<div class="main">
<div class="mainContent">广告2</div>
</div>
</div>
</body>
</html>
平均布局
Float 平均布局
根据子元素的数量关系消除左右两边的margin，这种做法 IE 不支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.clearfix{
zoom:1;
}/*IE6*/
.banner{
width:600px;
height:400px;
background: #888;
margin:auto;
margin-top:10px;
}
.pictures{
width:600px;
margin:auto;
}
.picture{
float:left;
width:144px;
height:144px;
background: red;
margin:4px;
}
.picture:nth-child(4n+1){
margin-left:0
}
.picture:nth-child(4n){
margin-right:0
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="pictures clearfix">
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
</div>
</body>
</html>
兼容 IE 的做法是加元素包裹子元素，在包裹层加负margin，原来的父元素作布局元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.clearfix{
zoom:1;
}/*IE6*/
.banner{
width:600px;
height:400px;
background: #888;
margin:auto;
margin-top:10px;
}
.pictures{
width:600px;
margin:auto;
}
.picture{
float:left;
width:144px;
height:144px;
background: red;
margin:4px;
}
.pictureWrapper{
margin-left:-4px;
margin-right:-4px;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="pictures ">
<div class="pictureWrapper clearfix">
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
</div>
</div>
</body>
</html>
Flex 平均布局
当用
justify-content:space-between;属性做平均布局时，不同行的元素个数不一致会出现 bug，从下面的例子可以看到
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.clearfix{
zoom:1;
}/*IE6*/
.banner{
width:600px;
height:400px;
background: #888;
margin:auto;
margin-top:10px;
}
.pictures{
width:600px;
margin:auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.picture{
float:left;
width:144px;
height:144px;
background: red;
margin-top:4px;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="pictures ">
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
</div>
</div>
</body>
</html>
image.png
使用负margin 消除 bug
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.clearfix{
zoom:1;
}/*IE6*/
.banner{
width:600px;
height:400px;
background: #888;
margin:auto;
margin-top:10px;
}
.pictures{
width:600px;
margin:auto;
}
.picture{
float:left;
width:calc(25% - 8px); /*关键*/
height:144px;
background: red;
margin-top:4px;
margin:4px; /*关键*/
}
.pictureWrapper{
display:flex;
flex-wrap:wrap;
margin:0 -4px; /*关键*/
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="pictures ">
<div class="pictureWrapper">
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
</div>
</div>
</div>
</body>
</html>
