《理解CSS》笔记 ｜ 青训营笔记

张照奕
83 阅读5分钟

理解CSS | 青训营笔记

1. 基础知识

层叠(Cascading)

what?——解决规则产生冲突的规则

层叠三大规则

image.png

样式表来源

image.png 常见：作者样式表能覆盖浏览器默认样式 注意：浏览器默认样式中的!important是无法从代码修改的，因此即使在编写css时使用了!important，也会优先以浏览器默认样式。

选择器优先级

what?——用于在用户样式表中判断样式的优先级

image.png

优先级排序：

简单排序：!important>行内>id>class>元素>通配>继承的样式

选择器优先级权重计算（!important和内联不参与选择器权重计算）

image.png

a——id选择器的个数，b——类、伪类、属性选择器的个数，c——元素、伪元素选择器的个数、

比较规则是从左向右依次比较a、b、c，若二者中的某一位胜出，则得出优先级。若优先级相同，则根据css中样式声明的位置决定（不是标签中class中写入的顺序）

选择器使用建议

少用id选择器+尽量不用!important+自己的样式在最后引入

继承

具有继承特性的属性都跟文本相关

image.png

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

值和单位

image.png

盒模型

what?——浏览器根据时间格式化模型将所有元素表示为盒子模型，再通过css进行布局。

image.png

盒模型可改变的属性

image.png

盒模型展现形式

实现三角形、固定比例矩形、水平居中、渐变边框

负margin

padding、border、margin中只要margin可设负值。若左或上margin为负，则元素会对应向上或左移动；若右或下margin为负，则会使后面的元素向左或向上移动（拉过去）

2. 布局

概述

CSS3前：常规文档流、浮动、定位 CSS3：Flex弹性盒子、Grid网格等

常规流布局

image.png

BFC

BFC是block formatting context的缩写，是一种格式规范。如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是什么，但是它的内部显示类型是flow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文。

触发一个盒子的BFC特性

image.png

外边距塌陷

相邻的盒子之间的margin会合并计算；父元素的第一个子元素的上margin和最后一个子元素的下margin会在父元素生效。

image.png

消除外边距塌陷的方法：

1.增加内联样式使其不相邻 2.为父元素设置BFC，使父子不在同级BFC

image.png

内联级格式化上下文

line box

image.png

vertical-align

baseline:基线对齐 ； middle:baseline+基线到字母x中心点的距离

image.png

eg:

单行元素垂直居中——设置line-height=height

文字与icon垂直对齐——img和text统一设置vertical-align:middle,text设置line-height，上述可实现垂直对齐，但并不是垂直居中，这是因为父元素的基线位置是根据其font-size变化的，设置父元素font-size:0，使得基线与中线重叠，则垂直居中。

弹性盒子布局

image.png

image.png

网格布局

image.png

Flex和Grid的对比

image.png

定位Position

image.png

3. 层叠上下文(The Stacking Context)

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

image.png

形成新的层叠上下文的条件 position: relative 或 absolute;并且 z-index 不是auto position: fixed 或 sticky flex 或 grid 的子元素;并且 zindex 不是auto opacity 的值小于1 transform 的值不为 none will-change 的值不为通用值。

层叠水平

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序

image.png

4. 变形、过渡、动画

transform变形

image.png

transform变形3D

image.png

举例：骰子

transform过渡

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

image.png

image.png

animation动画

image.png

性能相关

image.png

5. 响应式设计

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

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

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

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

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

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

媒体查询

略

设备像素、参考像素、移动设备视口

**设备像素/物理像素：**显示器绘制的最小单位。

image.png

**DPI&&PPI **

dpi:每英寸多少点

ppi:每英寸多少像素数

计算公式

image.png

CSS像素

image.png

1css像素杂不同设备上看上去的大小总是差不多的————根据设备像素换算的。

DPR设备像素比: 描述的是未缩放状态下，设备像素和CSS像素的初始比例关系

image.png

看图理解

image.png

移动端viewport

image.png

相对长度使用

em 在非font-size属性中使用表示相对于自身字体的大小

在font-size上使用是相对于父元素的字体大小(不推荐容易混乱)

应用场景：可以让展示区域根据展示字号的不同，做出放缩调整

image.png

rem 根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像em那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局.

应用：等比放缩

image.png

vw vh

vw:视窗宽度的1%。

vh:视窗高度的 1%。同样，也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置。

6. CSS生态

语言增强：预处理器、后处理器

预处理器

less、scss、stylus————》预处理器————》CSS

image.png

广义CSS预处理器

image.png

CSS后处理器

image.png

postcss机制

image.png

工程架构：CSS模块化、CSS-in-JS、Atomic CSS

模块化

BEM命名规范、scoped方案、CSS Modules

CSS-in-JS

将应用的CSS样式写在JavaScript文件里面，利用is动态生成css 优缺点

image.png

styled-component机制

image.png

Atomic CSS

倾向于小巧且用途单一的 class，并以视觉效果进行命名

Tailwind

image.png

优缺点

image.png

avatar
文章
阅读
粉丝