CSS元素显示模式

■ 关于显示模式

元素显示模式就是元素(标签)以什么方式进行显示

比如<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-block/* 把块元素span转换为行内块元素 */
}

<a href="#">我是行内元素,转换为块元素</a>
<div>我是块级元素，转换为行内元素</div>
<span>行内元素转换为行内块元素</span>

■ 垂直居中

CSS没有提供文字垂直居中的代码，解决方案是让文字的行高等于盒子的高度

原理是，设置行高后，会自动分配相同高度给上间距和下间距

行高的上间距和下间距把文字挤到中间了，如果行高小于盒子的高度，文字会偏上，如果行高大于盒子的高度，则文字偏下

□ 示例

div {
    witdth: 200px;
    height: 100px;
    line-height: 100px;
    background-color: pink;
}

<div>垂直居中</div>