4

1-如何设置一个元素垂直居中？
2-图片懒加载的实现？
3-简述媒体查询的作用
4-css3 新增了哪些特性
5-display:none 和 visibility:hidden 的区别
6-less 的作用？Scss（sass），stylus 的作用？
1-

元素被设置了宽高
.利用绝对定位
.先把元素的左上角定位到中央点，在向左和上移动自身宽高的一半（使用margin）
.先把元素的左上角定位到中央点，在向左和上移动自身宽高的一半（使用transform平移）
先把元素的左上角定位到中央点，在向左和上移动自身宽高的一半（使用calc计算）
如果有父元素，可以用flex弹性模型
如果没有固定宽高
transform支持百分比
.如果有父元素，依然可以用flex弹性模型

2-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="images/loading.gif" data-src="images/1.png">
<img src="images/loading.gif" data-src="images/2.png">
<img src="images/loading.gif" data-src="images/3.png">
<img src="images/loading.gif" data-src="images/4.png">
<img src="images/loading.gif" data-src="images/5.png">
<img src="images/loading.gif" data-src="images/6.png">
<img src="images/loading.gif" data-src="images/7.png">
<img src="images/loading.gif" data-src="images/8.png">
<img src="images/loading.gif" data-src="images/9.png">
<img src="images/loading.gif" data-src="images/10.png">
<img src="images/loading.gif" data-src="images/11.png">
<img src="images/loading.gif" data-src="images/12.png">
<script>
function throttle(fn, delay, atleast) {
var timeout = null,//进行去抖处理
startTime = new Date();
return function() {
　　var curTime = new Date();
　　　　clearTimeout(timeout);
　　　　 if(curTime - startTime >= atleast) {
　　 fn();
　　 startTime = curTime;
　　　　}else {
　　　　 timeout = setTimeout(fn, delay);
　　　　}
}
}
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
　　　　var seeHeight = document.documentElement.clientHeight;
　　　　 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
　　　　 for(var i = n; i < len; i++) {
　　　　 if(images[i].offsetTop < seeHeight + scrollTop) {
　　　　 if(images[i].getAttribute('src') === 'images/loading.gif') {
　　　　　　 images[i].src = images[i].getAttribute('data-src');
　　　　 }
　　　　　　 n = n + 1;
　　　　}
　　　　}
}
}
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false)
　　
</script>
</body>
</html>

3-

针对不同屏幕尺寸设置不同的样式

4-

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-

visibility: hidden----将元素隐藏，bai但是在网页中该du占的位置还是占着。

display: none----将元素的显zhi示设为无，即在网页中不占任何的位置。

6-

sass(scss) 、less、 stylus等都是css预处理器

 

 

 

 

 

 

posted @ 2021-03-07 20:17  12138xx  阅读(76)  评论(0)    收藏  举报