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中 / 会被认为是分隔符,在以下情况下,被认为是除法

  1. ​ 当除号两边有变量的时候,被认为是除法

  2. ​ 除法计算式,被括号包裹,被认为是除法

  3. ​ 除法计算式,是其他计算式的一部分,我们认为是除法

    ​ 插值操作:使用#{}做插值

    数学函数:

    1. ​ round($val):四舍五入
    2. ​ ceil($val):向上取整
    3. ​ floor($val):向下取整
    4. ​ min:取最小值
    5. ​ max:取最大值
    6. ​ random:0~1的随机数,可以取0,但不能取1

    学习心得:

    ​ 今天周公棋艺不错,好多东西没有听到,属实难受,下来的时候多看看老师的教案,争取早点跟上大部队;这两天因为返校的问题可能有点耽搁了,希望明天开始能够回归状态吧。

标签

评论

this is is footer