CSS篇
1. position的值， relative和absolute分别是相对于谁进行定位的？（初级）
- absolute: 生成绝对定位的元素， 相对于最近一级的 定位不是
static的父元素来进行定位； - fixed:（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或
frame进行定位； - relative: 生成相对定位的元素，相对于其在普通流中的位置进行定位；
- static: 默认值。没有定位，元素出现在正常的流中；
- sticky: 生成粘性定位的元素，容器的位置根据正常文档流计算得出。
2. display:none和visibility:hidden的区别？（初级）
- display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在；
- visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
3. CSS中link和@import的区别是？（初级）
- link属于
HTML标签，而@import是CSS提供的； - 页面被加载的时，link会同时被加载，而
@import被引用的CSS会等到引用它的CSS文件被加载完再加载； - import只在
IE5以上才能识别，而link是HTML标签，无兼容问题； - link方式的样式的权重 高于
@import的权重。
4. position:absolute和float属性的异同（初级）
- 共同点：对内联元素设置
float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。 - 不同点：
float仍会占据位置，absolute会覆盖文档流中的其他元素。
5. 介绍一下box-sizing属性？（初级）
- box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是
content-box； - content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由
border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高； - border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置
width/height属性指的是border + padding + content。
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
6. 行内元素有哪些？块级元素有哪些？空元素有哪些？（初级）
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素： <br><hr> <img> <input> <link> <meta>
鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
7. 对BFC规范的理解？（中级）
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
8. 如何清除浮动?（中级）
- 额外标签
clear:both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
</body>
html
- 利用
BFC，overflow-hidden
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
css
- 使用
after(推荐)
<style>
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
</body>
html
9. 常见的行内元素和块级元素都有哪些？（初级）
- 行内元素
inline- 不能设置宽高，不能自动换行。
- span、input、img、textarea、label、select。
- 块级元素 block
- 可以设置宽高，会自动换行。
- p、h1/h2/h3/h4/h5、div、ul、li、table。
- inline-block
- 可以设置宽高，会自动换行。
10. 常见的替换元素和非替换元素？（初级）
- 替换元素
- 是指若标签的属性可以改变标签的显示方式就是替换元素，比如
input的type属性不同会有不同的展现，img的src等。 - img、input、iframe。
- 是指若标签的属性可以改变标签的显示方式就是替换元素，比如
- 非替换元素
- div、span、p。
11. 什么是 DOM 事件流？什么是事件委托?（中级）
- DOM 事件流
- 分为三个阶段
- 捕获阶段
- 目标阶段
- 冒泡阶段
- 在
addeventListener()的第三个参数useCapture设为true，就会在捕获阶段运行，默认是false冒泡。
- 分为三个阶段
- 事件委托
- 利用冒泡原理(子向父一层层穿透)，把事件绑定到父元素中，以实现事件委托。
12. 什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？（高级）
FOUC - FlashOf Unstyled Content 文档样式闪烁
<styletype="text/css"media="all">@import"../fouc.css";</style>
html
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
↑