CSS属性（二）
1. 元素的默认样式
元素一般都有默认的样式，例如：
1. <a>元素：下划线，字体颜色，鼠标小手。
2. <h1>-<h6>元素：文字加粗、文字大小、上下外边距。
3. <p>元素：上下外边框。
4.<ul>、ol元素：左内边距
5. body元素：8px外边框（4个方向）........
优先级：元素的默认样式>继承的样式。所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。
<div id="d1"><a href="https://www.baidu.com">百度</a><span>你好</span></div><h1>一级标题</h1><h2>二级标题</h2><p>我是一个段落</p><ul><li>张三</li><li>李四</li></ul>#d1{font-size: 50px;color: orange;}a{color:black;text-decoration: none;cursor: default;}2. 布局小技巧
1. 行内元素、行内块元素，可以被父元素当作文本处理。
即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
2. 如何让子元素，在父亲元素中水平居中：
（1）若子元素为块元素，给父元素加上：margin：0 auto
（2）若子元素为行内元素、行内块元素，给父元素加上：text-align：center。
3. 如何让子元素，在父亲元素中垂直居中：
（1）若子元素为块元素，给子元素加上：margin-top，值为：（父元素content-子元素盒子总高）/2。
（2）若子元素为行内元素、行内块元素：
让父元素的height = line-height，每个子元素都加上：vertical-align:middle;。
补充：若想绝对垂直居中，父元素font-size设置为0。
<div class = "outer"><div class = "inner">inner</div></div>.outer{width:400px;height:400px;background-color: gray;overflow: hidden;}.inner{width:200px;height:100px;padding: 5px;border:5px solid red;background-color: orange;margin: 0 auto;margin-top: 140px;text-align: center;line-height: 100px;}
<div class = "outer"><span>出来玩啊？</span></div>.outer{width:400px;height:400px;background-color: gray;text-align: center;line-height: 400px;}span{background-color: orange;font-size:20px;}
<div class="outer"><span>出来玩啊？</span><img src="./src/assets/login.jpg" alt=""></div>.outer{width: 400px;height: 400px;background-color: gray;text-align: center;line-height: 400px;font-size: 0px;}img{vertical-align: middle;width: 100px;height: 100px;}span{font-size: 40px;vertical-align: middle;background-color: orange;}3. 元素之间的空白问题
产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
1. 去掉换行和空格（不推荐）。
2. 给父元素设置font-size:0;，再给需要显示文字的元素，单独设置字体大小（推荐）。
<div><span class="s1">人之初</span><span class="s2">性本善</span><span class="s3">性相近</span></div>div{height: 500px;background-color: gray;font-size: 0px;}.s1{background-color: skyblue;}.s2{background-color: pink;}.s3{background-color: yellow;}span{font-size: 20px;}