CSS 元素显示模式
元素显示模式,是指元素以什么方式进行显示,比如 <div>
独占一行,而一行可以放多个<span>
.
HTML 的标签有很多,根据元素显示模式,一般分为块元素
和行内元素
两种。
1、块元素
常见的块元素有:<h1> ~ <h6>、<p>、<div>
、<ul>、<ol>、<li>等,特点为:
- 霸道,独占一行
- 高度、宽度、外边距及内边距可以控制
- 宽度默认是父级宽度的 100%
- 是一个容器及盒子,里面可以放行内元素或块元素
注意:文字类的元素内不能使用块级元素,比如 <p> 标签中不能放 <div>
2、行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<span>
等,特点为:
- 相邻的行内元素在同一行上,一行可以显示多个
- 高度、宽度直接设置是无效的
- 默认宽度为元素本身内容的宽度
- 行内元素里面只能包含文本或者其他行内元素
注意:<a> 标签里面不能再放 <a> 标签,特殊情况 <a> 里面可以放块级元素
3、行内块元素
在行内元素中有几个特殊的标签:<img/>、<input/>、<td>,它们同时具有块元素和行内元素的特点
,有人称之为行内块元素
,特点是:
- 和相邻的行内元素在同一行上,但是它们之间会有空白缝隙,一行可以显示多个(行内元素特点)
- 默认宽度就是它们本身内容的宽度(行内元素特点)
- 高度、宽度、外边距及内边距可以控制(块元素特点)
4、元素显示模式转换
特殊情况下,我们需要对元素模式进行转换
/*转换为块元素*/
display: block;
/*转换为行内元素*/
display: inline;
/*转换为行内块元素*/
display: inline-block;
转载自:https://segmentfault.com/a/1190000041970528