day4

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

　　1.把元素变成定位元素

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

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

　　2.把元素变成定位元素

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

　　　　设置元素的相对于自身的偏移度为负50%

　　3.把元素变成定位元素

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

　　　　设置元素的margin样式值为 auto

2-图片懒加载的实现？

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

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

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，但是在网页中该占的位置还是占着。

　　　　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

　　　　}