04

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

第一种方法:

div.box{

 weight:200px;

 height:400px;

 <!--把元素变成定位元素-->

 position:absolute;

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

left:50%;

top:50%;

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

margin-left:-100px;

margin-top:-200px;

}

 

 *兼容性好;缺点:必须知道元素的宽高

 第二种方法：

div.box{
weight:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、左都为50%-->
left:50%;
top:50%;
<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

transform:translate(-50%,-50%);
}

*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

第三种方法

div.box{
width:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、下、左、右都为0-->
left:0;
right:0;
top:0;
bottom:0;
<!--设置元素的margin样式值为 auto-->
margin:auto;
}

*兼容性较好，缺点:不支持IE7以下的浏览器

2-图片懒加载的实现？

1、什么是懒加载

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

 2、为什么要引入懒加载

懒加载（LazyLoad）是前端优化的一种有效方式，可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）

 3、加载实现的原理

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

 4、实现思路

如果滚动的大小和屏幕高度之和大于元素到顶部的距离，设置一个定时器，制造懒加载的延迟加载的效果，也就是说，当我们滑动滚动条，看见图片的时候，就让它加载出来

 5、懒加载的实现（jquery）

 1 <img src="/image/8.jpg" data-src="/image/1.png" alt="">
 2 
 3     <img src="/image/8.jpg" data-src="/image/2.png" alt="">
 4 
 5     <img src="/image/8.jpg" data-src="/image/3.png" alt="">
 6 
 7     <img src="/image/8.jpg" data-src="/image/4.png" alt="">
 8 
 9     <img src="/image/8.jpg" data-src="/image/5.png" alt="">
10 
11     <img src="/image/8.jpg" data-src="/image/6.png" alt="">
12 
13     <img src="/image/8.jpg" data-src="/image/7.png" alt="">
14 
15 $(window).scroll(handleScroll)
16 
17     function handleScroll() {
18 
19         let imgs = $('img[data-src]');
20 
21         console.log(imgs)
22 
23         //获取滚动的值
24 
25         let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTop
26 
27         console.log(bodyScrollHeight)
28 
29         //获取可视高度(屏幕高度)
30 
31         let windowHeight = window.innerHeight
32 
33         console.log(windowHeight)
34 
35         for (let i = 0; i < imgs.length; i++) {
36 
37              // 获取元素到浏览器顶部的距离
38 
39             let imgHeight = $(imgs[i]).offset().top
40 
41            // console.log(imgHeight)
42 
43            // 如果滚动的大小和屏幕高度之和大于元素到顶部的距离
44 
45             if (imgHeight < windowHeight + bodyScrollHeight) {
46 
47                 //setTimeout:设置一个定时器，制造懒加载的延迟加载的效果
48 
49                 setTimeout(function () {
50 
51                     $(imgs).eq(i).attr('src', $(imgs).eq(i).attr('data-src'))
52 
53                 }, 1000)
54 
55             }
56 
57         }
58 
59     }
60 
61     handleScroll()

