复习：
#css的引入
1.通过style标签引入css
2.通过行内引入css
3.从外部引入css
ps.三种方式同时存在，渲染方式为行内。
本周：
#块级元素的居中
常见写法：1.margin-left：auto；margin-right：auto；保证左右为auto
2.margin：auto；上下左右全部auto
3. margin: 0 auto；上下为0（可以更改数值设置上下外边距），左右为auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.header {
width: 600px;
height: 200px;
background-color: lightgray;
margin：0 auto；
}
</style>
<body>
<div class="header"></div>
</body>
</html>#行内元素或行内块元素水平居中方式：给其父元素添加text-align: center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.header{
width: 600px;
height: 200px;
background-color: aquamarine;
margin: 0 auto;
text-align: center;
}
</style>
<body>
<div class="header">
<span>hhh</span>
</div>
</body>
</html>#嵌套块元素外边距合并导致的塌陷如何处理
(嵌套块元素垂直外边距的塌陷：对于两个嵌套关系/父子关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大外边距值。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.father{
width: 600px;
height: 600px;
background-color: aquamarine;
margin-top: 50px;
overflow: hidden;
}
.son{
width: 300px;
height: 300px;
background-color: burlywood;
margin-top: 100px;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>ps.浮动，固定，绝对定位的盒子不会有塌陷问题。
#清除浮动
语法：选择器{clear：属性值；}
属性值：left/right：清除左/右侧浮动的影响
both：同时清除左右两侧浮动的影响
策略：闭合浮动=>把浮动的影响限制到父元素里。
方法：1.额外标签法/隔墙法：在最后一个浮动元素的后面添加一个新的空标签（必须是块级元素）
2.父级添加overflow属性：将其属性值设置为hidden,auto,scroll
3.父级添加after伪元素:
4.父级添加双伪元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.father{
overflow: hidden;
width: 800px;
border:1px solid teal;
margin: 0 auto;
}
.one{
float: left;
width: 200px;
height: 200px;
background-color: burlywood;
}
.back{
height: 200px;
background-color: rebeccapurple;
}
.clear{
clear: both;
}
</style>
<body>
<div class="father">
<div class="one">111</div>
<div class="clear"></div>
</div>
<div class="back"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.father{
overflow: hidden;
width: 800px;
border:1px solid teal;
margin: 0 auto;
}
.one{
float: left;
width: 200px;
height: 200px;
background-color: burlywood;
}
.back{
height: 200px;
background-color: rebeccapurple;
}
</style>
<body>
<div class="father">
<div class="one">111</div>
</div>
<div class="back"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
.father{
overflow: hidden;
width: 800px;
border:1px solid teal;
margin: 0 auto;
}
.one{
float: left;
width: 200px;
height: 200px;
background-color: burlywood;
}
.back{
height: 200px;
background-color: rebeccapurple;
}
</style>
<body>
<div class="father clearfix">
<div class="one">111</div>
</div>
<div class="back"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.clearfix:after,
.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:both;
}
.father{
overflow: hidden;
width: 800px;
border:1px solid teal;
margin: 0 auto;
}
.one{
float: left;
width: 200px;
height: 200px;
background-color: burlywood;
}
.back{
height: 200px;
background-color: rebeccapurple;
}
</style>
<body>
<div class="father clearfix">
<div class="one">111</div>
</div>
<div class="back"></div>
</body>
</html>
