day4

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

1. 设置元素为定位元素,设置元素定位位置,上下左右都为0,设置margin属性为auto;

2. 设置元素为定位元素,设置元素定位位置top,left为50%,设置元素左,上外边距为宽高的-1/2;

3. 设置元素为定位元素,设置元素定位位置为50%,设置元素偏移量为-50%(元素尺寸的一半).

2- 图片懒加载的实现:

懒加载定义:

当一个页面有很多图片时,先加载用户看到的图片,随着页面的滚动加载所需要的图片.

懒加载作用:

减少或者延迟请求次数,减轻浏览器压力,提升用户体验.

实现方法:

var imgs = document.querySelectorAll('img');
 
        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }
 
        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }
 
        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
</script>

3- 简述媒体查询的作用:

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

4- css3 新增了哪些特性:

CSS3选择器

CSS3边框(Borders)

CSS3背景

CSS3渐变

CSS3文本效果

CSS3字体

CSS3转换和变形

2D转换方法

3D转换属性

CSS3过度

CSS3动画

CSS3多列

CSS3盒模型

CSS3伸缩布局盒模型(弹性盒子)

CSS3多媒体查询

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

1. 元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失;

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

2. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来;

3. visibility: hidden不会影响计数器的计数;

4. CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验.

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

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

2. Sass : (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

3. Scss : (sassy css) ,Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面，因此 sass 语法进行了改良，Sass 3 就变成了 Scss(sassy css)。与原来的语法兼容，只是用 {} 取代了原来的缩进。

4. Less ：也是一种动态样式语言. 对 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. Less 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

Sass / Scss与 Less , Stylus区别：

编译环境不一样：

Sass 的安装需要 Ruby 环境，是在服务端处理的，而 Less 是需要引入 less.js 来处理 Less 代码输出 css 到浏览器，也可以在开发环节使用 Less，然后编译成 css 文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app 这样的工具，也有在线编译地址。

Sass 和 SCSS 区别：

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以 “.sass” 后缀为扩展名，而 SCSS 是以 “.scss” 后缀为扩展名；
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号 ({}) 和分号 (;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。