前端面试整合

1. :befor和::befor区别

（1）相同点

            --都可以用来表示伪类对象，设置对象前面的内容

            --：befor和：：befor是等效的

（2）不同点

            --：befor是css2的写法，：：befor是css3的写法。css2的兼容性好

            --H5开发中用：：befor好

            -- 但冒号是css3伪类。双冒号表示伪元素

2.盒模型  box-sizing

    #盒模型

        html文档中的元素会被描述成为矩形盒子，这个盒子通过盒模型显示大小内容。margin , border , padding ,  content

                                                            

        IE盒模型和W3C标准盒模型。

IE ：宽高 = content  +  border +  padding

标准 ： 宽高 = content

#box-sizing : content-box ( 默认 ) | border-box | inherit

    content-box 相当于  W3C标准盒模型

    border-box 相当于 IE盒模型

3.水平居中，垂直居中

  #水平居中

    (1)    子级div    margin : 0 auto ;

    (2)    父级div    text-align : center ;        子级div    display : inline-black ;

    (3)    绝对定位法 ： 

            父级div    position : relative ;

            子级div    position : absolute ;

                            left : 50% ;

                            margin-left : - ( 宽度 / 2 ) ;    // 垂直也行

    (4)    flex  ：  

            父级div    display : flex ;

                            justify-centent : center ;

    #垂直居中

    (1)    flex  :

            父级div    display : flex ;

                            align-items : center ;

    (2)    绝对定位 ：

            -- left : 50% ; top : 50% ; margin : -宽高的一半

            --top : 0 ; bottom : 0 ; margin : auto ;

            --left : 50% ; top : 50% ;  transform : translate ( -50% , -50% ) ;

    (3)    使用 line-height 和 vertical-align 对图片进行垂直居中

            父级 行高等于高   子级 vertical-align ： middle  ;

4.隐藏页面的方式

#opacity设为0 ：

    透明度为0。视觉上隐藏，元素仍然占据空间，对布局和用户交互起作用

#visibility : hidden ;

    占据空间，但对用户交互无作用

#display : none ;

    完全不存在。DOM可操作

#position 出界面

#clic-path

5.css3新特性

#边框      

    border-image    border-radius    box-shadow

#背景

    background-clip    规定背景的绘制区域

    background-origin    规定背景图片的定位区域

    background-size    规定背景尺寸

#渐变

     --线性渐变（Linear Gradients）下|上|左|右|对角

     --径向渐变

#文本效果

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

#字体

#转换变形

Property	描述	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置

2D

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

3D转换属性

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

3D转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

#过渡

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3