前端面试常考知识点---CSS

骞讳护发布于2019-08-29 17:30 / 2600人阅读

摘要：在布局规则中提到计算的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，顺便达成了清除浮动的目标，所以父元素就包裹住了子元素。

前端面试常考知识点---js

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的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114364.html

前端事件绑定知识点（面试常考）

摘要：事件通常与函数配合使用，当事件发生时函数才会执行。的事件流是事件捕获流，事件由根元素获取并沿树向下分发。通过添加事件，只能用删除此事件。这主要得益于浏览器的事件冒泡机制。简介事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。事件通常与函数配合使用，当事件发生时函数才会执行。执行JS 事件的方式： ...

liujs 2019-08-20 18:16 评论0 收藏0
前端事件绑定知识点（面试常考）

摘要：事件通常与函数配合使用，当事件发生时函数才会执行。的事件流是事件捕获流，事件由根元素获取并沿树向下分发。通过添加事件，只能用删除此事件。这主要得益于浏览器的事件冒泡机制。简介事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。事件通常与函数配合使用，当事件发生时函数才会执行。执行JS 事件的方式： ...

wizChen 2019-08-01 17:14 评论0 收藏0
前端面试常考知识点---js

摘要：上面实现了递归调用，这样做的好处是在前一个定时器代码执行完成之前，不会向队列插入新的定时代码，确保不会有任何的缺失间隔。而且，它保证在下一次定时器代码执行之前，至少要等待指定的时间间隔。 1.同步和异步详细～文章总结： setTimeout(fn,ms)这个函数，是经过指定时间后，把要执行的任务加入到Event Queue中，又因为是单线程任务要一个一个执行，如果前面的任务需要的时间...

BingqiChen 2019-08-26 11:51 评论0 收藏0
前端秋招面试总结

摘要：前言秋招宣告结束，面试了接近家公司，有幸拿到，感谢这段时间一起找工作面试的朋友和陪伴我的人。一定要提前准备好，不然面试官叫你说遇到的难点，或者直接问问题时可能会懵逼。前言秋招宣告结束，面试了接近20家公司，有幸拿到offer，感谢这段时间一起找工作面试的朋友和陪伴我的人。这是一段难忘的经历，相信不亚于当年的高考吧，也许现在想起来高考不算什么，也许只有经历过秋招的人才懂得找工作的艰辛...

Gu_Yan 2019-08-02 12:04 评论0 收藏0