本文记录一些常用的css知识点。具体内容转自参考文章。
前端知识点整理
1. 标准盒模型和IE(怪异盒模型)的区别。
标准（W3C）盒子模型：width = 内容宽度（content） + border + padding + margin
低版本IE盒子模型： width = 内容宽度（content + border + padding）+ margin
标准盒子模型盒子的height和width是content（内容）的宽高，而IE盒子模型盒子的宽高则包括content+padding+border部分。
2. CSS选择器有哪些？哪些属性可以继承？
- id选择器（
#content） - 类选择器（
.content） - 标签选择器（
div, p, span等） - 相邻选择器（
h1 + p） - 子选择器（
ul > li） - 后代选择器（
li a） - 通配符选择器（
*) - 属性选择器（
a[rel = "external"]） - 伪类选择器（
a:hover, li:nth-child）
3. CSS优先级？
id选择器 > .选择器 > +选择器 > *
important > 行内 > 内联 > 外链
4. CSS3新增伪类选择器？
5. 如何居中div？
flex布局：justify-content: center; align-items: center
定位：绝对定位 + margin-left，绝对定位 + transform
6. display有哪些值？
7. CSS3有哪些新特性
属性和伪类选择器- 圆角（
border-radius） - 多列布局（
multi-column layout） - 阴影（
shadow）和反射（reflect） - 文字特效（
text-shadow） - 文字渲染（
text-decoration） - 线性渐变（
gradient） - 旋转（
rotate）/ 缩放（scale）/ 倾斜（skew）/ 移动（translate） - 媒体查询（
@media） RGBA和透明度@font-face属性- 多背景图
8. 纯CSS创建一个三角形？
9. 什么是响应式设计？响应式设计的基本原理是什么？
10. 如何清除浮动？什么是BFC？
- 父级盒子定义高度（
height） - 最后一个浮动元素后面加一个div空标签，并且添加样式
clear: both - 包含浮动元素的父级标签添加样式overflow为
hidden/both - 父级div定义
zoom
11. CSS优化、提高性能的方法
- 多个css可合并，并尽量减少http请求
- 属性值为0时，不加单位
- 将css文件放在页面最上面
- 避免后代选择符，过度约束和链式选择符 使用紧凑的语法 避免不必要的重复 使用语义化命名，便于维护 尽量少的使用!impotrant，可以选择其他选择器 精简规则，尽可能合并不同类的重复规则 遵守盒子模型规则
12. CSS预处理器/后处理器是什么？为什么要使用它们？
- 预处理器，如：
less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性，还有层级，mixin，变量，循环，函数等，对编写以及开发UI组件都极为方便。 - 后处理器，如：
postCss，通常被视为在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。 - 其它css预处理器语言：
Sass,Less,Stylus,Turbine,Swithch css,CSS Cacheer,DT Css。
13. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？
-
冒号(
:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 -
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 -
:before和:after这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。
14. 如果需要手动写动画，你认为最小时间间隔是多久？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
15. rgba() 和 opacity 的透明效果有什么不同？
-
opacity作用于元素以及元素内的所有内容（包括文字）的透明度 -
rgba()只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
16. display:inline-block 什么时候会显示间隙？
-
有空格时候会有间隙， 可以删除空格解决
-
margin正值的时候， 可以让margin使用负值解决 -
使用font-size时候，可通过设置
font-size:0、letter-spacing、word-spacing解决
17. CSS样式中常使用 px、rem、em 在表现上有什么区别？
18. transform、animation的区别？
Transform: 它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。Animation: 作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画，可以通过keyframe显式控制当前帧的属性值。
19. display: none 与 visibility: hidden 有什么区别？
-
联系： 这两个属性的值都可以让元素变得不可见
-
区别：
-
从占据空间角度看：
display: none会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见。 -
从继承方面角度看：
display: none是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible 可以让子孙节点显式。 -
从重绘和重排角度看：修改常规流中元素的
display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容。
-
20. link 与 @import 的区别？
link优于@import。
21. display,float,position有什么关系？
22. 外边距折叠(collapsing margins)
- 通过
BFC来解决
23. 有哪几种隐藏元素的方法？
-
visibility: hidden这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。 -
opacity: 0CSS3属性，设置0可以使一个元素完全透明。 -
position: absolute设置一个很大的 left 负值定位，使元素定位在可见区域之外。 -
display: none元素会变得不可见，并且不会再占用文档的空间。 -
transform: scale(0)将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留， -
<div hidden="hidden">HTML5属性，效果和display:none;相同，但这个属性用于记录一个元素的状态。 -
height: 0将元素高度设为 0，并消除边框。 -
filter: blur(0)CSS3属性，括号内的数值越大，图像高斯模糊的程度越大，到达一定程度可使图像消失。
24. 对BFC(块级格式化上下文：block formatting context)的理解。
BFC规定了内部的Block Box如何布局。一个页面是由很多个Box组成的，元素的类型和display属性，决定了这个Box的类型。不同类型的box，会参与不同的Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不用的方式渲染，也是就是说BFC内部的元素和外部的元素不会相互影响。
定位方案：
- 内部的
box会在垂直方向上一个接一个的放置 box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠- 每个元素
margin box的左边，与包含块border box的左边相接触 BFC的区域不会与float box重叠BFC是页面上的一个隔离的独立容器，容器里面的元素不会影响到外面的元素- 计算
BFC的高度时，浮动元素也会参与计算
满足下列条件之一就可以触发BFC
- 根元素变化，即
html float的值不为none（默认）overflow的值不为visible（默认）display的值为inline-block,tabke-cell，table-captionposition的值为absolute或fixed
25. 元素竖向的百分比设定是相对于容器的高度吗？
一般来说，子元素的百分比单位都是以父元素为依据。但是margin和padding例外。元素的height是相对于容器的高度，但是元素的margin和padding是相对于容器的宽度。
26. box-sizing 常用的属性有哪些？分别有什么作用？
box-sizing: content-box默认的标准(W3C)盒模型元素效果box-sizing: border-box触发怪异(IE)盒模型元素的效果box-sizing: inherit继承父元素 box-sizing 属性的值
27. ::before 和 :after 中双冒号和单冒号有什么区别？
28. 常见的CSS布局有几种？
常见的CSS布局有： 固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。
29. 什么是回流（重排）和重绘以及其区别？
- 回流（重排）
reflow：当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建。 - 重绘（
repaint）：当render tree中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不会影响布局时，称其为重绘，例如颜色改变等。
触发重排（回流）的条件：
- 增加或者删除可见的
dom元素 - 元素的位置发生了改变
- 元素的尺寸发生了改变，例如边距，宽高等几何属性改变
- 内容改变，例如图片大小，字体大小改变等
- 页面渲染初始化
- 浏览器窗口尺寸改变，例如resize事件发生时等
