【前端面试】行内元素与块级元素

1.分类

判断行内元素和块级元素的快捷方法就是判断是否能并列。
块级元素

行内元素

2.不同点

（1）块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。
（2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。
（3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。所以img 和 input 在严格意义上称之为行内块元素。因为这两个标签可以设置宽高属性。

3.转换

display:inline-block;
display:inline;
display:block;

4.例题

笔试遇到的一道题，当时没有答对。
1.指出span1 与 div1 的宽度

答案：span是 0*0

2.设置子元素margin-left:20px之后呢？

答案如下：

为什么span会有了21的高度呢？我也不知道啊很奇怪啊~~~

3.设置子元素padding-left：30px之后呢？
显然对div没有影响，而span则有了宽度30~