原生

  1 <!DOCTYPE html>
  2 
  3 <html lang="en">
  4 
  5 <head>
  6 
  7     <meta charset="UTF-8">
  8 
  9     <title>Lazyload</title>
 10 
 11     <style>
 12 
 13     img {
 14 
 15         display: block;
 16 
 17         margin-bottom: 50px;
 18 
 19         height: 200px;
 20 
 21     }
 22 
 23     </style>
 24 
 25 </head>
 26 
 27 <body>
 28 
 29     <img src="images/loading.gif" data-src="images/1.png">
 30 
 31     <img src="images/loading.gif" data-src="images/2.png">
 32 
 33     <img src="images/loading.gif" data-src="images/3.png">
 34 
 35     <img src="images/loading.gif" data-src="images/4.png">
 36 
 37     <img src="images/loading.gif" data-src="images/5.png">
 38 
 39     <img src="images/loading.gif" data-src="images/6.png">
 40 
 41     <img src="images/loading.gif" data-src="images/7.png">
 42 
 43     <img src="images/loading.gif" data-src="images/8.png">
 44 
 45     <img src="images/loading.gif" data-src="images/9.png">
 46 
 47     <img src="images/loading.gif" data-src="images/10.png">
 48 
 49     <img src="images/loading.gif" data-src="images/11.png">
 50 
 51     <img src="images/loading.gif" data-src="images/12.png">
 52 
 53     <script>
 54 
 55     function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
 56 
 57         var timeout = null,//进行去抖处理
 58 
 59         startTime = new Date();
 60 
 61         return function() {
 62 
 63            　　var curTime = new Date();
 64 
 65         　　　　clearTimeout(timeout);
 66 
 67        　　　　 if(curTime - startTime >= atleast) {
 68 
 69         　　    fn();
 70 
 71            　　 startTime = curTime;
 72 
 73         　　　　}else {
 74 
 75            　　　　 timeout = setTimeout(fn, delay);
 76 
 77         　　　　}
 78 
 79         }
 80 
 81     }
 82 
 83     function lazyload() {
 84 
 85         var images = document.getElementsByTagName('img');
 86 
 87         var len    = images.length;
 88 
 89         var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历       
 90 
 91         return function() {
 92 
 93         　　　　var seeHeight = document.documentElement.clientHeight;
 94 
 95        　　　　 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 96 
 97      　　　　   for(var i = n; i < len; i++) {
 98 
 99            　　　　 if(images[i].offsetTop < seeHeight + scrollTop) {
100 
101                　　　　 if(images[i].getAttribute('src') === 'images/loading.gif') {
102 
103                　　　　　　  images[i].src = images[i].getAttribute('data-src');
104 
105                　　　　 }
106 
107            　　　　　　 n = n + 1;
108 
109             　　　　}
110 
111         　　　　}
112 
113         }
114 
115     }
116 
117     var loadImages = lazyload();
118 
119     loadImages();          //初始化首页的页面图片
120 
121     window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
122 
123 　　//函数节流（throttle）与函数去抖（debounce）处理,
124 
125 //500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数
126 
127     </script>
128 
129 </body>
130 
131 </html>

3-简述媒体查询的作用

media媒体查询可使用在不同的设备及媒体上运行不同的css代码，

如:打印设备，屏幕的大小 ，屏幕的方向
media媒体查询是一个条件，当符合条件时，则运行相应的css代码

4-css3 新增了哪些特性

1、CSS3选择器

2、CSS3边框(Borders)

3、CSS3背景

4、CSS3渐变

5、CSS3文本效果

6、CSS3字体

7、CSS3转换和变形

1）2D转换方法

2）3D转换属性

8、CSS3过度

9、CSS3动画

10、CSS3多列

11、CSS3盒模型

12、CSS3伸缩布局盒模型(弹性盒子)

13、CSS3多媒体查询

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

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3、还有回流问题，display:none是会有回流，但是visibility: hidden; 是不会有回流的

 

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

sass/scss

SASS 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，sass 不兼容 css 代码

Sass3 就变成了Scss(sassy css) 与原来的语法兼容，只是用{}取代了原来的缩进

sass 的运行 依赖于 ruby 环境（compass 将 sass 编译为 css）

现在可用 node-sass 来编译 sass/scss 文件

 node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具

原始的sass 是用 ruby 编写的，所以需要 ruby 环境，libSass 是原始sass引擎的一个 c/c++ 接口，使用它编译sass不依赖于ruby，可以使用其他语言使用libSass

node-sass

ruby-sass与libsass的区别

安装node-sass时，会去GitHub 下载一个 .node的文件而这个文件托管在墙外的服务器上，所以失败了 node-sass安装失败解决方案

以 .sass 或 .scss 为文件后缀名称（现在一般都是用 scss）

less

less 2009年出现，受sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了sass演变到了scss的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。

less 可以使用 less.js 在浏览器运行时中解析 less 代码

也可以在 node环境中 安装 less，提前编译 less 文件 npm install -g less &lessc styles.less styles.css (可以加参数控制编译后的css排版及压缩)

以 .less 为文件后缀名称

stylus

Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，由 TJ 大神开发

安装及编译 npm install stylus -g & stylus src/ (可以加参数控制编译后的css排版及压缩)

以 .styl 为文件后缀

posted @ 2021-02-20 18:52  路~  阅读(72)  评论(0)    收藏  举报