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,两者之间不同之处有以下两点:

      1. 文件扩展名不同,Sass 是以 “.sass” 后缀为扩展名,而 SCSS 是以 “.scss” 后缀为扩展名;
      2. 语法书写方式不同,Sass 是以严格的 缩进式语法规则 来书写,不带大括号 ({}) 和分号 (;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
posted @ 2021-03-04 22:18  非自然数  阅读(35)  评论(0编辑  收藏  举报