20200824_陈宇_
日志
学习总结：
div垂直居中：
div{
margin-left:50vw;
margin-top:50vh;
ransform:translate(-50%,-50%);
}
link和import的区别：
①link是XHTML标签，而@import是css提供的；
②link写在html页面上，只能存在于head部分的，而@import是写在css文件中的，也可以写在style中；
③link引用css时，在页面加载入时，同时加载；而@import需要时页面加载完成载入以后才加载；
④兼容问题：link是XHTML标签，没有兼容问题；@import css 2.1提出的，低版本（ie5及以下）的IE不支持；
⑤link支持使用JavaScript去控制DOM改变样式的，但是@import不支持；
⑥link方式引入的样式的权值高于@import的权重；
前端页面的组成：
①结构层：html：主要负责搭建网页的整体架构；
②样式层：css：主要负责为页面添加样式，进行美化；
③行为层：JavaScript：主要负责页面与用户的交互；
CSS的代码优化：
1. 合并样式
2. 能用群组，就不单写。能简写，就不单独去定义
3. 缩小样式文件的大小，能重用就重用
4. 减少样式重写
5. 避免出现空的href和src；
6. 代码压缩
7. 选择更优的样式属性值
8. 不要在HTML中缩放图像
em和rem的区别：
rem：相对于根元素(html)的font-size，假如html的font-size：12px，在其中的div设置font-size：2rem;就是相当于是24px；1rem=12px;
em：相对于父元素的font-size进行计算，假如某个p元素为font-size：12px；在p元素的内部有一个span标签，设置font-size：2em；那么这个时候span的字体大小为 24px；1em=12px;
SASS：
多行注释：/* */ 多行注释，会被转换到生成的.css文件中
//单行注释：不会被转换到生成的.css文件中
!default：如果之前定义一样的变量名，使用之前的变量值;如果之前没定义一样的变量名，使用现在值
继承：@extend 选择器
字符串拼接：
+：带""的字符串去拼接不带""的，结果带""
不带""的出去拼接带""的，结果不带""
-：由于scss变量可以使用-，而系统分辨不出-到底是减法运算还是变量的一部分。所以写减法的时候，减号前后添加空格，做区分
/：在scss中 / 会被认为是分隔符，在以下情况下，被认为是除法
-
当除号两边有变量的时候，被认为是除法
-
除法计算式，被括号包裹，被认为是除法
-
除法计算式，是其他计算式的一部分，我们认为是除法
插值操作：使用#{}做插值
数学函数：
- round($val)：四舍五入
- ceil($val)：向上取整
- floor($val)：向下取整
- min：取最小值
- max：取最大值
- random：0~1的随机数，可以取0，但不能取1
学习心得：
今天周公棋艺不错，好多东西没有听到，属实难受，下来的时候多看看老师的教案，争取早点跟上大部队；这两天因为返校的问题可能有点耽搁了，希望明天开始能够回归状态吧。
评论