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;