前端面试题三

一、什么是html语义化？

html语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器更好的解析。

二、行内元素、行内块元素、块级元素分别有哪些标签？分别举三个以上（越多越好）。

行内元素：span , em ,strong ,b , a

行内块元素： img , input 

块级元素： p , div , h1-h6, table 

三、请文以下标题的颜色是什么？

<div id="head" class="head">
	<span id="title">标题</span>
</div>

　　

.head span{color:red;}
#head span{color:blue;}
#title{color:yellow;}
span{color:green;}

　　blue

四、请写出清除浮动的方法（代码）？

1、额外添加标签

<div style="clear:both"></div>

2、在浮动元素后面增加<br/>标签；

　　<br/>标签有自带的清除浮动属性；

3、给浮动元素添加overflow:auto样式；

4、为最后浮动元素设置如下样式：

/* 清理浮动 */
.clearfix:after {
 visibility:hidden;
 display:block;
 font-size:0;
 content:" ";
 clear:both;
 height:0;
}
.clearfix {
 zoom:1;
}

其原理是，在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来，并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。

　　

5、

.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}

原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是，隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。

值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context，这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。

　　

五、定位方式有哪几种？分别相对什么元素定位？

absolute 绝对定位  相对于父元素

fixed  绝对定位  相对于浏览器窗口

relative 相对定位  相对于正常位置

static 无定位  默认值

inherit 继承：规定应该从父元素中继承position属性的值。