1.块元素
常见的块元素有
<h1>~<h6>
、<p>
、<div>
、<ul>
、<ol>
、<li>
等,其中<div>
标签是最典型的块元素
- 块级元素的特点:
①独占一行
②高度,宽度,外边距以及内边距都可以控制
③宽度默认是容器(父级宽度)的100%
④是一个容器及盒子,里面可以放行内或块级元素 - 注意:
只有文字才能组成段落,因此p标签里面不能放块级元素,特别是p不能放div。同理,还有h1
~h6
,dt
,它们都是文字类块级标签,里面不能放其他块级元素
2.行内元素
常见的行内元素有
<a>
、<strong>
、<b>
、<em>
、<i>
、<del>
、<s>
、<ins>
、<u>
、<span>
等
-
行内元素的特点:
①相邻行内元素在一行上,一行可以显示多个
②高度、宽度直接设置是无效的
③默认高度就是它本身内容的宽度
④行内元素只能容纳文本或其他行内元素 -
注意:
①链接里面不能再放链接
②特殊情况链接<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全
3.行内块元素
在行内元素中有几个特殊的标签——
<img>
、<input >
、<td>
,可以对它们设置宽高和对齐属性
- 行内块元素的特点
①和相邻行内元素(行内块)在一行上,但是之间会有空白风险,一行可以显示多个
②默认宽度就是它本身内容的宽度
③高度,行高,外边距以及内边距都可以控制
4.三种模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
5.三种模式的转换
- 转换为块元素:
display:block
- 转换为行内元素:
display:inline
- 转换为行内块元素:
display:inline-block