HTML各元素与块级元素怎么转换

HTML各元素与块级元素怎么转换

资源外星人导读:本站为大家带来HTML各元素与块级元素怎么转换文章,更多建站技术,请继续关注资源外星人!

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

一. 行内元素

1. 不能设置宽高

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

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

2. 在一行中显示,不能独立成块;

3. 空行或者换行,会多出一个空格;

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

a. 设置为block

display: block;

b. 设置为浮动

float: left; 或者 float: right;

5. 特殊情况:

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

display: block;

二. 块级元素

1. 支持宽高的设置

a. 像素px单位,固定布局;

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

2. 不设置宽高

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

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

3.  独立成行

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

设置为inline

display: inline;

以上就是资源外星人整理的HTML各元素与块级元素怎么转换全部内容,希望对大家有所帮助!