理解CSS | 青训营笔记

Dillonz
153 阅读9分钟

前言

本文主要介绍部分CSS知识模块，如布局、层叠上下文等，讲解一下CSS生态相关的知识，为我们的同学提供一个简明的CSS知识脉络

CSS简要发展历史

image.png

1.基础知识

层叠（Cascading）、优先级

image.png

层叠三大规则

  • 样式表来源

image.png

  • 这里先忽略了transition和animation，原因是不同浏览器和css规范规定的表现不一致
  • 选择器优先级

image.png

image.png

  • 源码位置

image.png

  • CSS层叠概念的最好实现 image.png

继承

image.png

CSS的值和单位

image.png

盒模型

image.png

盒模型的一些展现形式

  • 由盒模型的特性能实现一些展现形式？

image.png

image.png -或者使用新特性也可实现固定比例矩形：aspect-ratio

image.png

image.png

盒模型-负外边距

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

  • 设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠：

image.png

  • 如果设置右边或者底部的负外边距，并不会移动元素，而是将她后面的元素拉过来

image.png

  • margin负值最终减少的是外界可感知的宽高

2.布局和定位

概述

image.png

常规流布局

image.png

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

image.png

外边距塌陷

  • 会产生外边距塌陷的情况：

image.png

  • 消除外边距塌陷的方法：

image.png

内联级格式化上下文

image.png

内联级格式化上下文

  • 一些实际case:

image.png

image.png

弹性盒子布局

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

image.png

  • 弹性盒子的相关属性分为两类：

image.png

使用弹性盒子布局的示例

image.png

image.png

网格布局

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

image.png

使用Grid布局的示例

image.png

image.png

Grid和Flex布局的使用策略

image.png

定位Position

  • 为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top，right，bottom，left对其进行定位

image.png

使用定位的示例

image.png

3.层叠上下文（The Stacking Context）

层叠上下文简述

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

image.png

形成层叠上下文的条件

image.png

stacking order

  • 层叠顺序

image.png

  • position

image.png

  • z-index

image.png

编写z-index的建议

  • 1.使用css变量或者预处理语言的变量，管理z-index的值
  • 2.将预设间隔设置10或100，方便后续的插入

image.png

4.变形、过渡、动画

transform变形

  • transform变形
  • 2D相关属性：
  • transform：translate（移动）、rotate（旋转）、scale（放缩）、matrix（变形矩阵）等
  • transform-origin：right top、center等，表示变形时依据的原点

image.png

trannsform 变形 3D

image.png

  • 例子演示

image.png

transition 过渡

image.png

animation动画

image.png

transform、transition、animation-性能相关

image.png

5.响应式设计

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

  • 优先选用流式布局，如百分比、flex、grid等
  • 使用响应式图片，匹配尺寸，节省带框
  • 使用媒体查询为不同的设备类型做适配
  • 给移动端设置简单、统一的视口
  • 使用相对长度，em、rem、vw作为长度度量

媒体查询

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

image.png

  • 使用每天查询的一些Tips
  • 1.媒体查询同样遵循cascading层叠覆盖原则，min=和max-选择一个

image.png

  • 2.由于设备的多样化逐渐不可枚举断点的选择尽量根据
  • 3.由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

设备像素

image.png

  • 设备像素（物理像素 ：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像

image.png

  • 设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了

DPI&&PPI

  • dpi（dots per inch）：英寸多少点
  • ppi（pixels per inch）：每英寸多少像素数

-当用于描述显示器设备时ppi与dpi是同一个概念，说的是每英寸多少物理像素及显示器设备的点距

image.png

  • 当屏幕分辨率是X*Y，计算公式：

image.png

CSS像素

image.png

  • CSS像素（reference pixel）其实是一个视角单位、规范给出的定义是，1css像素是从一臂之遥看解析度为98DPI（即1英寸96点）的设备输出时，1点（即1/96英寸）的视角
  • 通常认为常人臂长为28英寸，那么视线与水平线的夹角是：

