1月30

Day4
1-如何设置一个元素垂直居中？
1可以根据定位position ：top50%然后减去元素本身的宽度
2可以使用弹性布局.{
background-color: #FF8C00;
width: 300px;
height: 300px;
display: flex;//flex布局
justify-content: center;//使子项目水平居中
align-items: center;//使子项目垂直居中
}
2-图片懒加载的实现？
先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,
然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。
达到懒加载的效果。
<style>
.container{
max-width: 800px;
margin:0 auto;
}
.container:after{
content:"";
display: block;
clear:both;
}
.container img{
width:50%;
height:260px;
float:left;
}
</style>
</head>
<body>
<div class="container">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=951914923,777131061&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=637435809,3242058940&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3990342075,2367006974&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1813891576,1754763093&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=1878067600,3935137756&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=85690711,3884201894&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img0.imgtn.bdimg.com/it/u=1846695025,2515725663&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=346230831,1833217134&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=3478148120,2683867435&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=2298824648,1812234339&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=4201594846,4178139206&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=484389598,819397330&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3729466012,914166979&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=1831250492,3489827059&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=779005622,2247570143&fm=200&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1968229118,3512711019&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=1088428253,1150170159&fm=200&gp=0.jpg">
</div>

// 一开始没有滚动的时候，出现在视窗中的图片也会加载
start();

// 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
var clock; //函数节流
$(window).on('scroll',function(){
if(clock){
clearTimeout(clock);
}
clock = setTimeout(function(){
start()
},200)
})

function start(){
$('.container img').not('[data-isLoading]').each(function () {
if (isShow($(this))) {
loadImg($(this));
}
})
}

// 判断图片是否出现在视窗的函数
function isShow($node){
return $node.offset().top <= $(window).height()+$(window).scrollTop();
}

// 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
function loadImg($img){
$img.attr('src', $img.attr('data-src'));

// 已经加载的图片，我给它设置一个属性，值为1，作为标识
// 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
$img.attr('data-isLoading',1);
}

</script>
3-简述媒体查询的作用
针对不同屏幕尺寸设置不同的样式
4-css3 新增了哪些特性
border-radius：为元素添加圆角边框

box-shadow盒子阴影：水平阴影h-shadow 垂直阴影v-shadow 阴影的大小spread 模糊距离blur 颜色color
text-shadow: x, y ,文字阴影：水平阴影h-shadow 垂直阴影v-shadow 模糊距离blur 颜色

background-rapeat:
round 将图片进行缩放，然后再平铺
space图片不会缩放，图片之间有间距

background-attachment:
fixed:背景图片固定位置不变
scroll:背景图片也会滚动

background-size背景图片的大小
auto 图片的原始大小
number 具体的数值
precent 百分比

background-origin:设置背景的填充位置，设置背景原点
border-box 背景从border位置填充
padding-box 从padding位置填充
content-box 从content位置填充

background-clip:设置内容的裁剪。控制显示内容
border-box 显示border及以内的内容
padding-box 显示padding以及内的内容
content-box 显示content及以内的内容

线性渐变
渐变不是单一的颜色，使用background属性实现的
background:linear-gradient(to right,red,blue);
linear-gradient:方向起始颜色终点颜色
方向：
to top 0deg
to right 90deg
to left
to bottom
起始颜色：也可以指定位置
终点颜色：可以添加多个颜色

径向渐变
radial-gradient(形状，大小，坐标)
shape:形状
circle 圆形 ellipse适配当前形状

size 大小
closest side
farthest side
closest corner
farthest corner(默认)

position:位置，坐标默认在元素中心可以写具体的值，也可以写关键字
值可以写一个，另一个方向默认center

重复渐变: background: repeating-radial-gradient

图片边框：
border-image-source:边框图片的路径，默认值填充到四个角
border-image-slice:设置四个方向上的剪切距离 file填充
border-image-width:边框图片的宽度，如果没有设置默认是图片原始边框的宽度

边框图片本质上是一个背景，不会影响元素内容的
元素内容受border和padding的影响

border-image-outset:扩展
border-image-repeat:平铺

过渡效果：transition-property:写属性名
过渡效果耗时transition-duration 单位S
过渡时间函数，控制运动速度 transition-timing-function
linear 匀速变化
ease 先慢再快再慢
过渡效果延时 transition_delay
过渡效果完成之后，默认回到初始状态

2D/3D变换通常结合过渡效果一起使用
transform 变换
.translate()位移
如果只有一个参数代表x方向
如果两个参数x和y
参照元素的左上角

rotate（）旋转
旋转角度值
旋转围绕z轴旋转单位deg

scale()
一个参数x和y方向缩放同样的倍数
两个参数分别代表x和y

skew()斜切。有形状变化
1.一个值，x方向
2.两个值，分别代表x和y

设置元素的旋转轴心
关键词：top/right/bottom/left/center
transform-origin:

3D translate3D必须三个值

立方体：transform-style:设置元素是否保留3D效果，需要在父元素中设置
flat 平面
preserve-3d立体

动画：关键帧动画，可以添加多个关键帧，过渡效果只有开始和结束
补间动画中间过程和状态自动补全，系统计算

关键字：@key-frames创建动画
状态form to

指定动画名称：animation-name:
设置动画的总耗时：animation-duration:2s
动画次数：animation-iteration-count:infinite可以指定次数，也可以无限循环
时间函数：animation-timing-function:linear;

交替动画animation-direction:alternate-reverse;
@font-face{ } 字体图标

5-display:none 和 visibility:hidden 的区别
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流
6-less 的作用？Scss（sass），stylus 的作用？
less是一门 CSS 预处理语言，它扩充了 CSS 语言,使用@申明变量
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Stylus它的语法和 Sass 有一点点类似，但是最大的特点便是没有分号，没有冒号，没有大括号，通过缩进和换行。一切的定义方式都是按照编程的风格定义的，像编程一样的函数调用，像编程一样的变量定义，像编程一样的书写方式。

posted @ 2021-01-30 22:54 欢的大叔阅读(52) 评论(0) 收藏举报

刷新页面返回顶部

欢的大叔

1月30

公告