20200824+袁鑫
link和import的区别
- link是XHTML标签，而@import是css提供的；
- link写在html页面上，只能存在于head部分的，而@import是写在css文件中的，也可以写在style中；
- link引用css时，在页面加载入时，同时加载；而@import需要时页面加载完成载入以后才加载；
- 兼容问题：link是XHTML标签，没有兼容问题；@import css 2.1提出的，低版本（ie5及以下）的IE不支持；
- link支持使用JavaScriptd去控制DOM改变样式的，但是@import不支持；
- link方式引入的样式的权值高于@import的权值；
五大主流浏览器：chrome/safari/opera/firefox/ie
css hack:
-webkit-:chrome、safari
-o-：opera
-moz-：firefox
-ms-：ie
高度坍塌问题：
-
给父元素加高度；
-
为父元素加浮动；
-
改变父元素的显示方式，display:table；
-
在父元素下末尾添加一个空div,为其添加clear:both；
-
使用伪元素，在父元素下的末尾，添加#container:after{
content:"";display:block;clear:both；}
-
为父元素添加溢出隐藏，overflow:hidden;
行内元素
和相邻的内联元素在同一行。宽度和高度都不可以控制。
margin-top 和margin-bottom、padding-top是不可控制的，margin-left、marigin-right和padding-bottom、padding-left、padding-right是可以控制的，行内元素的区域大小都是内容撑开的。
rgba()透明的元素的子元素不会继承透明效果
结构层：html:主要负责搭建网页的整体架构；
样式层：css:主要负责为页面添加样式，进行美化；
行为层：JavaScript:主要负责页面与用户的交互；
sass
指令 each：each @each $i in 选择器{}
指令 for：
@for $i from startNumber to endNumber{} 不包含endNumber
@for $i for startNumber through endNumber{} 包含endNumber
指令 if-else ：\(s:100;
p::after{
@if(\)s>=95){
content:"牛逼";
}@else if(\(s>=90){
content:"学霸";
}@else if(\)s>=60){
content:"差不多";
}@else{
content:"5天不给吃饭";
}
}
自定义函数
@function 函数名（$n）{
@return 运算表达式；
}
@function show(\(a,\)b){
@return \(a+\)b;
}
p{
width:show(123px,123px);
}
字符串函数
unquote("string") 去掉双引号
quote(string) 为字符串添加引号
to_upper_case("srting"); 将字符串小写字母转换为大写字母
to_upper_case("STRING"); 将字符串大写转换为小写字母
数学函数
round($val) 将数值四舍五入，转换成一个最接近的整数
ceil($val)向上取整
floor（$val）向下取整
min(\(1,\)2,$3...) 最小值
max(\(1,\)2,$3...)最大值
random(); 随机数
运算
加，字符串拼接 带“”的去拼接不带“”的，结果带“” 不带“”的去拼接带“”的，结果不带
减法，由于scss变量可以-，而系统分辨不出-到底是减法运算还是变量的一部分。所以写减法的时候，减号前后添加空格，做区分
除法，在scss中/会被认为是分隔符，但是在以下情况，被认为是除法
1.当除号两边都有变量的时候，被认为是除法
2. 除去计算式，被括号包裹，被认为是除法
3. 除法计算式，是其他计算式的一部分，我们认为是除法
继承
@extend
混合器
定义混合器 @mixin 混合器名称{样式申明}
调用混合器 @include 混合器名称{}
带参数的混合器 @mixin 混合器名称（\(形参，\)形参...）{}
调用带参数的混合器 @include 混合器名称（实参，实参...）{}
心得：
今天的学习内容还行，基本上都很简单，一看就明白，基本上也都掌握了，可能运用还需要多多锻炼，学习来不得半点虚假。期待明天的知识！加油！
评论