day4
1- 如何设置一个元素垂直居中？
1. 设置元素为定位元素,设置元素定位位置,上下左右都为0,设置margin属性为auto;
2. 设置元素为定位元素,设置元素定位位置top,left为50%,设置元素左,上外边距为宽高的-1/2;
3. 设置元素为定位元素,设置元素定位位置为50%,设置元素偏移量为-50%(元素尺寸的一半).
2- 图片懒加载的实现:
懒加载定义:
当一个页面有很多图片时,先加载用户看到的图片,随着页面的滚动加载所需要的图片.
懒加载作用:
减少或者延迟请求次数,减轻浏览器压力,提升用户体验.
实现方法:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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，两者之间不同之处有以下两点：
- 文件扩展名不同，Sass 是以 “.sass” 后缀为扩展名，而 SCSS 是以 “.scss” 后缀为扩展名；
- 语法书写方式不同，Sass 是以严格的 缩进式语法规则 来书写，不带大括号 ({}) 和分号 (;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
