• 兼容性


    这次给小伙伴们带来兼容性的学习知识点分享

    浏览器为什么会解决兼容性啦?

    原因:同一个标签在页面上的默认样式不同,因此展现的效果也是不一样的。为了同一个标签在页面上的默认样式相同,所以只需要一个css就可以同意样式。

    解决方案

    方案1:重置文件(reset或者normalize)开源

    方案2:can  i  use+前缀(主流浏览器)

    浏览器内核

    浏览器类型                                内核                                         js引擎

    ie

    firefox                                       trident                                         jscript


    Chromr                                    webkit                                       Blink V8

    Safari                                      Webkit                             SquirrelFish Extreme

    Opera                                      Presto                                       Carakan


    前缀书写格式:以-开始,以-结束

    微软书写格式: -ms-
    火狐书写格式: -moz-
    谷歌书写格式: -webkit-
    苹果书写格式: -webkit-或者-blink-
    欧朋书写格式: -o-


    开发理念:
    1、用户群体(年龄,学历,地域,行业)
    2、功能(高版本浏览器,低版本浏览器)

    渐进增加:
    先以低版本浏览器能识别的内容进行内容展示,在根据用户需求进行内容的增加。

    优雅降级:
    先满足所有功能需求,在根据客户和低版本浏览器进行功能的删减。


    css工程化
    .css 选择器{声明块} 规则
    不同的选择器,相同的声明块(代码相同)

    sass注释
    默认值是单行注释 //注释内容

    多行注释 /*注释内容*/

    2、可以通过HTML层次结构,书写sass(创建时文件名必须是scss)代码,css代码是可以嵌套的

    3、当不同区域(不同标签)如何批量修改
    在。css文件中需要修改多次。
    在sass中只需要修改一次。
    变量:可以变化的量
    书写格式:$变量名:变量值;

    注:变量名是自定义的
    变量值是属性值(变化名);

    变量的作用区域(变量的使用范围)
    注意:只能用于当前标签。


    【混合器】
    书写格式: @mixin 混合器名{声明块}
    例子:

    @mixin F88{
    display:flex;
    justify-content:space-evenly;
    align-itms:center;
    }

    引用混合器
    @include 混合器名
    例子:

    @mixin divchicun ($ywidth,$yheight,$ycolor,$hyg,$ccc){
    $ywidth;
    height: $yheight;
    border-style: $ycolor;
    background-color: $hyg;
    margin: $ccc;
    }

    div{
    @include divchicun(400px, 400px, solid, red,auto);
    }
    p{
    @include divchicun(600px, 600px, dotted, skyblue,auto);
    }
    footer{
    @include divchicun(800px, 800px, double, blue,auto);
    }

    @mixin 混合器名(参1,参2,参3){声明块}


    使用:
    @include 混合器名(值1,值2,值3)


    注:@include值的个数可以大于@mixin的个数,不能小于@mixin的个数。


    【参考数的默认值】
    即参数有传的值时,就用传的值。
    没有则用默认值。
    书写格式
    @mixin 混合器名称(变量名:默认值)
    例子:@mixin F68(@divColor:red)

    注:把有默认值的参数往后放
    例子:
    @mixin F68($inputWidth,$divcolor;red)

    【混合器,扩展运算符】
    书写格式: @mixin 混合器名称(变量名...)


    【占位符】
    书写格式:%自定义(声明块)


    使用时
    书写格式:@extend 占位符名称
    例子:@extend %f68;

  • 相关阅读:
    JSTL&EL
    Response
    HTTP、Request
    Tomcat、Servlet
    单片机概念及应用
    JQuery高级
    Jquery基础
    JavaScript
    HTML、CSS
    跟着文档学习gulp1.2创建任务(task)
  • 原文地址:https://www.cnblogs.com/yangzisong/p/13129854.html
Copyright © 2020-2023  润新知