【前端面试之HTML】行内元素和块级元素

1、元素类型的定义

1-1、行内元素

行内元素主要是指strong或span之类的元素，该元素不会在元素之前或者元素之后生成“行分隔符”；
行内元素会水平排列成一行；
行内元素又分为置换元素和非置换元素；

1-2、 块级元素

块级元素主要是指div或者标题之类的元素，这些元素独占一行，多个块级元素在正常流中垂直排列。

1-3、空元素

没有闭合标签的元素，常见的有img、hr、br、input、link、meta等；
给空元素设置闭合标签是无效的

2、元素分类

行内置换元素：img、input、textarea、select
行内非置换元素：a、span、em、i、strong、b、label、sub、sup
块级元素：div dl dd dt h1~h6 header footer form ul ol li hr p table

3、二者的区别

1> 行内元素水平排列；块级元素垂直排列
2> 行内元素不支持width和height属性，它的width属性是由其内容撑开的；而块级元素可以设置width和height属性；
3> 块级元素可以包含行内元素和块级元素；但是行内元素不能包含块级元素，只能包含行内元素和文本内容；
4>块级元素可以设置margin属性和padding属性；行内元素也可以设置margin属性和padding属性，对于行内非置换元素只有水平方向生效，即left值和right值生效，但是垂直方向的margin值不生效；padding值生效。

4、行内元素和块级元素的转换

块级元素和内联元素可以通过`display`属性来转换：

1>将一个块级元素的display属性设置为inline，块级元素就被转换成了内联元素；
2> 将一个内联元素的display属性设置为block，内联元素就被转换成了块级元素；
3> 将元素的display属性的值设置为inline-block，也可以为元素设置宽高值；但是该值不支持IE6/7