2020-03-25

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>

<head>

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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

扩展：

：link 超链接没有被访问过时的状态

：visited 链接访问过后的状态

：hover 鼠标划过时的状态

：active 鼠标按下时的状态