CSS：元素显示模式

什么是元素显示模式

• 作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
• 元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>
• HTML元素一般分为块级元素与行内元素两种类型

块级元素

• 常见的块级元素有<h1>~<h6>、<p>、<p>、<div>、<ul>、<li>等，其中<div>标签是典型的块级元素
• 块级元素的特点：
  （1） 比较霸道，自己独占一行
  （2） 高度、宽度，外边距以及内边距都可以控制
  （3） 宽度默认是父容器的100%
  （4） 是一个容器及盒子：里面可以放行内元素或者块级元素
• 块级元素注意点： 文字类的块级元素里面不能使用块级元素
  （1） <p>标签是块级元素，但<p>里面主要是放文字的，因此<p>标签里面不能放块级元素，尤其不能放<div>
  （2） 同理<h1>~<h6>标签里面也是不能放置块级元素
  

---

行内元素

• 常见的行内元素有<a>、<strong>、<b>、<em>、<img>、<i>、<del>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素
• 行内元素的特点：
  （1） 相邻行内元素在一行上，一行可以显示多个
  （2） 高、宽直接设置是无效的
  （3） 默认的宽度就是它本身内容的宽度
  （4） 行内元素只能容纳文本或者其他行内元素
• 注意点：
  （1） 链接里面不能再放链接：但是可以放<img>标签
  （2） 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式更安全

---

行内块级元素

• 在行内元素中有几个特殊的标签：<img>、<input>、<td>，它们同时具有块级元素和行内元素的特点：他们是行内块级元素
• 行内块级元素的特点：
  （1） 和相邻的行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个：行内元素的特点
  （2） 默认的宽度就是它本身内容的宽度：行内元素的特点
  （3） 宽度、高度、外边距以及内边距可以控制：块级元素的特点

---

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽高	父容器的100%	可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽高	它本身内容的宽度	容纳文本或其他行内元素
行内块级元素	一行可以放多个行内块级元素	可以设置宽高	它本身内容的宽度

---

元素显示模式转换

• 特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性：比如想要增加链接<a>的触发范围
• 转换为块级元素：display: block;
• 转换为行内元素：display: inline;
• 转换为行内块级元素：display: inline-block;

---

一个小工具的使用snipaste

• snipaste是一个简单单强大的截图工具，也可以让你将截图贴回到屏幕上
• 常用的快捷键
  （1） F1可以截图，同时测量大小，设置箭头，书写文字等
  （2） F3在桌面置顶显示
  （3） 点击图片，按住alt可以取色
  （4） 按下esc取消图片显示

---

单行文字垂直居中：line-height

• 单行文字的水平居中，在CSS中提供了text-align属性来解决
• CSS没有给我们提供文字垂直居中的代码，但是我们可以通过使用一个小技巧来实现
• 解决方案：让文字的行高等于文字所在的盒子的高度，就可以让文字在当前盒子内垂直居中（行高 = 上间距 + 文字高度 + 下间距）
• 原理：文字是在行高尺寸里面垂直居中显示的；行高 = 盒子高度；那么文字不就是在盒子里面垂直居中显示了嘛
• 行高 =盒子高度：文字垂直居中
• 行高 <盒子高度：文字会偏上
• 行高 > 盒子高度：文字会偏下