那些你需要知道的CSS-面试

一、px，em，rem、vw、vh

1.px (pixel，像素)：

是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

2.em(相对长度单位，相对于当前对象内文本的字体尺寸)：

是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

3.rem(root em，根em):

二、圣杯布局-双飞翼布局

.container {  width: 100%;  min-height: 300px;  padding: 0 60px;  box-sizing: border-box;}.container > div {    position: relative;    float: left;}.left, .right {    width: 60px;    height: 100%;}.left {    left: -60px;    margin-left: -100%;}.right {    right: 0;    margin-right: -100%;}.main {    width: 100%;    height: 100%;}复制代码

2.flex布局：

.container {
    width: 100%;
    min-height: 300px;
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex-basis: 60px;
}
.right {
    flex-basis: 60px;
}复制代码

3.绝对布局：

.container {
    width: 100%;
    min-height: 300px;
    position: relative;
}
.container > div {
    position: absolute;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    left: 60px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}复制代码

三、流式布局与响应式布局

四、CSS优先级算法

• 元素选择符： 1
• class选择符： 10
• id选择符：100
• 元素标签：1000

1. !important 声明的样式优先级最高，如果冲突再进行计算。
2. 如果优先级相同，则选择最后出现的样式。
3. 继承得到的样式的优先级最低。

五、 CSS3新增伪类有那些?

• p:first-of-type 选择属于其父元素的首个元素
• p:last-of-type 选择属于其父元素的最后元素
• p:only-of-type 选择属于其父元素唯一的元素
• p:only-child 选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中。

六、 CSS3新特性

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（对长的不可分割单词换行）word-wrap：break-word

4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

5. font-face属性：定义自己的字体

6. 圆角（边框半径）：border-radius 属性用于创建圆角

7. 边框图片：border-image: url(border.png) 30 30 round

8. 盒阴影：box-shadow: 10px 10px 5px #888888

9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

七、CSS优化、提高性能的方法有哪些？

1. 避免过度约束

2. 避免后代选择符

3. 避免链式选择符

4. 使用紧凑的语法

5. 避免不必要的命名空间

6. 避免不必要的重复

7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像

8. 避免！important，可以选择其他选择器

9. 尽可能的精简规则，你可以合并不同类里的重复规则

八、CSS动画

CSS 中的 transform ， transition 和 animation 是分开的三部分内容，其中 transfrom 主要是控制元素变形，并没有一个时间控制的概念，而 transition 和 animation 才是动画的部分，它们可以控制在一个时间段里，元素在两个或以上的状态切换的效果。

1.transition

transition 属性：

• transition-delay 延迟多久后开始动画

• transition-duration 过渡动画的一个持续时间

• transition-property 执行动画对应的属性，例如 color ， background 等，可以使用 all 来指定所有的属性

• transition-timing-function 随着时间推进，动画变化轨迹的计算方式，常见的有： linear ， ease ， ease-in ， ease-out ， cubic-bezier (...) 等。

transition 相关的事件

transitionend 事件会在 transition 动画结束的时候触发。通常我们会在动画结束后执行一些方法，例如继续下一个动画效果或者其他。Zepto.js 中的动画方法都是使用 CSS 动画属性来处理，而其中动画运行后的回调便应该是使用这个事件来处理。

2.animation

虽然 transition 已经提供了很棒的动画效果了，但是我们只能够控制从一个状态到达另外一个状态，没法来控制多个状态的不断变化，而 animation 而帮助我们实现了这一点。使用 animation 的前提是我们需要先使用 @keyframes 来定义一个动画效果， @keyframes 定义的规则可以用来控制动画过程中的各个状态的情况，语法大抵是这个样子：

@keyframes W {
  from { left: 0; top: 0; }
  to { left: 100%; top: 100%; }
}复制代码

@keyframes 关键词后跟动画的名字，然后是一个块，块中有动画进度的各个选择器，选择器后的块则依旧是我们常见的各个 CSS 样式属性。

animation 属性:

• animation-name 你需要的动画效果的 @keyframes 的名字。

• animation-delay 和 transition-delay 一样，动画延迟的时间。

• animtaion-duration 和 transition-duration 一样，动画持续的时间。

• animation-direction 动画的一个方向控制。

  默认是 normal ，如果是上述的 left 从 0% 到 100%，那么默认是从左到右。如果这个值是 reverse ，那么便是从右到左

由于 animation 提供了循环的控制，所以还有两个值是 alternate 和 alternate-reverse ，这两个值会在每次循环开始的时候调转动画方向，只不过是起始的方向不同。

animation 相关事件

可以通过绑定事件来监听 animation 的几个状态，这些事件分别是：

• animationstart 动画开始事件，如果有 delay 属性的话，那么等到动画真正开始再触发，如果是没有 delay，那么当动画效果应用到元素时，这个事件会被触发。

• animationend 动画结束的事件，和 transitionend 类似。如果有多个动画，那么这个事件会触发多次，像上边的例子，这个事件会触发三次。如果 animation-iteration-count 设置为 infinite ，那么这个事件则不会被触发。

• animationiteration 动画循环一个生命周期结束的事件，和上一个事件不一样的是，这个在每次循环结束一段动画时会触发，而不是整个动画结束时触发。无限循环时，除非 duration 为 0，否则这个事件会无限触发

九、BFC

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。

但其中，最常见的就是 overflow:hidden 、 float:left/right 、 position:absolute 。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。

十、flex 布局

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。

容器的属性：

1.flex-direction ： 属性决定主轴的方向（即项目的排列方向）

• nowrap （默认）：不换行。
• wrap ：换行，第一行在上方。
• wrap-reverse ：换行，第一行在下方。

3.flex-flow：是flex-direction属性和flex-wrap属性的简写形式

4.justify-content：定义了项目在主轴上的对齐方式

• flex-start （默认值）：左对齐
• flex-end ：右对齐
• center ： 居中
• space-between ：两端对齐，项目之间的间隔都相等。
• space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items：定义项目在交叉轴上如何对齐

• flex-start ：交叉轴的起点对齐。
• flex-end ：交叉轴的终点对齐。
• center ：交叉轴的中点对齐。
• baseline : 项目的第一行文字的基线对齐。
• stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

• flex-start ：与交叉轴的起点对齐。
• flex-end ：与交叉轴的终点对齐。
• center ：与交叉轴的中点对齐。
• space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch （默认值）：轴线占满整个交叉轴。

项目的属性

1. order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
3. flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
4. flex属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
5. align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

十一、Grid 布局总结

grid 布局是 css 中的一种新的布局方式，对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同，flex 着重于单轴，而 grid 适应于多轴，下面就来做个简单的介绍。

flex 布局示意

grid 布局示意

基本概念

容器属性

十二、box-sizing

十三、硬件加速

有时候动画可能会导致用户的电脑卡顿，你可以在特定元素中使用硬件加速来避免这个问题：

.block {
    transform: translateZ(0);
}
复制代码

你并不会察觉有什么不同，但浏览器会为这个元素进行3D硬件加速，在 will-change 这个特殊属性未被全面支持之前，这个方法还是很有用的。

参考

谈谈CSS3的长度单位（vh、vw、rem）

css经典布局——圣杯布局

深入理解BF

...