HTML元素

元素类型

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

注释：
文本对齐方式：text-align: [left(默认), right, center]
最常用就是让img图片居中对齐，注意：要给父级这个属性