margin:auto 水平居中只对block有效，对inline和inline-block都无效
text-align:center 内容居中对block和inline-block有效，对inline无效
水平内外边距对inline，inline-block，block元素都有效，垂直内外边距只对block和inline-block有效
内联元素使用clear没有效果，clear只支持块元素
内联元素本身可以float
5.块级元素，postion定义为absolute，没有定义偏移，它所在的位置也会被后面的元素覆盖
块级元素，postion定义为absolute，它的实际宽度会由内容决定（类似inline，但是其他属性，比如换行，可定义宽高跟 block元素一样）(块级浮动元素也是这样)
内联元素也可以定义postion为absolute，此时内联元素可以定义宽高
下例中，第一个span定义宽度有效，第二个span定义的宽度无效，两个span会重叠
<body>
<div>It works!</div>
<span style="position: absolute;width: 300px;">fdafsdf</span>
<span style="width: 300px;">111111</span>
</body>
6.span设置行高，并不会使span的高度变化，但是span里的内容所占高度会变成设置的行高
<body>
<span style="background-color: red;line-height: 200px;">test1</span>
<hr>
<span style="background-color: red;line-height: 200px;">test2</span>
</body>
上例中span的红色区域高度不会随着行高变高
但是行间距会是200px
- 垂直对齐(vertical-align)对block元素无效，只对inline和inline-block有效
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式（内容可以是block元素）
8.line-height要对父元素设置，才能让自己垂直居中
这样可以让img垂直居中（height要不要都无所谓）
<div style="height: 200px; line-height: 200px;">
<img src="./src/assets/billicon.png">
</div>
这样不可以，对img的设置，会让img里面的元素垂直居中，但是img里面不能放元素，所以等于没用：
<div>
<img src="./src/assets/billicon.png" style="line-height: 200px;">
</div>
这样可以，文字是span里面的东西：
<span style="line-height: 200px;"> fdsaf</span>
img放到span里面也可以，img是span里面的东西：
<span style="line-height: 200px;">
<img src="./src/assets/billicon.png">
</span>
实现以下效果：
图标和文字组成的子div在粉色的父div中垂直居中：
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row" style="background-color: pink">
<div class="col-xs-6" style="line-height: 100px">
<img src="./src/assets/billicon.png" width="50px" height="50px">
<span>我的账单</span>
</div>
<div class="col-xs-6" style="line-height: 100px">
<img src="./src/assets/usershare.png" width="50px" height="50px">
<span>点赞分享</span>
</div>
</div>
</div>
</body>
</html>
由于css的继承性，line-height也可以设置在row上面，这样两个col都继承了row的行高
10.利用line-height只能让inline元素垂直居中（img是特殊的inline元素），并不能让设置了line-height的元素的block或inline-block子元素垂直居中，比如以下代码不能实现垂直居中：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div style="width:200px;height:200px;border:solid blue; line-height: 200px;">
<div style="width:100px;height:100px;margin: auto; background: red;">
</div>
</div>
</html>
- div如果要里面的内联元素全屏垂直居中 line-height设置为100vh，这样就不需要依赖父元素的高度
