CSS的元素显示模式以及转换

1.为什么要了解css的元素显示模式？

目的：为了更好的进行布局页面

2.什么是元素的显示模式

元素（标签）以什么方式显示，div自己占一行，span一行多个

3.元素显示模式的分类

HTML 一般分为：

（独立行走）块元素（一行一个、一对一）

例子：<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>   等

特点：1.独自美丽，自己称霸、自己创业

           2.高度、宽度、内边距、外边距都可以控制（参考div标签）

           3.宽度默认为父级的100%4.文字类元素不要放块元素了  h1类也属于文字类元素

           4.块元素是一个容器，可以放行内和块元素（除文字类里不要镶嵌块元素）

 （海纳百川）行内元素（一行多个、一对多）

 例子：<span>、<a>、<i>、

 特点：1.合伙创业  相邻行内元素在一行显示

            2.高宽设置无效果

            3.默认宽度为本身内容的宽度

            4.行内元素只接受行内元素和文本

链接里面不能再放链接 <a>不能放<a>

特殊情况a标签可以放块元素，但是给a转换一下块元素（最安全）

特殊 行内块元素（你中有我 我中有你）

   在行内元素中，有几个特殊的学生。

同时具有块元素和行内元素的特点

1.高度、行高、外边距、内边距都可以设置（块元素特点）

2.默认宽度是内容的宽度（行内元素特点）

3.和相邻行内块元素在一行上，之间会有空隙，一行多个（一对多）（行内块元素）。

例子：<img>  <input> <td>

4.元素显示模式的转换

要求：增加a标签的触发范围

已知：a标签为行内块元素，不能设置高宽度

方法：元素模式转换 

行内块转换成块元素

display:block;

 

块元素转换成行内元素

例子：display:inline;

 

 行内/块元素转换成行内块元素

display：inline-block;

display-转换：模式