html重点知识

html将元素分为行内元素、块状元素和行内块元素三种

本篇文章主要讲解这三种元素的含义和相互转换

一、行内元素：

常用的行内元素包括：span、a、img、b、s、em、input、i、label、strong

相邻的行内元素会并排在同一行，直到宽度不足时才会换行。

不要使用行内元素嵌套块状元素

行内元素特征：

1.设置宽高无效，但是有部分元素特别，比如img、input、label等可以设置宽高

2.margin值左右有效，上下无效

3.与其他行内元素并列一行，直到宽度不够才会换行

 

二、块状元素：

常用的块状元素包括：div、h1-h6、p、ul、dl、dt、table、ol

块状元素独占一行，不会与其他元素并列在同一行

块状元素特征：

1.独占一行

2.margin值上下左右都可生效

3.可以嵌套行内元素和块状元素，比如<div><p>123</p></div>

 

三、行内块元素：

行内块元素由行内元素或者块状元素转换生成

行内块元素特征：

1.与其他行内块元素并列一行，直到宽度不够时，自动换行

2.可以嵌套行内元素和块状元素（不推荐把行内元素转换成块状元素再去嵌套块状元素，比如<span><div>567</div></span>）

3.margin值上下左右都可生效

 

四、怎么转换元素类型？

使用css进行转换

这里要介绍一个css属性：display

行内元素默认为：display:inline;

块状元素默认为：display:block;

行内块元素默认为：display:inline-block;

所以转换元素，只要设置对应的display就行了

比如：div {

　　display: inline-block;

}

这样所有的div都是行内块元素了