前端面试题及答案整理(二)

Part1 CSS相关

1 内联元素（inline-element）和块元素（block element）分别有哪些

常见内联元素（行内元素）有a、b、span、i 、em、input、select 、img等
常见的块元素有div、ul、li、h1~h6、talbe、ol、 ul、td、p等

2 浮动相关

浮动布局指将元素脱离普通流/文档流，使其可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素的排列。
正因为浮动元素脱离了文档流，其父级元素并不知道它的存在，因此会表现为高度为0，无论浮动元素如何变化，其父级元素也不会随它变化将其包裹，这种现象也叫作“高度塌陷”。
下面的例子中，不管#floatDom高度如何变化，#parent高度始终为0，这将导致父元素边框不能被撑开，背景不能显示等问题

<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <div style="clear:both"></div>

因为高度塌陷的存在（这往往不是我们所期望的），必须要清除浮动，下面介绍清除浮动的几种方式：
•在浮动元素后添加样式含有“clear：both”的元素

<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <div style="clear:both"></div>

也可以添加br标签，其自带clear：both属性

<div id="parent"> <div id="floatDOM" style="float:left;width:300px;height:300px;"> <br/></div>

利用这种方式清除浮动的优点在于通俗易懂，容易掌握，缺点也很明显，增加了很多无意义的标签，这个在后期维护中是很痛苦的。
•为父元素添加样式“overflow:hidden"

<div id="parent" style="overflow:hidden"> <div id="floatDOM" style="float:left;width:300px;height:300px;"></div>

利用这种方式不存在结构和语义化问题而且代码量极少，然而在内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
•利用：after伪元素

<style type="text/css"> .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }</style><div id="parent" class="clearfix"> <div id="floatDOM" style="float:left;width:300px;height:300px;"></div>

利用这种方式，仅需在目标元素上添加一个类，也是目前使用最多的一种方式。

Reference
iyunlu.com/view/css-xht

3 相对布局（relative）和绝对布局的区别（absolute）

相对布局和绝对布局最本质的区别在于是否脱离文档流。