Day4

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

1：通过绝对定位 

top：50%，margin-top：-元素一半的宽; 或者translateY（-50%）

2：通过弹性盒子

父元素：display：flex align-items：center 垂直居中  justify-content：center 水平居中

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

3：通过定位

top：0，bottom：0，margin：auto

二：图片懒加载的实现？

先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。

三：简述媒体查询的作用

根据屏幕的不同大小所进行相应的设置

四：css3 新增了哪些特性

1：border-radius:为元素添加圆角边框

2：box-shadow:添加阴影(水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，inset(内部阴影))

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

4：background-size:背景图片的尺寸

5：background-origin：规定background-position属性相对于什么位置来定位

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

7：linear-gradient()线性渐变  linear-gradient(方向, start-color, ..., last-color)

8：radial-gradient()径向渐变 background: radial-gradient(圆的类型 渐变的大小 at 渐变的位置, start-color, ..., last-color);

9：word-break：定义文本如何换行

10：word-wrap：允许长的内容可以自动换行

11：text-overflow：指定当文本溢出包含她的元素

12：text-shadow：文字阴影

13：transform(translate(位移距离)，rotate(旋转角度)，scale（缩放）)

14：transition：设置元素过渡效果

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

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

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

15：animate：为元素添加动画

animation-name：为@keyframes动画名称

animation-duration：动画指定需要多长时间完成

animation-timing-function：设置动画将如何完成一个周期

animation-delay：设置动画在启动前的延迟间隔

animation-iteration-count：定义动画的播放次数

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

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。该属性可重写该行为

@keyframes创建动画

五：display:none 和 visibility:hidden 的区别

 

本质区别：display：none不占据页面位置  visibility：hidden 占据页面位置

1.visibility具有继承性，其子元素也会继承此属性，若设置visibility:visible，则子元素会显示

2.visibility不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。

3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验

 

4. display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘 

六：6-less 的作用？Scss（sass），stylus 的作用

 stylus的基本教程：https://blog.csdn.net/lyt_angularjs/article/details/80457099

sass(scss) 、less、 stylus等都是css预处理器

　　

变量：sass(scss)，less，stylus等让人们收益的一个重要特性就是变量的引入，我们可以把经常使用的css属性值，定义成一个变量，然后通过变量名来引用他们。

　　sass(scss) 变量必须以$开头，变量和值之间用：隔开，如：

　　　　 $color:#fff；

　　　　h1{

　　　　　　border:1px solid $color

　　　　}

　　less变量必须以@开头，已经被赋值的变量及其他常亮（如像素，颜色等）都可以参与运算。

　　　　@color:#fff;

　　　　h1{

　　　　　　border:1px solid @color

　　　　}

　　stylus：可以以$开头或其他任何字符，但是不能以@开头。

　　　　$color = #ddd;

　　　　borderwidth = 1px;

　　　　h1{

　　　　　　border:borderwidth solid $color

　　　　}

 

嵌套：

　　sass(scss)，stylus，less等都支持嵌套

　　div {

　　　　ul{

　　　　　　li{

　　　　　　　　......

　　　　　　}

　　　　}

　　}

 

运算符：sass，less，stylus中都支持运算+ - * / %等。

　　　　body {

　　　　　　margin: (14px/2);

　　　　　　top: 50px + 100px; //150px 不能写100% - 10px sass stylus中不兼容 less中会计算成90%

　　　　　　right: 80 * 10%;

　　　　}

　　　　less中,calc以下两种方式都可以：

　　　　　　@width:10px;

　　　　　　calc(100% - @width)

　　　　　　calc(~"100% - 10px")

　　　　sass中，

　　　　　　cacl(100% - #{$width})

　　　　　　calc(100% - 10px)

　　　　stylus中：

　　　　　　calc(100% - 10px);

　　　　　　'calc(100% - %s)' % width;

　　　　　　'calc(100% - %s)' % width;

　　

区别：

　　1）编译环境不一样：

　　　　sass需要Ruby服务，是在服务端支持的

　　　　Less需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用less，编译成css，直接放到项目中。

　　　　stylus需要安装node，然后安装最新的stylus包即可。

　　2）变量符号不一样:

　　　　less是@， scss是stylus中的变量没有任何限制，可以stylus中的变量没有任何限制，可以开头，结尾的;可有可无，但变量名和变量值之间的=是需要的。stylus变量不要使用@符号开头。

　　　　变量的调用方法是完全相同的。

　　3）变量的作用域不一样

　　　　sass中，变量分为局部作用域（嵌套规则内定义的变量）和全局作用域（不在嵌套规则内定义的变量）

　　　　$width:3px; // 全局作用域

　　　　.message{

　　　　　　$width:2px; // 局部作用域

　　　　　　border:$width solid red;

　　　　}