day4

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

1.把元素变成定位元素

设置元素的定位位置，距离上、左都为50%

设置元素的左外边距、上外边距为宽高的负1/2

2.把元素变成定位元素

        设置元素的定位位置，距离上、左都为50%

设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)

3.把元素变成定位元素

设置元素的定位位置，距离上、下、左、右都为0

设置元素的margin样式值为 auto

2-图片懒加载的实现？

        1.懒加载

将图片src先赋值为一张默认图片，当用户滚动滚动条到可视区域图片的时候，再去加载后续真正的图片

2.实现原理

先将img标签中的src链接设置为空，将真正的图片链接放在自定义属性（data-src），当js监听到图片元素进入到可视窗口的时候，将自定义属性中的地址存储到src中，达到懒加载的效果

3.实现

   <script>
            // 一开始没有滚动的时候，出现在视窗中的图片也会加载
            start();
            // 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
            var clock; //函数节流
            $(window).on('scroll',function(){
                if(clock){
                    clearTimeout(clock);
                }
                clock = setTimeout(function(){
                    start()
                },200)
            })   
            function start(){
                 $('.container img').not('[data-isLoading]').each(function () {
                    if (isShow($(this))) {
                        loadImg($(this));
                    }
                })
            }
            // 判断图片是否出现在视窗的函数
            function isShow($node){
                return $node.offset().top <= $(window).height()+$(window).scrollTop();
            }

            // 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
            function loadImg($img){
                    $img.attr('src', $img.attr('data-src'));

                    // 已经加载的图片，我给它设置一个属性，值为1，作为标识
                    // 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
                    $img.attr('data-isLoading',1);
            }

        </script>

3-简述媒体查询的作用

media媒体查询可使用在不同的设备及媒体上运行不同的css代码，
media媒体查询是一个条件，当符合条件时，则运行相应的css代码

浏览器支持

        IE5.5/6/7不支持在@import中使用媒体类型

        Safari/firefox只支持all,screen,print三种类型(包括iphone)

        Opera 完全支持

        Opera mini  支持handheld，未指定则使用screen

        Windows Mobile系统中的IE支持handheld，其它支持不明

4-css3 新增了哪些特性

border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性；

box-shadow：向框添加一个或多个阴影。
语法：box-shadow: 水平位移 垂直位移 [模糊半径 阴影尺寸 阴影颜色 inset(内部阴影)];

border-image：设置边框图像，该属性是一个简写属性，用于设置以下属性：

background-size：背景图片的尺寸。

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

1、作bai用不同

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

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

2、使用后HTML元素有所不同

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

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

3、定义不同
visibility 属性指定一个元素是否是可见的。

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

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

sass：是一种动态样式语言，比css多出了很多功能（如变量，计算，混入，颜色处理，函数，继承， 嵌套等），更易阅读，扩展名.sass

　　　需要严格的遵循缩进的语法规则，不带{}和分号；

　　　　h1

　　　　　　color:red;

scss：是sass语法进行改良后的语法，兼容原来的语法，只是将原来的缩进排版方式改成了我们熟悉的{}，扩展名 .scss

　　　　h1{

　　　　　　color:red

　　　　}

less：Less也是一种动态语言，受sass影响很大，对css赋予了动态语言的特性，如变量，计算，继承，函数等。Less既可以在客户端运行（支持IE6+），也可以在服务端运行（借助nodejs）

　　h1{

　　　　color:red

　　}

stylus：主要是给node项目进行css预处理支持，人气不如前两个。扩展名是.styl

　　　　同时支持缩进和css常规书写方式，如下两种方式都是可以的

　　　　h1

　　　　　　color:red

　　　　h1{

　　　　　　color:red

　　　　}

变量：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

　　　　}