20200824+袁鑫

link和import的区别

  1. link是XHTML标签,而@import是css提供的;
  2. link写在html页面上,只能存在于head部分的,而@import是写在css文件中的,也可以写在style中;
  3. link引用css时,在页面加载入时,同时加载;而@import需要时页面加载完成载入以后才加载;
  4. 兼容问题:link是XHTML标签,没有兼容问题;@import css 2.1提出的,低版本(ie5及以下)的IE不支持;
  5. link支持使用JavaScriptd去控制DOM改变样式的,但是@import不支持;
  6. link方式引入的样式的权值高于@import的权值;

五大主流浏览器:chrome/safari/opera/firefox/ie

css hack:

​ -webkit-:chrome、safari

​ -o-:opera

​ -moz-:firefox

​ -ms-:ie

高度坍塌问题:

  1. 给父元素加高度;

  2. 为父元素加浮动;

  3. 改变父元素的显示方式,display:table;

  4. 在父元素下末尾添加一个空div,为其添加clear:both;

  5. 使用伪元素,在父元素下的末尾,添加#container:after{

    content:"";display:block;clear:both;}

  6. 为父元素添加溢出隐藏,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 混合器名称(实参,实参...){}

心得:

今天的学习内容还行,基本上都很简单,一看就明白,基本上也都掌握了,可能运用还需要多多锻炼,学习来不得半点虚假。期待明天的知识!加油!

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1