image.png

  • 如果1css像素永远等于1设备像素，那么

image.png

  • 但是真正使用的CSS像素并不是用0.0213度去精确计算的，因为css像素存在的目的是为了保证阅读体验一致，所以对不同的物理设备，CSS使得浏览器中1css像素的大小在不同物理设备上看上去总是差不多
  • 真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素

DPR设备像素比

-设备像素比（dpr）：描述的是为缩放状态下，设备像素和CSS像素的初始比例关系

image.png

image.png

移动端的viewport

-布局视口（viewport）是页面中html元素（根元素）的包含块，默认情况下，window.document.documentElement.clientWidth就是viewport的宽度

  • 在移动设备中，默认的布局视口由于历史兼容pc屏幕的原因，并不符合要求，我们经常需要用标签对viewport进行设定，来完成移动端设备的适配
  • 比如：默认iphone的布局视口是980px，展示视图：

image.png

image.png

移动端的viewport

image.png

em

image.png

rem

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

image.png

vw和vh

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

image.png

6.CSS生态相关

语言增强-CSS预处理器

image.png

  • 如何提高研发效率 image.png
  • 自定义变量
    • 提高可复用

image.png

  • 嵌套、作用域
    • 避免全局污染
    • 结构层次清晰
    • 减少复杂组合选择器

image.png

  • mixins、继承
    • 提高可复用
    • 可维护性

image.png

  • 操作符、条件/循环语句、自定义函数
    • 提高可编程能力
    • 增加灵活性

image.png

  • scss、less、stylus简单对比

image.png

语言增强-广义CSS预处理器

  • 现在项目中常见的样式处理流程

image.png

语言增强-CSS后处理器

  • CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS预处理器。

  • 最典型的例子是CSS压缩工具（如clean-css）。

  • 后处理器例如：PostCSS通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。 image.png

  • 后处理器框架地址：postcss插件

语言增强-postcss机制浅析

image.png

工程架构-CSS模块化

  • CSS Module 就是为了解决全局污染问题出现的方案，解决CSS全局污染，本质上是保证样式集合对应的选择器是唯一的，从这个角度看，主流的单纯针对于防止全局污染的方案大概有：
  • BEM命名规范
    • 通过.block_element-modifier这种命名规范来约束开发者，从而实现样式隔离

image.png

  • vue-loader的scoped方案
    • 通过编译的方式，在html元素上添加data-xxx的唯一属性，然后css添加属性选择器[data-xxx]的方式，实现样式隔离

image.png

  • CSS Modules
    • 通过编译的方式，将一个css file中的样式命名默认转换为一个全局唯一的名称，实现样式隔离，（常用css-loader或postcss-module）

image.png

工程架构-CSS-in-JS

  • css-in-js：将应用的CSS样式写在JavaScript文件里面，利用js动态生成css

image.png

image.png CSS-in-JS的Playground

工程架构-styled-component机制浅析

  • Step1
    • 生成第一个classname作为componentld
    • 这个类名没有CSS样式，但是当需要引用其它组件的时候，可以作为一个嵌套选择器来使用
  • Step2
    • 生成第二个classname作为唯一类名（hash值），使用stylis，生成和唯一类名关联的CSS字符串
  • Step3
    • 唯一类名对应的css样式insert到<head>的<style>中
  • Step4
    • 将两个类名写到目标节点的class中

image.png

工程架构-CSS-in-JS pros&cons

image.png

工程架构-原子化CSS

  • 原子化CSS是一种CSS的架构方式，它倾向于小巧且用途单一的class，并以视觉效果进行命名
  • 现有的库or框架：
  • Tailwind为例：

image.png

image.png

image.png

工程架构-原子化CSS

  • Tailwind如何做的?
  • 1.实用工具库优先（Utilities-First）

image.png

  • 2.按需生成

image.png

  • 3.支持配置样式规则&自定义插件

image.png

工程架构-原子化CSS

image.png

引用

  • 字节内部课： 前端语言串讲-理解CSS
avatar
文章
阅读
粉丝