day4

1-如何设置一个元素垂直居中？
使用margin 外边距或者padding 内边距来实现元素在垂直方向居中显示.具体可以给父元素设置一个垂直方向的padding 内边距;
给需要垂直居中的子元素设置垂直方向的外边距.其次如果这个需要垂直居中的元素是一个单行文本,则可以使用行高等于标签高度的方式来实现
使用css3 中的flex 布局, 使用align-items:center 设置元素在侧轴(垂直方向)居中对齐.
使用绝对定位的方式, 设置元素在相对定位的父元素中垂直对齐.
2-图片懒加载的实现？
img 标签在加载图片的时候, 是通过请求src属性所指向的文件来加载图片的, 那如果img 标签本身没有src属性的话, 那么img标签在渲染的时候,就不会加载图片.
所以图片懒加载的原理就是将img 标签的src属性暂时先改成一个自定义的属性, 这样页面在加载时就会不去自动加载图片,
当img标签所在区域进入屏幕可视区域后, 从存放图片路径的自定义属性中获取图片地址,并动态的设置给对应img标签的src属性,
这样浏览器就会自动请求对应的图片资源, 也就实现了所谓的图片懒加载.
图片懒加载的插件有很多,大部分是基于jquery的, 比如jquery.lazyload. 当然vue中也有实现了图片懒加载的插件, 比如vue-lazyload, vue的组件库中也有图片懒加载的组件.
3-简述媒体查询的作用
针对不同屏幕尺寸设置不同的样式
<link href="../3.css" media="screen and (max-width: 800px) ">
4-css3 新增了哪些特性
媒体查询(@media);

transfrom系列: translate 平移, scale 缩放,rotate 旋转

动画(animate);

过渡效果(transition);

flex弹性(伸缩)布局;

盒模型计算方式:box-sizing:border-box;

线性渐变(linear-gradient),径向渐变;

伪元素, 文字阴影(text-shadow), 边框阴影(box-shadow), 圆角(border-radius)
5-display:none 和 visibility:hidden 的区别
display: none是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；
visibility: hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility: visible，可以让子孙节点显示。
6-less 的作用？Scss（sass），stylus 的作用？
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，
这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
Stylus 是一个高效、动态以及丰富的 CSS 预处理器。它同时支持缩进的和通俗的两种风格的 CSS 语法风格。