什么是元素的显示模式
网页中的标签很多，在不同的地方使用不同类型的标签。
元素显示模式就是标签以什么方式进行显示。如：div自己占一行，span一行可以放多个。
HTML元素一般分为块元素和行内元素两种类型。
块元素
常见的块元素有：
<h1>~<h5>, <p>, <div>, <ul>, <ol>, <li>
其中div是最典型的块元素。
块元素的特点：
1.比较霸道，独占一行
2.宽度，高度，内边距，外边距都可以设置。
3.宽度默认是容器（父级容器）的100%
4.一个容器及盒子，里面可以放行内或块级元素。
注意：
1.文字类的元素内不能使用块级元素。p标签主要用于存放文字，因此p里面不能放块级元素，比如div
2.同理h1-h5等都是文字类元素，里面不能放其他块级元素。
行内元素
常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
其中span标签是最经典的行内元素。
行内元素的特点：
1.相邻行内元素在一行上，一行可以显示多个。
2.宽，高设置无效。
3.默认宽度是它内容本身的宽度。
4.行内元素只能容纳文本及其他行内元素。
注意：
1.链接里面不能再放链接
2.a标签里面可以放块级元素。
行内块元素
在行内元素中有几个特殊的标签:
<img/>、<input/>、<td>
它们既又行内元素的特点，又有块元素的特点。也被称为行内块元素。
行内块元素的特点：
1.多个行内块元素可以放置在一行，它们之间用空格分隔，一行可以显示多个（行内元素特点）。
2.默认宽度是它内容本身的宽度（行内元素特点）。
3.宽度，高度，内边距，外边距都可以设置（块元素特点）。
元素显示模式转换
特殊情况下我们需要元素的模式转换，简单理解是一个模式的元素想要另一个模式元素的特性。
比如：想要增加a的触发范围。
显示模式转换声明：
display: block; display: inline; display: inline-block;
<style>
/* 行内转块级 */
span {
width: 200px;
height: 60px;
display: block;
background-color: antiquewhite;
}
/* 块级转行内 */
div {
background-color: lightblue;
display: inline;
}
/* 行内转行内块级元素 */
strong {
background-color: aquamarine;
display: inline-block;
width: 200px;
height: 60px;
}
</style>
<body>
<span>我是行内内容1</span><span>我是行内内容2</span>
<div>我是块级标签内容1</div>
<div>我是块级标签内容2</div>
<strong>我是行内内容3</strong><strong>我是行内内容4</strong>
</body>
CSS字体设置
设置字体：字体系列，大小，粗细，文字样式（如斜体）
/* 设置字体：字体系列，大小，粗细，文字样式（如斜体） */
h2 {
/* 字体带空格则使用引号包起来，字体可以设置多个，按照使用优先级从左到右排列，如果都匹配不到则使用浏览器默认字体。 */
font-family: 'Macrosoft YaHei', 'Times New Roman', Times, serif;
font-size: 20px;
/* 文字加粗：font-weight:normal 和 bold 分别对应 400和700 */
/* font-weight: normal; */
font-weight: 400;
/* font-style: italic 字体设置斜体的不多，更多的是把斜体设置成标准字体，如（em, i） */
font-style: normal;
/* font复合属性，简写节省代码，顺序不能随意改变，其中字号，字体必须同时出现 */
/* font: font-style font-weight font-size/line-height font-family; */
}
CSS文本属性
文本属性是用来定义文本的外观的，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。
/* 文本设置可以定义文本的外观，如文本的颜色，对齐文本，装饰文本，文本缩进，行间距 */
.article {
/* 颜色设置有3种，red,green等名词。 十六进制#FF6600。 RGB代码rgb(155,2,2)/rgb(100%,1%,1%) */
color: red;
/* 文本的水平偏移，默认p标签占据一行，这里的偏移指的是内容的偏移 */
text-align: center;
/* 文字装饰器，在文字的上面，下面，中级划线, 无下划线(a标签)，对应overline, underline, line-through, none */
text-decoration: line-through;
/* 首行缩进， 通常使用2em 代替 20px, em表示一个文字大小的距离 */
text-indent: 20px;
/* 行间距由一行的上间距+文本高度+下间距组成 */
line-height: 26px;
}
单行文本垂直居中的方法
行高 = 盒子高度
<style>
a {
display: block;
width: 180px;
background-color: dimgray;
text-decoration: none;
color: #fff;
text-indent: 2em;
/* 行高 = 盒子高度 */
height: 50px;
line-height: 50px;
}
a:hover {
background-color: brown;
}
</style>
