css篇

一、css3的新特性（不列全部，捡重点回答）

1、CSS3选择器:last-child、nth-child(n)、nth-last-child(n)等。点此查看更多

2、@Font-face（加载字体样式）

3、Transition,Transform和Animation（动画相关）

    这三个特性是CSS3新增的和动画相关的特性。

Transition

    Transition可以在当元素从一种样式变换为另一种样式时为元素添加效果，而不用使用Flash动画或JavaScript。

Transition有如下属性：

    transition-property: 规定应用过渡的CSS属性的名称。

    transition-duration: 规定完成过渡效果需要多长时间。

    transition-delay: 规定过渡效果何时开始，默认是0。

    transition-timing-function: 规定过渡效果的时间曲线，默认是"ease"，还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。

    transition: 简写属性，用于在一个属性中设置四个过渡属性。

Transform

    Transform用来向元素应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。

变换类型

    transform可以有各种变换类型，即属性值：

    none: 定义不进行转换。

    matrix(n,n,n,n,n,n): 定义2D转换，使用六个值的矩阵。

    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定义3D转换，使用16个值的4x4矩阵。

    translate(x,y): 定义2D位移转换。

    translate3d(x,y,z): 定义3D位移转换。

    translateX(x): 定义位移转换，只是用X轴的值。

    translateY(y): 定义位移转换，只是用Y轴的值。

    translateZ(z): 定义3D位移转换，只是用Z轴的值。

    scale(x,y): 定义2D缩放转换。

    scale3d(x,y,z): 定义3D缩放转换。

    scaleX(x): 通过设置X轴的值来定义缩放转换。

    scaleY(y): 通过设置Y轴的值来定义缩放转换。

    scaleZ(z): 通过设置Z轴的值来定义3D缩放转换。

    rotate(angle): 定义2D旋转，在参数中规定角度。

    rotate3d(x,y,z,angle): 定义3D旋转。

    rotateX(angle): 定义沿着X轴的3D旋转。

    rotateY(angle): 定义沿着Y轴的3D旋转。

    rotateZ(angle): 定义沿着Z轴的3D旋转。

    skew(x-angle,y-angle): 定义沿着X和Y轴的2D倾斜转换。

    skewX(angle): 定义沿着X轴的2D倾斜转换。

    skewY(angle): 定义沿着Y轴的2D倾斜转换。

    perspective(n): 为3D转换元素定义透视视图。

Animation

    Animation让CSS拥有了可以制作动画的功能。使用CSS3的Animation制作动画我们可以省去复杂的js代码。

4、边框（border）

    CSS3新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以为元素添加阴影，border-image可以使用图片来绘制边框。IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。

5、阴影（Shadow） 

6、box-sizing

    box-sizing属性可设置的值有content-box、border-box和inherit。

    content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 (Element width = width + border + padding)，此属性表现为标准模式下的盒模型。

    border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 (Element width = width)，此属性表现为怪异模式下的盒模型。

7、文字效果

等.........

二、如何居中一个div（此处默认水平开始）

1、通过margin: 0 auto; text-align: center实现CSS水平居中。

2、通过display:flex实现CSS水平居中

3、通过display:table-cell和margin-left实现CSS水平居中。

4、通过position:absolute实现CSS水平居中。

5、通过display:inline-block和margin:0 auto实现CSS水平居中。

垂直居中

1、通过position:absolute，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了（margin设负值也可以单独拿出来，此处不举例说明）

2、通过display:flex实现CSS垂直居中

等.........

三、请简述盒模型

    盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

但是，盒模型有标准盒模型和IE的盒模型。点此查看更多

四、css优先级

1、从大到小

    内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素（类型）选择器 = 伪元素选择器

    !important 权重最高

五、清除浮动

1，父级div定义 height

    父级div手动定义height，就解决了父级div无法自动获取到高度的问题

2、结尾处加空div标签 clear:both

    添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

3、父级div定义 伪类:after 和 zoom

    浏览器支持好，不容易出现怪问题

4、父级div定义 overflow:hidden

    必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

六、margin重叠问题。

    1、相邻元素margin重叠

    2、父元素和子元素之间margin重叠

解决方案：

margin-top重叠

    1.给父元素添加overflow:hidden;

    2.给父元素添加border属性；

    3.在父元素中添加padding-top；

    4.在父元素和子元素之间添加空格文字图片等；

margin-bottom重叠

    1、和margin-top设置类似，另外还可以给父元素添加高度值；

关于margin值的计算

    1、如果两个margin都是正值，那么取margin值最大那个，例如父元素设置margin-top为20px，而子元素也设置了margin-top为50px，那么最终是以子元素的margin-top为准；

    2、如果两个margin值为一正一负，则最终的margin值以这两个margin值相加的结果为准；

    3、如果两个margin值都为负数，则取这两个负margin值中绝对值最大的那个负margin值为准；

七、css字体单位及应用场景

1、px

    px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

2、em

    em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

　　1. em的值并不是固定的；

　　2. em会继承父级元素的字体大小

3、rem（移动端）

    rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

    如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

4、vw、vh

    vw、vh、vmax、vmin这四个单位都是基于视口

    vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

    假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

    vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

    假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

    vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

5、%（百分比）

    一般来说就是相对于父元素

    1、对于普通定位元素就是我们理解的父元素

    2、对于position: absolute;的元素是相对于已定位的父元素

    3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

6、rpx（微信小程序）

    rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。所以在微信小程序中1rem=750/20rpx。

八、box-sizing的作用

    box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

    1、content-box  是默认值。

    如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

    2、border-box 

    告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。