CSS元素显示模式

CSS元素显示模式

定义：元素显示模式是指元素（即标签）以什么方式进行显示。
HTML元素分为块元素和行内元素

块元素

常见块元素

（下列仅举出部分）

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

其中<div> 是最典型的块元素。

块元素的特点

（1）块元素独占一行
（2）块元素的高度、宽度、外边距以及内边距都可以控制
（3）块元素宽度默认是容器（父级盒子）的100%
（4）块元素是一个容器及盒子，其中可以再放行内或者块级元素

块元素注意点

文字类的元素内不可使用块级元素
如<p> 标签，该标签使用存放文字的，因此不可存放块级元素，尤其注意不能放<div>；同理，<h1>~<h6>中不能存放块级元素

行内元素（也称内联元素）

常见行内元素

常见行内元素有

<a>、<strong>、<b>、<em>、<I>、<del>、<s>、<ins>、<u>、<span>

其中，<span>为最典型的行内元素

行内元素的特点

（1）一行可放多个行内元素，即相邻行内元素在一行
（2）对行内元素的高、宽直接设置是无效的
（3）行内元素的默认宽度为其所含内容的宽度
（4）行内元素中只能容纳文本或者行内元素

块元素注意点

（1）链接标签<a>中不能再放链接
（2）<a>中是允许放块级元素的（但最好将其转化为块级模式）

*行内块元素

行内块元素为特殊块元素，特殊的行内元素。行内块元素同时具有块元素和行内元素的特点。

常见行内块元素有：

<img/>、<input/>、<td>

行内块元素特点

（1）【行内元素特点】和相邻行内元素在一行上，但是元素之间会有空隙
（2）【行内元素特点】，默认宽度为该元素本身内容的宽度
（3）【块级元素特点】高度、宽度、外边距以及内边距都可以控制

元素模式分类及特点总结

元素显示模式转换

当一个模式的元素需要另一种模式的特性时，进行模式转换

eg1：增加链接<a>的触发范围（<a>为行内元素，所占大小为其内容大小，但是想要扩大这个范围），因此将该元素转化为块元素，以设置宽度和高度。
方法：在样式中输入

display: block; //将元素转化为块级元素

eg2：将元素转化为行内元素

display: inline; //将元素转化为行内元素

eg3:将元素转化为行内块元素

display: inline-block; //将元素转化为行内元素