CSS面试要点！看完你还觉得你已经学好CSS了吗？

一、pxemrem、vw、vh

1.px (pixel像素)

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

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

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

3.rem(root em根em):

rem是一个相对单位1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小就可以改变rem所代表的大小。这样我们就有了一个可控的统一参考系。我们现在有两个目标

rem单位所代表的尺寸大小和屏幕宽度成正比

也就是设置html元素的font-size和屏幕宽度成正比rem单位和px单位很容易进行换算方便我们按照标注稿写cssrem与em的区别

rem是相对于根元素html的字体大小而em是相对于其父元素的字体大小

em最多取到小数点的后三位

4.vw、vh

css3中引入了一个新的单位vw/vh与视图窗口有关vw表示相对于视图窗口的宽度vh表示相对于视图窗口高度除了vw和vh外还有vmin和vmax两个相关的单位。各个单位具体的含义如下

这里我们发现视窗宽高都是100vw100vh那么vw或者vh下简称vw很类似百分比单位。

vw和%的区别为

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

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局

三列布局中间宽度自适应两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高

提醒圣杯布局中相对布局中main元素必须是container的第一个元素

html代码

   main
   left
   right

1.相对布局

.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;
}

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

流式布局

使用非固定像素来定义网页内容也就是百分比布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩不受固定像素的限制内容向两侧填充。

响应式开发

利用CSS3 中的 Media Query(媒介查询)通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕(移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

由于响应式开发显得繁琐些一般使用第三方响应式框架来完成比如 bootstrap 来完成一部分工作当然也 可以自己写响应式。

四、CSS优先级算法

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

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

五、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-repeatword-wrap对长的不可分割单词换行

3.word-wrapbreak-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 中的 transformtransition 和 animation 是分开的三部分内容其中 transfrom 主要是控制元素变形并没有一个时间控制的概念而 transition 和 animation 才是动画的部分它们可以控制在一个时间段里元素在两个或以上的状态切换的效果。

1.transition

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

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

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

transition-timing-function 随着时间推进动画变化轨迹的计算方式常见的有lineareaseease-inease-outcubic-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 提供了循环的控制所以还有两个值是 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到底是什么首先来看看什么是视觉格式化模型。

视觉格式化模型

视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制它也是CSS中的一个概念。

视觉格式化模型定义了盒Box的生成盒主要包括了块盒、行内盒、匿名盒没有名字不能被选择器选中的盒以及一些实验性的盒未来可能添加到规范中。盒的类型由display属性决定。

• 根元素或其它包含它的元素* 浮动 (元素的float不为none)* 绝对定位元素 (元素的position为absolute或fixed)* 行内块inline-blocks(元素的 display: inline-block)* 表格单元格(元素的display: table-cellHTML表格单元格默认属性)* overflow的值不为visible的元素* 弹性盒 flex boxes (元素的display: flex或inline-flex)

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

浏览器对BFC区域的约束规则

1. 生成BFC元素的子元素会一个接一个的放置。
2. 垂直方向上他们的起点是一个包含块的顶部两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
3. 生成BFC元素的子元素中每一个子元素左外边距与包含块的左边界相接触对于从右到左的格式化右外边距接触右边界即使浮动元素也是如此尽管子元素的内容区域会由于浮动而压缩除非这个子元素也创建了一个新的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 属性决定主轴的方向即项目的排列方向

row默认值主轴为水平方向起点在左端。
row-reverse主轴为水平方向起点在右端。
column主轴为垂直方向起点在上沿。
column-reverse主轴为垂直方向起点在下沿。

2.flex-wrap 默认情况下项目都排在一条线又称"轴线"上

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默认值轴线占满整个交叉轴。

项目的属性order属性定义项目的排列顺序。

数值越小排列越靠前默认为0。

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

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

十一、Grid 布局总结

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

flex 布局示意

grid 布局示意

基本概念

设置 display: grid; 的元素称为容器它的直接子元素称为项目但注意子孙元素不是项目。

grid line网格线构成 grid 布局的结构分为水平和竖直两种。grid track两条相邻网格线之间的空间可以认为是一行或者一列。
grid cell两条相邻行和相邻列之间分割线组成的空间是 grid 布局中的一个单元。
grid area四条网格线包裹的全部空间任意数量的 grid cell 组成一个 grid area。

容器属性

grid 容器的属性还是有点多的一共有 18 个但是很多可以通过简写完成所以也不用太紧张。

grid-template 系列

grid-template-columns
grid-template-rows
grid-template-areas

grid-gap 系列

grid-column-gap
grid-row-gap

place-items 系列

justify-items
align-items

place-content 系列

justify-content
align-content

grid 系列

grid-auto-columns
grid-auto-rows
grid-auto-flow

十二、box-sizing

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content二IE模型包括border和padding

box-sizing属性可以为三个值之一

content-box默认值只计算内容的宽度border和padding不计算入width之内
padding-boxpadding计算入宽度内
border-boxborder和padding计算入宽度之内

十三、硬件加速

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

.block {
    transform: translateZ(0);
}

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