1.BFC是什么？
块级格式化上下文,指页面中的一个渲染区域，并且拥有一套渲染原则。
如何触发BFC
（1）设置float除none以外的值（例如left或right等）
（2）设置overflow除visible以外的值（hidden scroll auto）
（3）设置display值为table-cell，table-caption，inline-block，flex之一
（4）设置position值为absolute或fixed
BFC的作用
（1）解决上下margin重叠问题
（2）解决高度塌陷问题
（3）用于布局
与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖，利用该特性可实现多列布局
BFC的特性
（1）浮动的子元素会参与父元素的高度计算（父级触发了BFC）
（2）子元素设置的margin值不会传递给父元素（父级触发了BFC）
（3）当上下两个元素同时设置了margin-bottom和margin-top，不会重叠（给其中一个元素嵌套一个父级，并触发BFC）
定位流>浮动流>文档流
2.IE的双编剧bug：块级元素float后设置横向margin，IE6显示的margin比设置的较大
_display：inline
3.HTML和XHTML有什么区别？
（1）所有的标记都必须有一个相应的结束标记
（2）所有标签的元素和属性的名字都必须使用小写
（3）所有的XML标记都必须合理嵌套
（4）所有的属性必须用引号“ ”括起来
（5）把所有的特殊符号用编码表示
（6）给所有属性赋一个值
（7）不要在注释内使用 --
（8）图片必须有说明文字
4.HTML常见兼容性问题
（1）双边距bug float引起的 使用display:inline
（2）在IE6中，不能识别较小高度的容器（添加overflow：hidden）
（3）超链接hover点击后失效，改变属性顺序：link visited hover active
（4）图片默认有空隙（float:left或display:block或vertical-align:bottom）
（5）IE6不能识别min-height属性（！important或_height）
①
height:auto!important;
height:500px;
min-height:500px;
②
#test {
min-height:100px;
background:#BBB;
_height:100px;
overflow: visible;
}
（6）IE5-8不支持opacity
解决：filter:alpha（opacity=数值）
（7）a标签里嵌套img时，有些浏览器会出现有颜色的边框
解决：img{boreder:0}或img{border:none}
（8）鼠标指针bug
cursor:hand(只有IE8及以下浏览器支持)
设置为cursor：pointer（所有浏览器都支持）
（9）表单行高不一致
设置input{float:left} 或 input{vertical-align：hidden}
（10）百分比bug：在IE6下，子元素50%+50%按照四舍五入的计算会大于100%
给右边浮动的元素添加clear：right
5.对WEB标准以及W3C的理解与认识
答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
6.前端页面有哪三层构成，分别是什么?作用是什么?
答：结构层 Html 表示层 CSS 行为层 js。
7.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
display的值
（1）block 将元素转换为块元素
（2）inline 将元素转换为内联元素（a,span等）
（3）inline-block 将元素转换为内联块元素（img input textarea select）
（4）list-item 将元素转换为li类型
position的值
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed（老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于元素偏移前本身的位置
static 默认值。没有定位
相对定位和绝对定位的区别
（1）参照物不同
（2）位置是否保留 相对定位保留位置，绝对定位不保留位置
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.浏览器标准模式和怪异模式之间的区别是什么?
在标准模式下：浏览器按照HTML与CSS标准对文档进行解析和渲染；对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；
在怪异模式下：浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。
区别：
对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；因为IE的content部分是包含内边距和边框的，标准CSS盒模型的宽度和高度等于内容区的高度和宽度
10.text-align:center和line-height有什么区别？
text-align是水平对齐，line-height是行间。
11.写一个表格以及对应的CSS,使表格奇数行为白色背景，偶数行为灰色，鼠标一上去为黄色背景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
table { border: 1px solid #ddd;}
td{width: 30px;height: 10px;}
/* 奇数 */
tr:nth-child(odd) {background-color: gray}
/* 偶数 */
tr:nth-child(even) {background-color: pink}
tr:hover {background-color: yellow}
</style>
</head>
<body>
<table>
<th>表格标题</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
扩展：
：link 超链接没有被访问过时的状态
：visited 链接访问过后的状态
：hover 鼠标划过时的状态
：active 鼠标按下时的状态
网友评论