理解CSS|青训营笔记概述 CSS简要发展史基础知识布局和定位层叠上下文变形、过渡、动画响应式设计 CSS生态

概述

CSS简要发展史

CSS1 解决网页排版布局和装饰问题，第一个有层叠(casading)概念的语言

CSS2 表现和内容分离

CSS2.1 对CSS2的修正、扩展代替CSS2

CSS3 规范模块化发展，模式丰富、酷炫，提高网站的可维护性以及性能速度

基础知识

层叠（Cascading）、优先级

CSS是规则声明的集合，难免会产生冲突，而层叠是为了解决这种冲突存在的

层叠三大规则(按优先程度递减)

1. 样式表来源
2. 选择器优先级
3. 源码位置

样式表来源重要排序(重要程度递增)

1. 用户代理样式 _{浏览器默认格式}
2. 用户样式表 _很少有
3. 作者样式表 _{developer写的}
4. 作者样式表中!important
5. 用户样式表中的 !important
6. 用户代理样式表中的 !important

由层叠概念引申出的css代码good practice

选择器尽量少用id

尽量不要用!important

自己的样式加载在引用库样式的后面

继承

大部分具有继承特性的属性跟文本有关，还有少部分列表、表格的属性

可以使用inherit关键字显式指定一个属性值从其父元素继承

CSS的值和单位

值

文字类：比如像initial这种关键字，颜色、位置等等

数值类：比如z-index:1这种数值，或带有单位的数值、百分比等

函数生成：比如calc(),min(),max()等

单位

长度
绝对长度：px,pt,cm,in...
相对长度：em,rem,ex,rex...vw,vh,vmin,vmax

角度：deg,grad,tum,rad

时间：s,ms

分辨率：dpi,dpcm,dppx

盒模型

浏览器根据视觉格式化模型(visual formatting mode),将所有元素表示为盒子模型，css通过盒子模型做layout

控制盒子类型

display:block、inline、inline-block、flex、...

控制盒子大小&计算方式

width,height...
box-sizing:content-box、border-box

控制盒中内容流

overflow:auto、scroll、hidden、...

控制定位

position:static、relative、absolute、fixed、sticky

是否可见

visibility:visible、hidden、...

负外边距

padding、border、margin中，只有margin可以设置负值

布局和定位

常规流布局

外部显示类型为block
参与块级格式化上下文

外部显示类型为inline
参与内联级格式化上下文

块级格式上下文（block formatting context）

BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

触发一个盒子的BFC特性（以下满足一个即可）

display:flow-root | inline-block;

position: absolute | fixed;

float: 不为none;

overflow: 不为visible

外边距塌陷

会产生外边距塌陷的情况

两个兄弟元素之间相邻的上下外边距

父子元素之间相邻的上下外边距

内容为空元素自己上下外边距相邻

消除外边距塌陷的方法

在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻；

在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中

弹性盒子布局

Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)的调整更为灵活。

网格布局

2017年推出的Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。

Grid和Flex布局的使用策略

Flex

1. 一维布局
2. 基于内容
3. 浏览器兼容性更好

Grid

1. 二维布局
2. 基于布局
3. 2017年后浏览器的版本普遍支持

1. 大面积或整体布局推荐使用Grid
2. 小面积或组件中，或Grid Item中可以使用Flex做灵活布局

定位Position

Static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

fixed

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动

relative

相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。

absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html

sticky

元素相对它的最近滚动祖先(祖先的overflow:scroll/hidden/auto)的视口(scrollport)定位

层叠上下文(The Stacking Context)

层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开

形成新的层叠上下文的条件(任一)

position:relative或absolute;并且z-index不是auto

position:fixed或sticky

flex或grid的子元素;并且z-index不是auto

opacity的值小于1

transfrom的值不为none

will-change的值不为通用值

......

z-index只在同一个层叠上下文内比较
子元素的z-index无法超越父元素的z-index显示顺序

变形、过渡、动画

transform变形

transition过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态

div{
    transition:<property> <duration> <timing-function> <delay>;
}

其中timing-function一般有三种用法：线性(linear)、贝塞尔曲线(cubic-bezier()或ease-in等)、阶跃(step)

animation动画

如何写动画性能更好

1. 尽量不用触发reflow的属性
2. 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
3. 尽量使用transform 和opacity 去写动画

响应式设计

响应式设计推荐遵循的原则

优先选用流式布局，如百分比、flex、grid等

使用响应式图片，匹配尺寸，节省带宽

使用媒体查询为不同的设备类型做适配

给移动端设备设置简单、统一的视口

使用相对长度，em、rem 、vw 做为长度度量

媒体查询

媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型(如 screen、print)以及媒体特性如视口宽度、屏幕比例、设备方向:横向或纵向) 做为约束条件。

使用媒体查询的一些Tips

1. 媒体查询同样遵循cascading层叠覆盖原则，min- 和max- 选择一个
2. 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
3. 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

CSS生态相关

语言增强--CSS预处理器

预处理器对比

CSS后处理器

原子化CSS

原子化 CSS(Atomic CSS): 原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名；有些人可能会称其为函数式 CSS，或者 CSS 实用工具。本质上，可以将原子化的 CSS 框架理解为这类 CSS 的统称

优点

减少了css体积，提高了css复用

减少起名的复杂度

缺点

增加了记忆成本

增加了html结构的复杂性

理解CSS|青训营笔记

概述