元素类型
- 行级元素(display: inline)
- 排列特性:可以和其他标签在同一行排列,一排无法放下的元素将在下一行开始排列
- 宽高特性:不支持设置宽高、宽高均由内容撑开。
- 边距特性:左右外边距生效,上下外边距不生效。上下内可以设置生效,但是无法作用于其他元素
- 换行间距:标签之间的换行会被解析为空格
- 常见的行级标签:<a>、<span>、<strong>、<em>、<i>、<b>、伪类元素....
- 块级元素(display: block)
- 排列特性:单独占据一行的位置
- 宽高特性:可以设置宽高,高度由内容或者字体行高撑开,宽度默认为父级元素100%(定位元素除外)
- 边距特性:支持设置内外边距,并且正常生效
- 常见的行级标签:<div>、<p>、<ul>、<li>、<h>、<dl>、<dt>、<dd>....
- 行块级元素(display: inline-block)
- 排列特性:可以和其他标签在同一行排列,一排无法放下的元素将在下一行开始排列
- 宽高特性:可以设置宽高,宽高均默认由内容或者字体行高撑开
- 边距特性:支持设置内外边距,并且正常生效
- 换行间距:标签之间的换行会被解析为空格
- 对其方式:行块元素的位置会受到text-align文本对其方式的影响
- 常见的行级标签:<img>、<input>、<select>....
注释:
文本对齐方式:text-align: [left(默认), right, center]
最常用就是让img图片居中对齐,注意:要给父级这个属性