CSS相关内容｜青训营笔记

用户9792705635044
113 阅读11分钟

CSS相关内容｜青训营笔记

一、层叠、优先级

01. 层叠三大规则

优先程度：样式表来源 > 选择器优先级 > 源码位置

  • 源码位置：当选择器优先级相同时，样式的优先级与样式的 【声明顺序】 相关，而与【引用顺序】无关； 层叠样式的相关事项：
  • 选择器尽量不选择使用id选择器，由于很多JS选择器使用的是id类型，且不便于代码维护；
  • 尽量不使用“！important”；
  • 个人创建的样式加载在引用库样式之后，由于样式与【声明顺序】相关；

02. 继承

  • 继承：
    • 大部分具有继承特性的属性与文本相关，还有少部分是与列表、表格相关的属性；
    • 可以使用【inherit】关键字显式制定一个属性值从其父元素继承；

03. CSS的值和单位

  • 单位：
    • 长度
      • 绝对长度
      • 相对长度
    • 角度
    • 时间
    • 分辨率
  • 值：
    • 文字类（颜色、位置等）；
    • 数值类；
    • 函数生成

04. 盒模型

image.png

二、布局

01. 常规流布局

  1. 盒子模型
  • 任意盒子的display：
    • 外部显示类型（display-outdise）：规定了该盒子如何与统一格式上下文中的其他元素一起显示；
    • 内部显示类型（displey-indside）：规定了该盒子内部的布局方式；
  • 常规流中的盒子：
    • 块级盒子：外部显示类型为block，参与块级格式化上下文（block formatting context，BFC）；
    • 内联级盒子：外部显示类型为incline，参与内联级格式化上下文（incline formatting context，IFC）；
    • 常规流的盒子只会参与到一种格式化上下文；
  • BFC；
    • 通常使用的BFC表示的是block fomatting context root，本身参与IFC，但是其内部会形成新的块级格式化上下文，而该root就是新的块级格式化上下文的根元素；
  1. 外边距塌陷

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

    • 两个兄弟元素之间相邻的上下外边距；
    • 父子元素之间相邻的上下外边距；
    • 内容为空元素的上下外边距相邻；

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

    • 在两个相邻的上下编剧之间增加border、padding或者内联元素，使之不相邻；
    • 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中；

  • 补充；

  • 1. 场景：互相嵌套的块级元素，子元素的margin-top会加到父元素上；

  • 2. 结果：导致父元素一同向下移动；

  • 3. 解决方法：

    • (1) 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）；
    • (2) 给父元素设置overflow：hidden；
    • (3) 转换为行内块元素，因此就不属于两个块级元素的问题；
    • (4) 设置浮动；
  1. 内联格式化上下文
  • 在IFC中，盒子会从包含块的顶部看似，按序水平排列，只有水平外边距、边框和内边距会被保留；
  • 把包含一串盒子的矩形区域称为一个线条框；
    • line box：line box的高度所包含的位置最高的元素的顶部和位置最低的元素的底部的距离；
    • vertical-align：决定元素的对齐位置；
  1. 合并问题：
  • 1. 场景：垂直布局的两个块级元素，上下的margin会合并；
  • 2. 结果：最终两者的距离为margin的最大值；
  • 3. 解决方法：只有一个块级元素使用margin即可；

02. 弹性盒子

Flexible BOx Layout：

  • 主要是为了提供更加高效灵活的布局方式，即使是在宽度高度位置的情况下，也可以排列到盒子模型内部；使不同布局方向的调整更为灵活；

03. Grid

Grid：

  • 可以定义由行和列组成的二维布局，然后将元素放置到网格中，元素可以只占其中一个单元格，也可以占据多行或多列；
  • 网格线不可见；
  • 分为作用于父元素或子元素上；

Flexible Box 和 Grid 的对比：

  • Flex：
    • 一维布局；
    • 基于内容；
    • 浏览器兼容性更好；
  • Grid
    • 二维布局；
    • 基于布局；
    • 2017年后的浏览器版本普遍支持；
  • 相较而言，Grid更为简便；
    • 大面积或整体布局，推荐使用Grid布局；
    • 小面积或组件中，Grid Item中可以使用Flex做灵活布局；

04. 定位

Position：

  • relative：元素相相对于自己原来在文档流中的位置进行定位，但是原来文档流的空间还在；
  • absolute：元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位；
  • fixed：元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置；
  • sticky：元素相对于他的最近滚动祖先（祖先的overflow是scroll/hidden/auto）的视口（scrollport）定位；
    • 在滑动到指定位置之前元素位置相较于屏幕不会改变；
    • 滑动到指定位置之后，元素会随着文档一起滚动移出；

三、层叠上下文（The Stacking Context）

01. 层叠上下文

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

02. stacking order

  • 层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序；
  • 每个元素都有一个层叠水平；
  • 位于顺序底部的是层叠元素的根元素；
  • 层叠顺序：
    • 根元素的背景和边框 -> 内部形成的层叠上下文 -> 【block float incline】-> 其他元素内部形成的层叠上下文 -> 内部形成的层叠上下文 -> 用户可见；
    • 条件：
      • z-index只在同一个层叠上下文内比较；
      • 子元素的z-index无法超越父元素z-index显示顺序；
    • 建议：
      • 使用css变量 或者 预处理语言的变量，管理z-index的值；
      • 将预设间隔设置10 或 100， 方便后续的插入；（100 110 210 310）

03. transform变形

04. transition过渡

  • timing-fucntion一般有三种用法：线性（linear）、贝塞尔曲线（cubic-bezier()或ease-in等）、阶跃（step）；
    • step的应用：逐帧动画、定格动画、闪烁、时钟等；

05. animation动画

