前端面试常考知识点

1.css3的新特性有哪些

点我查看

css3选择器 .

css3边框与圆角

css3圆角border-radius:

属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径

盒阴影box-shadow:

语法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影

css3背景与渐变

重要的几个：

background-image

语法：backgroundimage:url('1.jpg),url('2.jpg')

background-origin

定义：设置背景图像的原始起始位置

语法：background-origin：border-box / padding-box / content-box(背景图片坐标原点与这三个有关系)

background-repeat

定义：设置是否及如何重复背景图像，默认地，背景图像在水平和垂直方向上重复。

background-size

定义：指定背景图像的大小

语法：background-size：number / % / cover / contain

太多了，本宝宝休息一下再写

css3过渡 css3变换 css3动画

2.flex

这篇讲的很全

简单易懂

一方面是在父容器的几个属性，另一些就是子元素的属性

父：

* flex-direction 子元素排列方向

* flex-wrap 如果一条轴线排不下，如何换行

* flex-flow flex-direction属性和flex-wrap属性的简写形式

* justify-content 在主轴上的对齐方式

* align-items 在交叉轴上如何对齐

* align-content 多根轴线的对齐方式

子：

* order

* flex-grow

* flex-shrink

* flex-basis

* flex

* align-self

3.bfc

盒模型和bfc

内部的box会在垂直方向，一个接一个的放置 每个元素的margin box的左边，与包含块border box的左边相接触(对于从做往右的格式化，否则相反) box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠 bfc的区域不会与浮动区域的box重叠 bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的 计算bfc高度的时候，浮动元素也会参与计算

怎么创建bfc

float属性不为none(脱离文档流) position为absolute或fixed display为inline-block,table-cell,table-caption,flex,inine-flex overflow不为visible 根元素

应用场景

自适应两栏布局 清除内部浮动

防止垂直margin重叠

为什么overflow:hidden可以消除margin合并?

我们首先要搞清楚为什么会发生margin合并。这些元素(包括兄弟、父子元素等)之间之所以会发生margin合并，是因为它们属于同一个bfc。所以，我们就知道怎么办了，只要让它们不属于同一个bfc不就可以了?通过overflow:hidden创建了一个bfc

为什么overflow:hidden可以清除浮动的影响?

当给.parent设置"overflow:hidden"时，实际上创建了一个超级属性bfc，此超级属性反过来决定了"height:auto"是如何计算的。在“bfc布局规则”中提到：计算bfc的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素。

为什么overflow:hidden...

link、import、require的区别

import和require

require是运行时调用，所以require理论上可以运用在代码的任何地方

import是编译时调用，所以必须放在文件开头

link和import

当一个页面被加载的时候(就是被浏览者浏览的时候)，link引用的css会同时被加载，而@import引用的css会等到页面全部被下载完再加载。所以有时候浏览@import加载css的页面时会没有样式(就是闪烁)，网速慢的时候还挺明显。