Day4

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

　　margin： 0 atuo

　　弹性布局

　　display: flex;
　　justify-content: center;
　　align-items: center;

2-图片懒加载的实现？

　　页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片（也就没有请求咯，也就提高性能咯），一旦通过javascript设置了图片路径，浏览器才会送请求。

　　路径存在元素的“data-url”属性里，要用的时候就取出来，再设置；

3-简述媒体查询的作用

　　针对不同屏幕尺寸设置不同的样式

4-css3 新增了哪些特性

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

       box-shadow             边框阴影 

　　border-image　　　设置边框图像

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

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

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

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

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

　　background-size　　　背景图片的尺寸

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

　　linear-gradient()　　　 线性渐变

　　radial-gradient()　　　 径向渐变

　　transform 　　　　　　应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等

　　transition 　　　　　　设置元素当过渡效果

　　transition-duration         规定完成过渡效果需要花费的时间（以秒或毫秒计）

　　animation　　　　　　 为元素添加动画

　　　　　　　　　　指定动画名称：animation-name:
　　　　　　　　　　设置动画的总耗时：animation-duration:2s
　　　　　　　　　　动画次数：animation-iteration-count:infinite可以指定次数，也可以无限循环
　　　　　　　　　　时间函数：animation-timing-function:linear;

　　@font-face{ } 字体图标

 

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

　　①作用不同 ：

　　　　　　 visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

　　　　　　 display: none----将元素的显示设为无，即在网页中不占任何的位置。

       ②使用后HTML元素有所不同：

　　　　　　visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值

　　　　　　display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”

　　③定义不同：

　　　　　　visibility 属性指定一个元素是否是可见的。

　　　　　　display这个属性用于定义建立布局时元素生成的显示框类型。