css的元素显示模式

1. 什么是元素显示模式

作用：更好的布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己独占一行，一行可以放多个<span>
html元素一般分为块元素和行内元素两种类型

2.块元素

常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、其中 <div> 标签是典型的块元素
块级元素的特点

1. 比较霸道，自己独占一行
2. 高度 宽度，外边距，内边距可以自己控制
3. 宽度不指定的话，默认父级宽度
4. 是一个容器及盒子，里面可以放行内或者块级元素
   注意

• 文字类的元素内不能使用块级元素
• <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
• 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

3.行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素成为内联元素
行内元素的特点：

• 相邻的行内元素，一行可以显示多个
• 宽度和高度设置是无效的
• 默认宽度是本身内容的宽度
• 行内元素只能容纳文本和或其他行内元素
  注意
• 链接里面不能在放链接
• 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

1.行内块元素

在行内元素中有几个特殊的标签——<img/>、<input/>、<td/>,他们同时具有块元素和行内元素的特点有些资料称他们为行内块元素
特点：

• 和相邻行内元素（行内块）在一行，但是他们之间会有空白缝隙。一行可以显示多个（行内元素的特点）
• 默认宽度就是他本身的内容的宽度（行内元素特点）
• 高度，行高，外边距以及内边距都可以控制（块级元素的特点）。

元素显示模式总结图：

元素显示模式转换

特殊情况下我们需要元素模式转换，简单理解就是一个模式的元素需要另一种模式的特性，比如想要增加链接<a>的触发范围

转换为块元素：display：block；
转换为行内元素：display：inline；
转换为行内块元素：display：inline-block；
小技巧
单行文字垂直居中：让文字的行高等于盒子的高度（line-height=hight），就可以让文字在当前盒子内垂直居中
原理
行高=上空隙+文字本身高度+下空隙
简单理解：行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，如果行高小于盒子的高度，文字就会偏上，如果行高大于盒子的高度，则文字就会偏下。