HTML行内元素与块级元素的特点及相互转换

一看到代码就会特别头疼，所以一直在学习代码SEO资源相关知识，以下为个人总结。

一. 行内元素

1. 不能设置宽高

a. 宽度与子级中的内容一样宽；

b. 高度与子级中的内容一样高；

2. 在一行中显示，不能独立成块；

3. 空行或者换行，会多出一个空格；

4. 行内元素转为块级元素：

a. 设置为block

1. display: block;

b. 设置为浮动

1. float: left; 或者 float: right;

5. 特殊情况：

img标签支持宽高的设置，但不能单独为一行；img标签默认情况下下方会出现1像素的空行，解决办法是给img添加CSS

1. display: block;

二. 块级元素

1. 支持宽高的设置

a. 像素px单位，固定布局；

b. 百分比%单位，响应式布局。

2. 不设置宽高

a. 宽度继承直接父级的宽度；

b. 高度由子级的内容撑开。

3.  独立成行

4. 块级元素转为行内元素

设置为inline

1. display: inline;