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

2019年1月4日10:30:52 发表评论 723

May一看到代码就会特别头疼,所以一直在学习代码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;

 

 

  • 支付宝扫码赞助
  • weinxin
  • 微信扫码赞助
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: