行内块元素
在行内元素中有几个特殊的标签一<img/>. <input/>. <td> ,它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素的特点:
1、和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
2、默认宽度就是它本身内容的宽度(行内元素特点)。
3、高度、行高、外边距以及内边距都可以控制(块级元素特点)。
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
- 转换为块元素: display:block
- 转换为行内元素: display.inline;
- 转换为行内块: display: inline-block;