css权重等级
- !important
- 行内样式
- ID选择器，权重100
- class选择器，属性选择器和伪类选择器，权重10
// 属性选择器：根据元素的属性及属性值来选择元素，例button[type="submit"]
// 伪类选择器： a:active, a:focus
- 标签选择器，伪元素选择器，权重为1
伪元素选择器： :before, :after
transition和animation
transition（过渡）
transition是一个CSS模块，定义了如何创建一个平滑地变换CSS属性值的方法。它不仅允许创建变换方法，同时也可以通过定时函数来控制变换方法。
CSS支持两种定时函数：
- cubic-bezier() 定时函数，定义了一条立方贝塞尔曲线，一般用于动画的平滑变换，也被称为缓动函数。
- steps()阶梯函数
// transition：指定过渡动画的属性名称， 过渡动画的时间时间， 定时函数， 执行过渡动画需要等待的时间
transition: transition-property, transition-duration, transition-timing-function, transition-delay;
// example
transition: margin-left 1s ease-in-out 1.5s;
transition案例：
上箭头旋转135度变成下箭头同时伴随颜色变化，有动画效果
// html
<i class="arrow-icon"></i>
<button>开始</button>
// css
.arrow-icon {
display: inline-block;
width: 10px;
height: 10px;
padding: 2px;
border-top: 2px solid #979797;
border-right: 2px solid #979797;
cursor: pointer;
transform: rotate(-45deg);
transtion: transform 0.3s linear, border-color 0.3s ease-in-out;
}
.arrow-up {
transform: rotate(135deg);
border-color: red;
}
// jquery
$('button').class(function() {
$('.arrow-icon').toggleClass('arrow-up');
});
animation（动画）
animation是css的一个模块，它定义了如何用关键帧来随时间推移对css属性的值进行动画处理。
@keyframes
@keyframes规则通过在动画序列中定义关键帧的样式来控制css动画序列的中间步骤。这比transition（变换） 更能控制动画序列的中间步骤。
@keyframes slidein {
from {
margin-left: 100%;
width: 30%;
}
50% {
margin-left: 60%;
width: 60%;
}
to {
margin-left: 0%;
width: 100%;
}
}
from 其实就是 0% 表示起始状态， to 其实就是 100% 表示结束状态
animation:
animation-name, // 动画名称
animation-duration, // 一个动画周期时长
animation-timing-function, // 一个动画执行的节奏
animation-delay, // 动画何时开始
animation-iteration-count, // 动画结束前运行的次数
animation-direction, // 动画是否反向播放
animation-fill-mode, // 动画执行之前和之后如何将样式应用于其目标
animation-play-state; // 定义一个动画是否运行或则暂停
animation案例（引用MDN）：
// html
<div class="view_port">
<div class="polling_message">Listening for dispatches</div>
<div class="cylon_eye"></div>
</div>
// css
.polling_message {
margin-right: 2%;
float: left;
color: white;
}
.view_port {
width: 100%;
height: 25px;
overflow: hidden;
background-color: black;
}
.cylon_eye {
width: 20%;
height: 100%;
color: white;
background-color: red;
background-image: linear-gradient(to right,
rgba(0, 0, 0, .9) 25%,
rgba(0, 0, 0, .1) 50%,
rgba(0, 0, 0, .9) 75%;
)
animation: move_eye 4s linear 0s infinite alternate;
}
@keyframes move_eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
Sass和SCSS的区别
css预编译器
- Sass 一种缩进语法
- SCSS 一种css-like语法（视图弥合Sass和css之间的鸿沟，更加贴近css语法）
从新的语法规则Sass 3开始被称为 “SCSS”（时髦的css（Sassy CSS）），它是css3语法的扩展级，就是说每一个正确的css3文件也是合法的SCSS文件。
Sass写法
.element-a
color: hotpink
.element-b
float: left
SCSS写法
.element-a {
color: hotpink;
.element-b{
float: left;
}
}
=> 转化为css
.element-a {
color: hotpink
}
.element-a .element-b {
float: left
}
-
.scss是sass 3开始的，css3语法的扩展级。易于阅读
-
.sass是受Haml简洁启发，没有括号和分号，使用缩进。
-
实际项目开发中更倾向于使用scss,推荐使用scss
scss和less的区别
- 编译环境不一样，scss需要ruby环境，在服务端处理，而less需要引入less.js来处理输出为css
- 变量符号不一样，scss采用的是'$'，less采用的'@'
- 实际开发中更倾向于使用scss，scss相对于less功能更加齐全。
let和var的区别
- var 语句声明一个变量，并可选地将其初始化为一个值
- let 语句声明一个块级作用域的本地变量，并可选地将其初始化为一个值
/*
1. var声明的变量只能是全局或则整个函数块的，let声明的变量是被限制在块级中的
2. var的变量提升： 由于变量声明总是在任意代码执行之前处理，所以代码中的任意位置声明的总是等效于在代码开头声明。
3. let的暂时性死区
4. let不可以重复声明会直接报错
*/
// 暂时性死区
function do_something() {
console.log(bar); // undefined
console.log(foo); // ReferenceError 直接报错
var bar = 1;
let foo = 2;
}
// 暂时性死区更好的例子
var a = 1;
function test() {
console.log(a); // ReferenceError 直接报错
let a = 2;
}
test();
一张图片解决img图片切换效果
// css
img {
transtion: filter 0.4s linear;
filter: grayscale(100%);
}
img:hover {
filter: none;
}
<img src="logo.png" />
filter: grayscale(100%);将图片转换为灰度图像。值定义转换的比例。值为100%则完全转换为灰度图像。 值0%图片无变化。取值范围0%-100%；
@import和link标签区别
- @import 告诉CSS引擎引入一个外部样式表
- 加载页面时，link标签引入的css被同时加载；@import引入的css将在页面加载完毕后被加载
- 浏览器渲染的动作一般会执行多次的。下一次渲染一定是基于之前加载过的样式整合后绘制页面的，已经被渲染过的页面元素，也会被重新渲染。
@import虽然会晚加载，但是却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠
