■ 关于显示模式
元素显示模式就是元素(标签)以什么方式进行显示
比如<div>标签独占一行，一行又可以放多个<span>
■ 分类
显示模式分为以下几类：
▶ 块元素
▶ 行内元素
▶ 行内块元素
■ 块元素
常见的块元素有<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等，其中<div>标签是最典型的块元素
□ 特点
块元素有以下特点：
▶ 比较霸道，独占一行
▶ 高度，宽度，内外边距以及内边距都可以控制
▶ 宽度默认是容器(父级宽度)的100%
▶ 是一个容器及盒子，里面可以放行内或者块元素
注意：
▶ 文字类的元素内不能使用块级元素
▶ <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>；同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
■ 行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>标签是最典型的行内元素
有的地方也将行内元素称为内联元素
□ 特点
行内元素有以下特点：
▶ 相邻行内元素在一行上，一行可以显示多个
▶ 高，宽直接设置是无效的
▶ 默认宽度就是它本身内容的宽度
▶ 行内元素只能容纳文本或其他行内元素
注意：
▶ 链接里不能使用链接
▶ 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
■ 行内块元素
在行内元素中有几个特殊的标签，比如<img />，<input />，<td>，它们同时具有块元素和行内元素的特点
有些资料称它们为行内块元素
□ 特点
行内块元素有以下特点：
▶ 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)
▶ 默认宽度就是它本身内容的宽度(行内元素特点)
▶ 高度，行高，外边距以及内边距都可以控制(块级元素特点)
■ 总结
▶ 块级元素
元素排列：一行只能放一个块级元素
设置样式：可以设置宽度高度
默认宽度：容器的100%
包含：容器级可以包含任何标签
▶ 块级元素
元素排列：一行可以放多个行内元素
设置样式：不可以直接设置宽度高度
默认宽度：它本身内容的宽度
包含：容纳文本或其他行内元素
▶ 块级元素
元素排列：一行放多个行内块元素
设置样式：可以设置宽度和高度
默认宽度：它本身内容的宽度
包含：无
■ 元素显示模式转换
特殊情况下，需要元素模式的转换
简单理解：一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围
□ 使用说明
转换为块元素：
display:block;
转换为块元素：
display:inline;
转换为行内块元素：
display:inline-block;
□ 示例
a { width: 100px; height: 50px; background-color: pink; display: block; /* 把行内元素a转换为块级元素 */ } div { width: 100px; /* 警告提示无效，因为行内元素不能设置宽和高 */ height: 50px; /* 警告提示无效，因为行内元素不能设置宽和高 */ background-color: blue; display: inline; /* 把块元素div转换为行内元素 */ } span { width: 100px; height: 50px; background-color: green; display: inline; /* 把块元素span转换为行内块元素 */ }
<a href="#">我是行内元素</a> <div>我是块级元素</div> <span>行内元素转换为行内块元素</span>
■ 垂直居中
CSS没有提供文字垂直居中的代码，解决方案是让文字的行高等于盒子的高度
原理是，设置行高后，会自动分配相同高度给上间距和下间距
行高的上间距和下间距把文字挤到中间了，如果行高小于盒子的高度，文字会偏上，如果行高大于盒子的高度，则文字偏下
□ 示例
div { witdth: 200px; height: 100px; line-height: 100px; background-color: pink; }
<div>垂直居中</div>