深入理解CSS | 青训营笔记

用户1519209417505
54 阅读6分钟

基础知识

  • 发展史：

  • 层叠：

  • 层叠规则：

  • 选择器

  • 选择器优先级：

  • 由层叠概念引申出的CSS代码good practice：
    • 选择尽量少用id
    • 尽量不要用！important
    • 自己的样式加载在引用库样式的后面
  • 继承：
    • 大部分具有继承性的属性盒文本相关
    • 可以使用inherit关键字显示指定一个属性值从其父元素继承

  • 值和单位：
    • 单位：

    • 值：

  • 盒模型： 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）
    • W3C 标准盒子模型：
      • 盒子总宽度 = width + padding + border + margin;
      • 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

    • IE 怪异盒子模型：
      • 盒子总宽度 = width + margin;
      • 盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值

  • 利用盒模型的特性实现一些展现形式：

布局和定位

  • CSS3之前的布局：

  • CSS3之后的布局：
  • 常规流布局：

  • 格式化上下文的布局规范：
    • 在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠
    • 在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）
  • BFC：
    • 是一种格式规范，不管它外部显示类型是什么，但是它的内部显示类型是flow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文
    • 如何触发?

  • 外边距塌陷：

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

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

  • Flex布局和Grid布局的使用策略：
    • Flex：
      • 一维布局
      • 基于内容
      • 浏览器兼容性更好
    • Grid：
      • 二维布局
      • 基于布局
      • 2017年后浏览器的版本普遍支持
  • 定位Position： 为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变，当position属性的取值非static的时候，可以使用top，right，bottom，left对其进行定位

层叠上下文

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

  • 形成新的层叠上下文的条件
    • position：relative或absolute；并且z-index不是auto
    • position：fixed或sticky
    • flex或grid的子元素；并且z-index不是auto
    • opacity的值小于1
    • transform的值不为none
    • will-change的值不为通用值
  • 层叠顺序： 层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序

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

变形、过度、动画

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

  • animation动画：

  • 性能相关：

  • 如何写动画性能更好：
    • 尽量不用触发reflow的属性
    • 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
    • 尽量使用transform和opactity去写动画

响应式设计

  • 响应式设计遵循的原则：
    • 优先选用流失布局，如百分比、flex、grid等
    • 使用响应式图片、匹配尺寸、节省带宽
    • 使用媒体查询为不同的设备类型做适配
    • 给移动端设备设置简单、统一的视口
    • 使用相对长度，em、rem、vw做为长度度量
  • 媒体查询的使用： 媒体查询运行某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如screen、print）以及媒体特性（如视口宽度、屏幕比例、设备方向：横向/纵向）做为约束条件

  • 使用媒体查询的一些Tips：
    • 媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个
    • 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
    • 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点
  • 设备像素： 显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像；设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了

  • DPI和PPI

  • CSS像素： 其实是一个视角单位。规范给出的定义是，1css像素是从一臂之遥解析度为96DPI（即1英寸96点）的设备输出时，1点（即1/96英寸）的视角

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

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

  • 相对长度的使用
    • em
    • rem
    • vw和vh

CSS生态相关

  • CSS预处理器：
  • 预处理器如何提高研发效率：
  • 三种预处理器对比

  • 广义CSS预处理器：

  • CSS后处理器：
  • postcss机制浅析
  • CSS模块化： css Module就是为了解决全局污染问题出现的方案，解决CSS全局污染，本质上是保证样式集合对应的选择器是唯一的，从这个角度看，主流的单纯针对于防止全局污染的方案大概有：
  • CSS-in-JS： 将应用的CSS样式写在JavaScript文件里面，利用js动态生成css
  • styled-component机制浅析
  • CSS-in-JS Pros&&Cons
  • 原子化CSS： 是一种CSS的架构方式，它倾向于小巧且用途单一的class，并以视觉效果进行命名
  • 优缺点：

avatar
文章
阅读
粉丝