CSS 效果
效果属性
- box-shadow
- 立体感 / 边框 / 特殊效果
- text-shadow
- 立体感 / 印刷品质感
- border-radius
- background
- clip-path
- 裁剪图形
如何产生不占空间的边框
- box-shadow
- outline
CSS 动画
动画类型
- transition 补间动画
Ceaser CSS EASING ANIMATION TOOL
- keyframe 关键帧动画
- 相当于多个补间动画
- 定义更灵活
- 逐帧动画
- 用于无法补间计算的动画
- 资源较大
- 使用steps()
过渡动画和关键帧动画的区别:
- 过渡动画需要有状态变化, 如: hover
- 关键帧动画则不需要
- 关键帧动画能控制得更精细
CSS 预处理器
- 添加了很多 CSS 不具备的特性
- 提升了 CSS 文件的组织
优点:
- 嵌套反映层级和约束
- 变量
- Extend 和 Mixin
- 循环
- import CSS 文件模块化
Less 的使用
1.在项目中安装
npm install less
2.按照 less 语法编写 .less 文件
3.使用 lessc 编译生成 .css 文件
..\node_modules\.bin\lessc AAA.less BBB.css
如果是全局安装的 less, 可以这样写:
lessc AAA.less BBB.css
mixin 不加括号会被编译出来, 加括号不会被编译出来
mixin 和 extend 使用场景的区别?
行高的构成 浮动是什么?清除浮动的方法和原理? 怎么处理对齐
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
响应式
absolute 和 fixed 是脱离文档流的
