块级元素和行内元素的区别

在前几天的面试的过程中，问了行内元素和块级元素的区别，并居中一些，当时只回答了部分，今天总结下这一部分的内容。

1、块级元素：block

每个块级元素默认占一行高度，一行内添加的块级元素一般无法添加其他元素，两个连续的块级元素会自动换行显示。块级元素一般可以嵌套块级元素和行内元素。

块级元素一般作为一个容器出现，用来组织结构，但不是全是如此，有些块级元素，如<form>只能包含包含块级元素。

div是常见的块级元素，display:block;的元素都是块级元素

2、行内元素：inline

 也叫内联元素，行内元素一般是基于语义级的基本元素，只能容纳文本或其他内联元素常见内联元素。

a，span是常见的内联元素，元素样式是display:inline;的都是内联元素

3、块级元素的特点：

1. 总是一行显示
2. 高度，行高和内边距及外边距都是可以控制的
3. 宽度缺省是它的容器的100%，除非设定宽度
4. 可以容纳块级元素或其他元素

4、行内元素的特点

1. 和其他元素都在一行显示
2. 高，行高，外边距和内边距都不可改变
3. 宽度是它的文字或图片的宽度，且宽度不可变
4. 内联元素只能容纳文本或其他内联元素

对行内元素需要注意的地方：

　　设置宽度无效

　　设置高度无效，只能通过line-height来设置

　　设置margin只有左右有效，上下无效

　　设置padding，同样只有左右有效，上下无效，元素范围增大了，但对周围的元素没有影响。

5、常见的块级元素：div，h1-h6，dl，ul，li，ol，table，p，form

     常见的行内元素：a，img，span，i，br，b，strong，label，input，select。

6、行内元素和块级元素的区别：

区别一：

• 块级元素会独占一行，默认情况下自动填满父元素的宽度
• 行内元素不会独占一行，相邻的行内元素会排在同一行，其宽度随内容的变化而变化

区别二：

• 块级元素可以设置宽度
• 行内元素不可以设置宽高

区别三：

• 块级元素可以设置margin，padding
• 行内元素只能设置margin-left，margin-right，padding-left，padding-right，水平方向可以生效，但垂直方向margin-top，margin-bottom，padding-top，padding-bottom。

区别四：

• 块级：display：block
• 行内：display：inline

　　可以通过设置display：block切换块级元素