css的元素显示模式

作用：元素（标签）以什么方式进行显示，使布局更加整洁

分类：块元素，行内元素

<div>一行只能放一个（块），<span>一行可以放多个（行内）

1.块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<u|>、<ol>、<li>等，其中<div>标签是最典型的块元素
块级元素的特点:
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。

div{

            width: 200px;

            height: 200px;

            background-color: pink;

        }

③宽度默认是容器(父级宽度)的100%。
④是一个容器及盒子，里面可以放行内或者块级元素。

注意：文字类块级元素里放文字，不能放块元素，如<p>里不能放<div>

2.行内元素

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

3.行内块元素

在行内元素中有几个特殊的标签--<img />、<input />、<td>它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素,
行内块元素的特点
① 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
②默认宽度就是它本身内容的宽度(行内元素特点)。
③ 高度，行高、外边距以及内边距都可以控制(块级元素特点)

4.元素显示模式转换

一个模式的元素转化为另一种模式的元素

比如：给<a>增加宽和高，a本身为行内元素，不可以设置，但需要，所以要转化为块元素

 /* 把行内元素a转化为块级元素 */

            display: block;//块

* 把div块级元素转化为行内元素 */

            display: inline;//一行

行内元素转化为行内块元素

            display: inline-block;//行内块

在<style>中写

5.小技巧-------单行文字垂直居中

文字的行高等于盒子的高度

 line-height: 40px;//行高