文章目录
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