06. transform、transition、animatio——性能相关

  • 布局：
    • 计算布局：宽、高、位置等改变都会重新布局（reflow）；
  • 绘制：
    • 填充像素：文本、着色、北京边框等改变会出发（reflow）；
    • 某些渲染层形成合成层，拥有单独的涂层（Graphic Layer）由GPU绘制，即所谓硬件加速；
  • 合成：
    • 收集所有绘制完成的图层，按照顺序合成显示；

如何写动画性能更好：

  • 尽量不用出发reflow的属性；
  • 在遇到性能问题时可以出发赢家加速，比如设置will-change属性、设置transform3d等；
  • 尽量使用transform和opacity去写动画；

五、响应式设计

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

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

02. 媒体查询

媒体查询：

  • 允许某些样式只在页面满足特定条件时才生效，可以将媒体类型（如screen、print）以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）作为约束条件；
  • 使用媒体查询的一些tips：
    • 媒体查询同样遵循cascading层叠覆盖原则，min- 和 max- 选择一个；
    • 由于设备的多样化逐渐不可枚举，断电的选择尽量根据内容选择；
    • 由于断点的值呢宫颈癌会增加样式处理的复杂度，所以尽量减少断点；

03. 设备像素

  • 设备像素（物理像素）：
    • 与设备相关；
    • 显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像；
  • DPI和PPI：
    • DPI和PPI是一个概念，用于描述像素数，均表示的是每英寸多少物理像素及显示器设备的点距；
    • DPI（dots per inch）：每英寸多少点；
    • PPI（pixeis per inch）：每英寸多少像素数；

04. CSS像素

  • CSS像素：
    • 是一个视角单位；
    • 规范定义：1ccs像素是从一臂之遥看解析度为96DPI的设备输出时，1点的视角；
    • CSS像素有利于根据设备像素转换显示效果；

05. DPR设备像素比

设备像素比（DPR）：

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

06. 移动端的viewpoint

布局视口（viewpoint）：

  • 是页面中html元素（根元素）的包含块；
  • 默认情况：【window.document.ducumentElement.clientWidth】就是viewpoint的宽度；
  • 在移动设备中，默认布局视口由于历史兼容pc屏幕的原因，并不符合需求，通常使用【标签】对viewpoint进行设定，来完成移动端设备的适配；

常见的移动端viewpoint的设置：

  • 保持scale为1；

    • 好处：可以保持横屏或竖屏时，让布局视口的宽度和设备屏幕的宽度保持一致，且参考像素不防放缩；
    • 坏处：如果设备的dpr > 1，则需要通过其他方法实现画出一个设备像素粗细的线；

  • 保持scale放缩参数是1/dpr；

    • 好处：1个css px 等于1个设备像素，全局层面解决“真是1像素”问题；
    • 坏处：不同设备想要达到1个css px 严格等于 1个设备像素，需要【处理兼容性】才能实现；同时全局等比放缩，对某些固定尺寸需要特殊处理；

  • em

    • 在非font-size属性中使用时相对于自己的大小；

  • rem：

    • 不会出现多重嵌套问题，减少了复杂性；
    • 作为一个相对单位，可以进行适配放缩，可以用于响应式布局；

  • vw和vh

六、CSS生态相关

01. 语言增强

  • 预处理器
    • 预处理器如何提高研发效率：
      • 自定义变量：提高可复用；
      • 嵌套、作用域：避免全局污染、结构层次清晰、减少复杂组合选择器；
      • mixins、继承：提高可复用、可维护性；
      • 操作符、条件循环语句、自定义函数：提高可编程能力、增加灵活性； image.png

image.png

  • 后处理器 image.png

  • postcss机制浅析： image.png

02. 工程架构

2.1 CSS模块化

CSS module 就是为了解决全局污染问题，本质上是保证样式集合对应的选择器是为一个；

  • 主流的解决方法：
    • BEM命名规范；
    • vue-loader 的 scoped 方案；
    • CSS Module；

2.2 CSS-in-JS

  1. 将应用的CSS样式写在javascript中，利用js动态生成css；
  2. 好处：
    1. 可以解决CSS的局限性，例如缺乏动态功能、作用域和可移植性；
    2. 可以让CSS拥有独立的做哦用语，组织CSS代码外泄到组件外部，防止样式冲突；
    3. 让组件具有可移植性；
    4. 让CSS样式具有动态功能，可讲复杂的逻辑应用于样式规则，可用于茶u呢宫颈癌呢具有动态功能的复杂UI。

2.3 styled-component机制

styled-component机制结合 React 框架使用，能让其支持 CSS in JS 的写法，例如：

const Button = styled.button`
  color: grey;
`;

2.4 CSS-in-JS pros & cons

  • pros：
    • 有效避main样式全局污染；
    • 复杂交互样式可以更灵活编写；
    • 首屏渲染无多余css阻塞；
  • cons：
    • 有一定学习成本；
    • 存在运行时的消耗；
    • css-in-js的库到盒子打体积增大；
    • 代码可读性降低；

2.5 原子化css

原子化css是一种css的架构方式，倾向于小巧且用途单一的class，并以视觉效果进行命名；

  • 使用工具库优先（utilities-first）；
  • 按需生成；
  • 支持配置样式规则&自定义插件；

image.png

七、总结

  1. 层叠样式表应当注意叠加顺序和从父元素继承的属性对子元素样式的影响；
  2. 注意塌陷问题；
  3. 实际开发中，尽量将CSS样式单独存放于一个文件中，然后导入该文件；
  4. 使用多钟定义方式的CSS样式时，应当注意不同样式的优先级顺序；
  5. 在项目开发中，CSS样式的定义尽量避免使用id，建议使用class类名，同时类名尽量选择可以反应该样式特征的名称，便于代码修改、管理。
avatar
文章
阅读
粉丝