css的元素显示模式
一.什么是元素显示模式
作用：网页的标签非常多，不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个
<span>。
html元素可以分为块元素和行内元素。
二.块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素。
特点
- 自己独占一行
- 高度、宽度、外边距以及内边距都可以控制。
- 宽度默认是容器(父级宽度)的百分百。
- 是一个容器以及盒子，里面可以放行内或者块级元素。
2.1独占一行
2.2设置高度宽度
2.3宽度默认
当你没有设置宽度时，宽度默认与父级容器这里就是body一样大，所以占满整个屏幕。
2.4可以放行内元素也可以是块元素
块元素是一个大的盒子，里面可以装其他元素
注意
- 文字类的元素内不能使用块级元素
- <p>标签主要用于存放文字，因此<p>里面 不能放块级元素，特别是不能放<div>
- 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
例子
看着没啥问题，但是打开检查一看就出现了问题
三.行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<span>等，其中<span>标签是最具典型的行内元素，有的地方也将行内元素称为内联元素。
3.1相邻行内元素在一行
3.2高宽直接无效
3.3默认宽度就是它本身内容的宽度
3.4行内元素只能容纳文本或其他行内元素
注意
- 链接里面不能再放链接
- 特殊情况链接<a>里面可以放块级元素，但是<a>转换一下块级模式最安全
四.行内块元素
在行元素内有几个特殊的标签——<img>、<input>、<td>,他们同时具有块元素和行内元素的特点，有些资料称为行内块元素
1.和相邻元素在一行但有空隙(行内元素特点)
2.默认宽度就是它本身内容的宽度(行内元素特点)
3.高度，行高，外边距以及内边距可控制(块级元素特点)
五.元素显示模式的转换
5.1转换为块元素
特殊情况下，我们需要元素模式的转换，简单理解:一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围。
- 转换为块元素：display:block；
由于我们知道a链接是行内元素，但有时候想要增加用户的点击范围就需要block。
他便具有了块级元素的特点。
此时便可以给他设置宽高
5.2转换为行内元素
display: inline
例子
转换
