标签:没有 学历 自定义 flex 需要 style 为什么 客户 nbsp
这次给小伙伴们带来兼容性的学习知识点分享
浏览器为什么会解决兼容性啦?
原因:同一个标签在页面上的默认样式不同,因此展现的效果也是不一样的。为了同一个标签在页面上的默认样式相同,所以只需要一个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){
width: $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;
标签:没有 学历 自定义 flex 需要 style 为什么 客户 nbsp
原文地址:https://www.cnblogs.com/yangzisong/p/13129854.html