h5笔记

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，这样就不需要依赖父元素的高度

推荐阅读更多精彩内容