元素垂直居中、图片懒加载、媒体查询、css3的特性、等

时间：2021-01-30 17:37:31 阅读：23 评论：0 收藏：0 [点我收藏+]

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

　　line-height:元素的高度

2-图片懒加载的实现？

　　原理:先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。

　　代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <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>

        <script>

            // 一开始没有滚动的时候，出现在视窗中的图片也会加载
            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>
</body>
</html>

3-简述媒体查询的作用

　　1、媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

　　2、如果没有CSS3的媒体查询模块，就不能针对设备特性，如视口宽度设置特定的CSS样式。媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。

　　3、知识拓展：该段媒体查询的意思是：当设备屏幕宽度在320px——720px之间时，媒体查询中body的背景色（background-color:red;）会重叠之前的body背景色，当设备屏幕宽度在320px以下时，媒体查询中body的body背景色（background-color:blue;）会重叠之前的body背景色。

4-css3 新增了哪些特性

　　border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性；

　　box-shadow: 水平位移垂直位移 [模糊半径阴影尺寸阴影颜色 inset(内部阴影)];

　　border-image：设置边框图像，该属性是一个简写属性，用于设置以下属性：

border-image-source：边框的图片的路径；
border-image-slice：图片边框向内偏移；
border-image-width：图片边框的宽度；
border-image-outset：边框图像区域超出边框的量；
border-image-repeat：图像边框是否应平铺(repeate)、铺满(round)或拉伸(stretch)。

　　background-size：背景图片的尺寸。

　　linear-gradient()：线性渐变。
　　语法：background: linear-gradient(方向, start-color, ..., last-color);

　　radial-gradient()：径向渐变。
　　语法：background: radial-gradient(圆的类型渐变的大小 at 渐变的位置, start-color, ..., last-color);

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

　　二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。 display:none; 使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”; visibility:hidden; 使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值

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

　　Less 的基本语法属于「CSS 风格」

Sass、Stylus 相比之下激进一些，利用缩进、空格和换行来减少需要输入的字符

不过区别在于 Sass、Stylus 同时也兼容「CSS 风格」代码

Less & SCSS:

.box { display: block; }

Sass:

.box display: block

Stylus:

.box display: block

注:后面的 Sass 代码会用被更多人接受的 SCSS 风格给出

嵌套语法

三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同。

区别只是 Sass 和 Stylus 可以用没有大括号的方式书写

less

.a { &.b { color: red; } }变量

变量无疑为 CSS 增加了一种有效的复用方式，减少了原来在 CSS 中无法避免的重复「硬编码」

Less:

@red: #c00; strong { color: @red; }

Sass:

$red: #c00; strong { color: $red; }

Stylus:

red = #c00 strong color: red @import

Less 中可以在字符串中进行插值:

@device: mobile; @import "styles.@{device}.css";

Sass 中只能在使用 url() 表达式引入时进行变量插值:

$device: mobile; @import url(styles.#{$device}.css);

Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现:

device = "mobile" @import "styles." + device + ".css"混入

混入(mixin)应该说是预处理器最精髓的功能之一了。

它提供了 CSS 缺失的最关键的东西:样式层面的抽象。

Less 的混入有两种方式:

1.直接在目标位置混入另一个类样式(输出已经确定，无法使用参数);

2.定义一个不输出的样式片段(可以输入参数)，在目标位置输出。

.alert { font-weight: 700; } .highlight(@color: red) { font-size: 1.2em; color: @color; } .heads-up { .alert; .highlight(red); }

编译后

.alert { font-weight: 700; } .heads-up { font-weight: 700; font-size: 1.2em; color: red; }

Sass

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } .page-title { @include large-text; padding: 4px; margin-top: 10px; }继承

Stylus,Scss

.message padding: 10px border: 1px solid #eee .warning @extend .message color: #e2e21e

less

.message { padding: 10px; border: 1px solid #eee; } .warning { &:extend(.message); color: #e2e21e; }

Sass

.active { color: red; } button.active { @extend .active; }函数

三种预处理器都自带了诸如色彩处理、类型判断、数值计算等内置函数

stylus

@function golden-ratio($n) { @return $n * 0.618; } .golden-box { width: 200px; height: golden-ratio(200px); }总结

Less 从语言特性的设计到功能的健壮程度和另外两者相比都有一些缺陷，但用 Less 可以满足大多数场景的需求。

但相比另外两者，基于 Less 开发类库会复杂得多，实现的代码会比较脏，能实现的功能也会受到 DSL 的制约。

比 Stylus 语义更清晰、比 Sass 更接近 CSS 语法，使得刚刚转用 CSS 预编译的开发者能够更平滑地进行切换。

Sass 在三者之中历史最久，也吸收了其他两者的一些优点。

从功能上来说 Sass 大而全，语义明晰但是代码很容易显得累赘。

主项目基于 Ruby 可能也是一部分人不选择它的理由(Less 开始也是基于 Ruby 开发，后来逐渐转到 less.js 项目中)。

Sass 有一个「事实标准」库--Compass，于是对于很多开发者而言省去了选择类库的烦恼，对于提升开发效率也有不小的帮助。

Stylus 的语法非常灵活，很多语义都是根据上下文隐含的。

基于 Stylus 可以写出非常简洁的代码，但对使用团队的开发素养要求也更高，更需要有良好的开发规范或约定。

总的来说，三种预处理器百分之七八十的功能是类似的。

Less 适合帮助团队更快地上手预处理代码的开发，而 Sass 和 Stylus 的差异更在于口味。

比如有的人喜欢 jQuery 用一个 $ 做大部分的事，而另一些人觉得不一样的功能就该有明确的语义上的差别。在这里我不会做具体的推荐。当然，再次声明一下由于我个人接触 Less 开发比较多，所以可能遇到的坑也多一些，文中没有列出 Sass 和 Stylus 的问题并不代表他们没有。

元素垂直居中、图片懒加载、媒体查询、css3的特性、等

原文：https://www.cnblogs.com/hedayong/p/14349040.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)