七天学会h5和css3之标签显示模式：块级元素，行内元素，行内块元素（24）

 标签显示模式（display）重点

目标：

- 理解
  - 标签的三种显示模式
  - 三种显示模式的特点以及区别
  - 理解三种显示模式的相互转化
- 应用
  - 实现三种显示模式的相互转化

2.1 什么是标签显示模式

- 什么是标签的显示模式？

  标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个

- 作用： 

  我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。

- 标签的类型(分类)

  HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

 2.2 块级元素(block-level)

- 例：

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

<img src="media/12%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0.png">

- 块级元素的特点

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

- 注意：
  - 只有 文字才 能组成段落  因此 p  里面不能放块级元素，特别是 p 不能放div