前端面试知识点（css）

1.display：none与visibility:hidden区别

题目：display：none与visibility:hidden区别？

答案：display: none不占据空间，即不在文档流中，而visibility:hidden还在文档流中。

display: none子元素不可见。visibility:hidden的子元素如果设置visibility:visible则还可以看到。

2.隐藏元素的方法

题目：有哪些隐藏元素的方法？

答案：display: none ; visibility: hidden ; opacity: 0 ;

也可以用left: -9999px或者transform: translateX(-9999px);将元素移出视口外部。

3.css画三角形

题目：使用css画一个三角形

答案：

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <style type="text/css">  
        #triangle {  
            /*1.内容区面积为0*/  
            width: 0;  
            height: 0;  
            /*2.设置边框样式*/  
            border: 10px solid;  
            border-color: white white red white;  
        }  
    </style>  
</head>  
<body>  
    <div id="triangle"></div>  
</body>  
</html>

4.盒模型

题目：介绍下css的盒模型。

标准盒模型和怪异盒模型是什么？

ie 盒模型和 w3c 盒模型的区别如何使用ie的盒模型

答案：CSS把每个元素视为一个盒子，每个盒子包括分为内容（content）、填充（padding）、外边界区（margin）、边框区（border）四个部分。这种对界面元素的抽象，称为盒模型。

有两种盒模型：IE盒模型（也称怪异盒模型）（border-box）、W3C标准盒模型（content-box）

IE盒模型和W3C标准盒模型的区别：

W3C标准盒模型：属性width，height只包含内容content，不包含border和padding。

W3C标准盒模型元素宽度实际占有的位置大小：width+左右padding+左右border+左右margin

IE盒模型：属性width，height包含content、border和padding，指的是content +padding+border。

IE盒模型元素的宽度：width（content+border+padding）+margin

5. 盒模型盒子的宽度计算

题目：一个盒子，宽度设为100px，padding设为100px，整个在页面占多少px？

答案：盒子宽度 = width + padding + border + marign。

由于padding包括padding-left和padding-right，

所以这个盒子水平占据100px + 100px*2 +0 +0 = 300px

6.两种盒模型对比

题目：在两种盒模型下获取div的宽度分别是多少？

1	<div style="width: 200px;padding: 10px;margin: 20px"><div>

答案：div的宽度指通过div.clientWidth获取的宽度，这个宽度包括content、padding和border。

标准盒模width指的是content的宽度，因此获取的宽度为200px + 10 × 2 = 220px。

怪异盒模型width包括content、border和padding，因此width是200px。

7.有哪些CSS选择器

题目：介绍一下都有哪些CSS选择器。

答案：

1、id选择器（#id）

2、类选择器（.name）

3、标签选择器（div,h1,p）

4、后代选择器（h1 p）后代选择器的祖先和后代之间用空格分割

5、相邻后代选择器（子）选择器（ul>li）

6、兄弟选择器（li~a）

7、相邻兄弟选择器（li+a）

8、属性选择器（a[rel=”external”]）

9、伪类选择器（a:hover,li:nth-child）

10、伪元素选择器（::before、 ::after）

11、通配符选择器（*）

8.CSS样式优先级

题目：说一下CSS优先级的计算规则？

答案：CSS规范为不同类型的选择器定义了特殊性权重，特殊性权重越高，样式会被优先应用。

第一等级：代表内联样式，如 style=””，权值为 1,0,0,0；

第二等级：代表 ID选择器，如 #id=””, 权值为 0,1,0,0；

第三等级：代表 calss | 伪类 | 属性选择器，如 .class | :hover,:link,:target | [type], 权值为0,0,1,0；

第四等级：代表标签 | 伪元素选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值为0,0,0,1；

此外，通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；

对于每条CSS规则，生成一个优先级四元组<内联,ID,Class|属性|伪类,元素选择器>。

每一位的数值计算方法是，在规则中选择器出现的个数。

两条规则之间对比，从左到右对比，数值大的规则优先级高。

如果某一位相同，对比下一位。

9.css优先级计算

题目：判断以下选择器优先级顺序

1、#foo div

2、#foo .bar div

3、#foo~.bar div

答案：根据知识点中介绍，这3个选择器优先级计算结果为：

0,1,0,1

0,1,1,1

0,1,1,1

后两个优先级计算结果相同，则后出现的优先级更高

10.div .div #div div>div>div优先级

题目：div, .div, #div, div>div>div这几个选择器优先级排序？

答案：根据知识点中介绍，这4个选择器优先级计算结果为：

① 0,0,0,1

② 0,0,1,0

③ 0,1,0,0

④ 0,0,0,3

因此优先级排序为③, ②, ④, ①

11.为什么不推荐用多层css选择器

题目：为什么不推荐用多层css选择器？

答案：由于选择器的匹配需要在整个DOM树中查找节点，层级越高性能越低，因此不建议CSS选择器层级太多。

12.css选择器处理

题目：div .child p是是从左边往右边开始定位还是从右边往左边开始？为什么？

答案：当存在后代选择器时候，CSS选择器的匹配是从右往左的，原因是从左往右匹配的话，需要遍历DOM树，可能会有多次回溯，而从右往左的话，先匹配所有的子节点选择器，然后向上查找，这样性能更好。

13.css居中

题目：css如何水平居中和垂直居中？

实例：

1
2
3

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    width: 200px;
    height: 100px;
    position: relative;
    background-color: #374858;
}
 
.parent .child {
    width: 100px;
    height: 50px;
    background-color: red;
}

13.1 水平居中

设置子元素为内联样式，只需要父元素设置为 text-align: center。

.box {
	    text-align: center;
}
.box .child {
	    display: inline-block;
}

当子元素和父元素都为块级元素时，只需要设置子元素(子元素需要有width)为 margin:0 auto

.box {}
	 
.box .child {
	display: block;
	margin: 0 auto;
}

子元素设置为 position:absolute

.box {}
	 
.box .child {
	position: absolute;
	left: 0;
	top:0;
	transform: translate(50%, 0);
}
//或者
.box .child {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
}

父元素设置为 display:flex，子元素可为内联、块级元素

.box {
	display: flex;
	justify-content: center;
}
	 
.child {
	 display: inline-block;
}

13.2 垂直居中

子元素 position: absolute

.box {}
 
.box .child {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

父元素 display:flex，子元素可为内联、块级元素

.box {
    display: flex;
    align-items: center;
}
 
.box .child {
    display: inline-block;
}

13.3 水平居中+垂直居中

子元素 display: inline-block，子元素需要有width和height

.box {
	text-align: center;
	/* 让标签元素以表格单元格的形式呈现 */
	display: table-cell;
	//设置元素的垂直排列
	vertical-align: middle;
}
	 
.box .child {
	display: inline-block;
}

子元素 position: absolute

.box {
	position: relative;
}
	 
.box .child {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

父元素 display: flex

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.box .child {}

14.如何清除浮动

题目：为什么需要清除浮动？

如何清除浮动？

clear为什么能清除浮动？

overflow: hidden为什么能清除浮动？

答案：浮动的元素会造成父元素高度塌陷，因此需要清除浮动。

有3种办法：1. 在浮动元素后面增加一个元素，设置clear: both；2. 父元素设置伪元素，给伪元素设置clear: both；3. 父元素设置overflow: hidden。

设置clear的元素不受前面浮动元素影响，位置会放在浮动元素后面，因此可以把父元素撑开。

overflow: hidden让父元素形成一个BFC，所以可以清除浮动。