50道css基础面试题(含答案)

[lazyken]

1、介绍一下标准的css的盒模型。他与替代（IE）盒模型的区别是什么？

首先一个盒模型有：

• content-box（width、height）
• padding-box （padding）
• border-box （border）
• margin-box （margin）

标准盒模型：设置width和height实际设置的是content-box；盒子大小为content-box+padding-box+border-box
替代（IE）盒模型：width和height设置的是可见宽度或高度，他的content-box+padding-box+border-box = 你设置的width或者height

举例：对于如下样式的盒模型

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

标准盒模型宽度 = 410px (350 + 25 + 25 + 5 + 5)。padding 加 border 再加 content box。
替代（IE）盒模型宽度=350px；高度=150px。

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

2、box-sizing属性

box-sizing: content-box（默认值） ｜ box-sizing
用来控制元素的盒模型解析模式。content-box：标准盒模型；box-sizing：替代（IE）盒模型

3、css选择器有哪些？哪些属性可以继承？

选择器	示例
(类型、标签、元素)选择器	h1 { }
通配符选择器	* { }
类选择器	.box { }
ID选择器	#app { }
标签属性选择器	a[title] { }
伪类选择器	p:first-child { }
伪元素选择器	p::first-line { }
后代选择器	articel p { }
子代选择器	artical > p { }
相邻兄弟选择器	h1 + p { }
通用兄弟选择器	h1 ~ p { }

可继承的属性：font-szie;font-family;color；
不可继承的属性：border；padding；margin；width；height；

4、css优先级算法

一个选择器的优先级可以说是由四个部分想加(分量),可以认为是个、十、百、千四个位数：

1. 千位：如果声明在style的属性(内联样式)则该位得一分，即只要是内联样式千位得一分，得分总是1000。
2. 百位：选择器中包含ID选择器，百位得一分。
3. 十位：选择器中包含类选择器、属性选择器或者伪类选择器，十位得一分。
4. 个位：选择器中包含元素、伪元素选择器，个位得一分。

注意：通用选择器(*)，组合符(+、>、~)，和否定伪类(:not)不会影响优先级。

警告：在计算优先级时不能进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。

举例：

选择器	千位	百位	十位	个位	优先级
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="en-US"] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
内联样式	1	0	0	0	1000

!important

使用了!important的属性的优先级最高！
覆盖 !important 唯一的办法就是另一个!important具有 相同优先级 而且顺序靠后，或者更高优先级。

顺序

两条样式优先级(权重)相同时，越靠后的会覆盖靠前的样式。(就近原则)

5、css3新增的伪类有哪些？

请参考w3c的CSS 选择器参考手册
简单列举一些：:nth-child(n)；:disabled；:checked；

6、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

水平居中：

1. margin: 0 auto;（适用于块级元素）
2. text-align: center(适用于文本)
3. justify-content: center(适用于flex元素)

垂直居中：

1. height = line-height （文本垂直居中）
2. vertical-align: middle (文本垂直居中)
3. align-items：center （适用于flex元素）

利用元素定位居中：

.box{
	width:200px;
	height:100px
	position: absolute;
	left:50%;
	top:50%;
	margin: -100px 0 0 -50px;
}

绝对定位的元素相对于 static 定位以外的第一个父元素进行定位。left、right、top、bottom使用百分数表示父元素的宽或高的大小的百分比。
上面代码的原理是，先将子元素定位到父元素的中心，然后通过margin负值向上和向右分别移动子元素自身的一半宽高。

上面总结了常用的居中方法，题解就不写了。

7、dispaly有哪些值？说明他们的作用。

dispaly属性规定元素应该生成的框的类型。

属性值	作用
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
inherit	规定应该从父元素继承 display 属性的值。

8、position的值有哪些？

position 属性规定元素的定位类型。

属性值	作用
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
inline-block	行内块元素。（CSS2.1 新增的值）
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

9、css3有哪些新特性？

类别	示例
选择器	:nth-child(n)；:disabled； :checked
边框	border-radius、box-shadow（x,h,o,color）、border-iamge
背景	background-size(); background-origin(指定background-position的相对位置,指定背景定位区域boder-box、padding-box、content-box)
文本效果	text-shadow（类似border-shadow） text-overflow（clip修剪文本、ellipsis显示省略号） word-break（normal默认换行规则、break-all允许单词内换行、keep-all只能在半角空格或连字符处换行） word-wrap（normal浏览器默认换行规则，超出部分会超出显示不会换行、break-word先换行，若还超出则切断换行显示）
2D转换	translate()、rotate()、scale()
3D转换	transform
过渡	transition
动画	@Keyframes

10、说一下Flex

不再总结了，推荐阅读阮一峰老师的Flex文章