设置一个元素垂直居中

1、如何设置一个元素垂直居中？

　　1、如果是单行文本  设置line-height等于height 实现垂直居中

　　2、如果是高度已知的元素，并且还要使用绝对定位position:absolute，使top:50%,margin-top:元素一半高度的负值。

　　3、给元素开启绝对定位，设置元素的margin:auto , top :0 , bottom:0 ;

2、图片懒加载的实现

　　1、给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-src），
监听scroll事件，当图片出现在可视区时，将data-src值赋值给src，加载图片，在图片未加载时，用alt 属性，在图像无法显示时的替代文本  imgs[i].src = imgs[i].getAttribute('data-src');

3、简述媒体查询的作用

　　1、针对不同的屏幕尺寸设置不同的样式，特别是针对于响应式页面非常有用。语法：@media screen and (媒体特征) {自己的样式}


　　例：@media screen and(max-width:900px){

　　　　　　body{background-color : red}

　　　　}

　　代码的意思是当媒体类型小于或者等于指定宽度时body的样式生效

　　2、媒体查询可以查询当前属于哪种设备，让网页能够在不同的设备下正常预览，媒体查询将不同的设备划分为不同的类型(例如：all 所有的设备  print 打印设备  screen 电脑屏幕，平板电脑，智能手机)，可以设置不同的媒体特征(宽高 最大宽度 最大高度 最小宽度 最小高度 横竖屏模式)，媒体查询的语法关键字，目的是将媒体类型和媒体特征连接到一块，进行设备检测(and 将多个媒体特性连接到一块，相当于且  not 排除某个媒体特性 相当于非  only指定某个特定的媒体类型)

4、css3新增了哪些特征

　　1、边框  border-radius:为元素设置圆角边框

　　2、阴影  box-shadow :向盒子添加一个或者多个阴影 

　　　　语法box-shadow ：水平位移  垂直位移  模糊半径  阴影颜色

　　3、边框图像：border-image:设置边框图像

　　　　　　　　　border-image-source:边框的图片路径

　　　　　　　　　border-image-slice:图片边框向内偏移

　　　　　　　　　border-image-width:图片边框的宽度

　　　　　　　　　border-image-outset:边框图像区域超出边框的量

　　　　　　　　　border-image-repeat:图像边框是否应该平铺(repeate)、铺满(round)或者拉伸(stretch)

　　4、background-size:背景图片尺寸

　　5、渐变background:linear-gradient(方向(to right 从左向右渐变   to top 从下向上渐变),开始颜色，结束颜色)线性渐变

　　6、径向渐变 background:radial-gradient(圆的类型（ellipse:默认椭圆形   circle 圆形）  渐变的大小  at  渐变的位置  ， 开始颜色 ，结束颜色)

　　　　渐变的大小：farthest-corner(默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

　　　　　　　　　　closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
　　　　　　　　　　closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
　　　　　　　　　　farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

 　　7、word-break定义如何换行:normal 使用浏览器默认的换行规则  

　　　　　　　　　　　　　　　break-all  允许在单词内换行

　　　　　　　　　　　　　　　keep-all  只能在半角空格或连字符处换行

　　8、word-wrap允许长的内容可以自动换行：normal  只在允许的断字点换行（浏览器保持默认处理）

　　　　　　　　　　　　　　　　　　　　:break-word  在长单词或URL地址内进行换行

　　9、text-shadow :文字阴影     

　　　　　　　　语法：text-shadow :水平位移  垂直位移  [模糊半径   阴影颜色] ;

　　10、transform:应用于元素的2D或3D转换。允许将元素旋转，缩放，移动，倾斜等。　　

　　2D转换方法

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

　　　　translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。
　　　　translateX(n)：指定元素在X轴中的位移。
　　　　translateY(n)：指定元素在Y轴中的位移。
　　　　scale(n)：定义 2D 缩放转换。
　　　　scaleX(n)：定义 X 轴方向的缩放转换。
　　　　scaleY(n)：定义 Y 轴方向的缩放转换。

　　3D转换方法

　　　　　　translate3d(x,y,z)：指定元素在三维空间中的位移。X轴方向向右，Y轴方向向下，Z轴方向向你。
　　　　　　translateX(x)：指定元素在X轴中的位移。
　　　　　　translateY(y)：指定元素在Y轴中的位移。
　　　　　　translateZ(z)：指定元素在Z轴中的位移。

　　　　　　scale3d(x,y,z)：定义 3D 缩放转换。
　　　　　　scaleX(x)：通过设置 X 轴的值来定义缩放转换。
　　　　　　scaleY(y)：通过设置 Y 轴的值来定义缩放转换。
　　　　　　scaleZ(z)：通过设置 Z 轴的值来定义缩放转换。

　　　　　　rotate3d(x,y,z,angle)：定义 3D 旋转。
　　　　　　rotateX(x)：定义沿着 X 轴的 3D 旋转。
　　　　　　rotateY(y)：定义沿着 Y 轴的 3D 旋转。
　　　　　　rotateZ(z)：定义沿着 Z 轴的 3D 旋转。

　　过渡

　　　　　　transition:设置元素过渡效果

　　　　　　　　transition-property:过渡属性名

　　　　　　　　transition-duration:规定完成过渡效果需要花费的时间

　　　　　　　　transition-timing-function:指定切换效果的速度

　　　　　　　　transition-delay:指定何时将开始切换效果

　　动画

　　　　@Keyframes规则：使用@keyframes规则，你可以创建动画。

　　　　语法：@keyframes animationname {keyframes-selector {css-styles;}}

　　　　　　animation:为元素添加动画，是一个简写属性。　　

　　　　　　　　animation-name：为 @keyframes 动画名称。
　　　　　　　　animation-duration：动画指定需要多少秒或毫秒完成。
　　　　　　　　animation-timing-function：设置动画将如何完成一个周期。　

　　　　　　　　animation-delay：设置动画在启动前的延迟间隔，可以是秒或毫秒。
　　　　　　　　animation-iteration-count：定义动画的播放次数。

　　　　　　　　animation-direction：指定是否应该轮流反向播放动画。

　　11、transform-origin：允许更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素可以更改元素的Z轴。

　　　　语法：transform-origin: x-axis y-axis z-axis;

　　12、transform-style：指定嵌套元素是怎样在三维空间中呈现。

　　　　　　　　：flat 　　所有子元素在2D平面呈现
　　　　　　　　：preserve-3d 　　所有子元素在3D空间中呈现

5、display:none 和 visibility:hidden的区别

　　display:none    不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

　　visible:hidden　　使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

6、less的作用？scss(sass),stylus的作用？

　　less sass stylus 预处理器是一种语言,用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。

　　 Sass 和 Less 都使用的是标准的 CSS 语法，因此可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。

　　Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

　　在less文件中，当一个值需要反复使用时，可以通过@符号定义变量。已经被赋值的变量以及其他的常量（如像素、颜色等）都可以参与运算。　

　　stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在stylus中不能用@开头

　　如果用 CSS 预处理器，就可以少写很多单词，而且父子节点关系一目了然，并且sass，Less，stylus都支持。在 CSS 预处理器中还是可以进行样式的计算

　　当需要为多个元素定义相同样式的时候可以考虑使用继承的做法.