图片下间距问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid black ;
line-height:0;
}
/*!*解决对齐方式：*/
/*1：vertical-align:top*!*/
/*img {*/
/*vertical-align: top;*/
/*}*/
/*2：img默认是文字，行高=0 设置到父盒子*/
/*3：字体大小为0，设置在父格子中（会让有效内容消失（文字））*/
</style>
</head>
<body>
<div>
<img src="images/btn.png" alt="">sadsdasdsa
</div>
</body>
</html>图片文字对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
width:40px;
height:40px;
vertical-align: middle;
}
</style>
</head>
<body>
<img src="images/ico1.png" alt="">图片对齐和图片下间隙
</body>
</html>定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1,.box2,.box3,.box4 {
width:200px;
height:200px;
color:white;
font-size:30px;
text-align: center;
line-height: 200px;
}
.box1 {
/*静态--》标准流，毫无用处*/
background-color:orange;
position: static;
left:100px;
top:200px;
}
.box2 {
/*相对于自己的初始位置移动，原始位置依然空着
作用：1.微调元素（作用不大）
2.与绝对定位相关*/
background-color:red ;
position: relative;
left:100px;
top:200px;
}
.box3 {
/*目前为止，以(body左上角?)为参照，层级提高了，不占用原来的位置（脱标了）
绝对定位的盒子会找离他最近的拥有定位属性的盒子的左上角为参照（父亲没有就找爷爷，一直往上找直到有定位属性）
*/
background-color: green;
position: absolute;
left: 100px;
top: 200px;
}
.box4 {
/*以body左上角为参照
在屏幕上的位置固定*/
background-color: blue;
position: fixed;
left:300px;
top:200px;
}
.father {
width:400px;
height:400px;
border:5px black solid;
/*给父亲设置定位属性，就能管控绝对定位的孩子（四字原则：子绝父相）*/
position: relative;
}
/*脱标： 绝对定位（就近有定位的元素）
固定定位（以body为参照）*/
</style>
</head>
<body>
<!--定位：possition：
1.静态定位 static
2.相对定位 relative
3.绝对定位 absolute
4.固定定位 fixed
位置值：x，y就是定位点
right left top bottom right:30px;top:50px;
定位元素在放置时以左上角为参考
-->
</body>
<div class="box1">静态</div>
<div class="box2">相对</div>
<div class="father">
<div class="box3">绝对</div>
</div>
<div class="box4">固定</div>
</html>标准流：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding:0;
margin: 0;
box-sizing: border-box;
}
div {
width:200px;
height:200px;
font:normal 900 50px "微软雅黑";
line-height: 200px;
text-align: center;
color:white;
}
.box1 {
background-color: gold;
}
.box2 {
background-color: green;
}
.box3 {
background-color: aqua;
}
.box4 {
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
</body>
</html>浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding:0;
margin: 0;
box-sizing: border-box;
}
.box1,.box2,.box3,.box4 {
width:200px;
height:200px;
font:normal 900 50px "微软雅黑";
line-height: 200px;
text-align: center;
color:white;
}
/*浮动：
float:left/right/both
在每一个需要并排的盒子身上都设置浮动属性
拥有浮动属性的盒子已经脱离标准流了，*/
.box1 {
background-color: gold;
float:left;
}
.box2 {
background-color: green;
float:left;
}
.box3 {
background-color: aqua;
float:right;
}
.box4 {
background-color: deeppink;
float:right;
}
.father {
border:1px solid black;
}
/*父盒子高度塌陷，因为浮动元素不占父盒子的位置*/
</style>
</head>
<body>
<div class="father">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
</div>
<p style="width:500px;height:400px;background-color: black"></p>
</body>
</html>浮动导致元素显示模式变化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
background-color: chartreuse;
float:left;
/*行内元素一经浮动就已经转换为行内块,不需要再使用display了*/
width:100px;
height:80px;
}
</style>
</head>
<body>
<!--块级元素加浮动后会转化为行内块元素-->
<span>我是span元素01</span>
<span>我是span元素02</span>
<span>我是span元素03</span>
<span>我是span元素04</span>
<span>我是span元素05</span>
</body>
</html>浮动练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding:0;
margin: 0;
box-sizing: border-box;
}
.box1 {
width:1170px;
border:1px black solid;
background-color: #eeeeee;
padding: 30px 50px 30px 50px;
margin:0 auto;
}
.box2 {
width:230px;
height:300px;
background-color: white;
float:left;
margin-right:20px;
border:1px #aaaaaa solid;
}
.box3::before {
width:40px;
height:30px;
line-height: 30px;
margin:0 auto;
content:"新品";
display: block;
color:white;
background-color: chartreuse;
text-align: center;
}
.clearFix::after,.clearFix::before {
content: "";
line-height: 0;
display: block;
clear: both;
}
.p1 {
color: #cccccc;
font-size: 5px;
text-align: center;
}
.p2 {
color: orange;
font-size:20px;
text-align: center;
}
</style>
</head>
<body>
<div class="box1 clearFix">
<div class="box2 box3">
<img src="#" alt="">
<a href="#" class="a1">小米9 6GB+128GB</a>
<p class="p1">骁龙855，索尼4800万超广角微距三摄</p>
<p class="p2">2999元</p>
</div>
<div class="box2 box3"></div>
<div class="box2 box3"></div>
<div class="box2 box3"></div>
</div>
</body>
</html>清除浮动影响：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding:0;
margin: 0;
box-sizing: border-box;
}
.box1,.box2,.box3,.box4 {
width:200px;
height:200px;
font:normal 900 50px "微软雅黑";
line-height: 200px;
text-align: center;
color:white;
}
/*浮动：
float:left/right/both
在每一个需要并排的盒子身上都设置浮动属性
拥有浮动属性的盒子已经脱离标准流了，*/
.box1 {
background-color: gold;
float:left;
}
.box2 {
background-color: green;
float:left;
}
.box3 {
background-color: aqua;
float:right;
}
.box4 {
background-color: deeppink;
float:right;
}
.father {
border:1px solid black;
/*height:200px;*/
overflow: hidden;
}
.clearFix::after,.clearFix::before{
content: "";
line-height: 0;/*行高默认的清除*/
display: block;/*伪元素是行内,需要转换成块级*/
clear:both;
}
/*父盒子高度塌陷，因为浮动元素不占父盒子的位置
1:父元素定高度(管住孩子)
2：overflow：hidden 溢出隐藏 设置在父盒子中
3:clear:right/left/both(直接使用both清除两边的浮动) 结构（块级）+clear：both
（第三种没有实现结构样式相分离）
4.：：after/before隐藏溢出*/
</style>
</head>
<body>
<div class="father clearFix">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<!--<div style="clear:both"></div>-->
</div>
<p style="width:500px;height:400px;background-color: black"></p>
</body>
</html>溢出的隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding:0;
margin:0;
box-sizing: border-box;
}
body{
background-color:#aaaaaa;
}
.box {
width:300px ;
height:500px;
background-color: white;
margin:100px auto
}
/*.tips {*/
/*width:40px;*/
/*height:40px;*/
/*color:#fff;*/
/*background-color: aqua;*/
/*display:block;*/
/*line-height:40px;*/
/*text-align: center;*/
/*margin:0 auto;*/
/*}*/
/*伪元素写法：
插入一个元素在所有元素之后
父元素：：before{
content：'文本内容'；//必须有}
其余属性根据需求写
插入一个元素在所有元素之前
父元素：：after{
content：'文本内容'；//必须有}
其余属性根据需求写*/
.box::before {
content:"新品";
width:70px;
height:40px;
color:#fff;
background-color: aqua;
display:block;
/*伪元素实质上是行内元素，所以需要转换为块级*/
line-height:40px;
text-align: center;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box">
<!--<span class="tips">新品</span>-->
现成的内容
</div>
</body>
</html>
背景属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:600px;
height:600px;
margin:0 auto;
border:5px solid purple;
background:url("images/btn.png") transparent no-repeat center center fixed;
background-size:100% 100%;
}
/*css3 背景尺寸：调整背景大小
background-size:%(盒子的百分之多少) px cover(铺满整个盒子) contain(按盒子宽度铺满，高度按比例缩放)*/
</style>
</head>
<body>
<!--背景属性---》插入大图
背景颜色： background-color
背景图片地址：background-image
背景是否平铺：background-repeat:repeat(默认，平铺) no-repeat(不平铺)
背景图片位置：background-position：x y（可以使px也可以是%） right/bottom....
背景是否附着：滚动条动背景图不动：fixed
滚动条动背景图也动：scroll
-->
</body>
<div class="box">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</html>背景练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding:0;
margin:0;
box-sizing: border-box;
}
.box {
width:60%;
height:2600px;
background: url("images/ms02.jpg") transparent no-repeat fixed center center;
/*fixed 当你设置fixed 以body左上角为参考而不是以父元素*/
background-size:contain;
border:1px black solid;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>