CSS标签的显示模式（display）

CSS标签的显示模式（display）

1. 标签的三种显示模式

   ​ 标签以不同的方式进行显示， 例如 div独占一行， span标签一行可以有很多个。

2. 特点以及区别

3. 理解三种显示模式的相互转换

块级元素（block-level）

例如 h1>h6 p div ul ol li等为块级元素

块级元素的特点

• 独占一行
• 高度、 宽度、 外边距 、以及内边距都可以控制
• 宽度默认是外部容器的100%
• 是一个容器及盒子，里面可以放行内和块级元素。
• 只有文字才能组成段落，p里面不能放块级元素，特别是P不能放div
• 同理，h1 dt等都是文字类块级元素标签，不能放其他块级元素。

行内元素（inline-level）

常见行内元素有 a strong b em i del s ins u span， span是最典型的行内元素或者叫内联元素

• 一行可以显示多个
• 高、宽设置是无效的
• 默认宽度是本身内容的宽度
• 行内元素只能文本或其他行内元素

行内块元素（inline-block）

img input td 可以对他们设置高和对齐属性

• 和相邻行内元素在一行上，一行可以显示多个
• 默认宽度是内容的宽度
• 高度、行高、外边距以及内边距都可以控制

标签显示模式的转换display

/* 块转行内*/
display: inline;
/* 行内转块*/
display:block;
/* 转为行内块*/
display:inline-block;