css简要总结 | 青训营笔记

css,即层叠样式表 是为了解决网页排版和装饰问题出现的

基础知识

层叠是为了解决声明规则的冲突 层叠三大规则

• 样式表来源:
  • 用户代理样式(浏览器)
  • 用户样式
  • 作者样式
  • (!important则是反向递增)
• 选择器优先级
  • 内联
  • id
  • 属性,类,伪类
  • 标签,后代,子,相邻,伪元素
  • :is() :not() :has()以最高为准,:where()为0
• 源码位置
  • 谁最后声明谁生效,link和style根据document的顺序
  • import 根据import的顺序

继承 文本属性大多可以继承, 比如font-xxx, text-xxx

css值和单位

盒模型

• 盒子类型: display:
• 控制盒子大小和计算方式: width,height,
• 控制盒中内容流:overflow
• 控制定位: position
• 是否可见: visibility

盒模型能实现的

• 三角形: border+width:0+height:0
• 固定比例矩形:百分比的width和padding或aspect-ratio
• 水平居中: margin: 1 auto
• 渐变边框: background-image: linear-gradient()

负外边距

• 左上负外边距会让元素本身向左或上移动,最终与其他元素重合
• 右下负外边距会把后面元素拉过来
• 改变的是外界可以感知的外界元素宽高

display

• 外部显示类型: 规定该盒子如何与同一块级格式上下文中其他元素一起显示

• 内部显示

  • IFC(内联级格式上下文)
    • line-height, vertical-align | baseline descent 等概念
  • BFC
    • display/postion/float/overflow;
    • 外边距塌陷问题

• 弹性盒子: 骰子

• 网格布局

定位

• relative
• absolute
• fixed
• stikey

层叠上下文

• 一个层叠上下文会对应浏览器的一个新的渲染层
• position/z-index/flex/display:flex.grid/opacity/transform/will change
• 层叠顺序: 根->z<0->(block->float->inline)->positioned->z>0

变形 过渡和动画

• transform 3d
• transition 过渡
• animation 动画
• 性能相关: 布局 绘制 合成; reflow; will-change硬件加速

实践&生态

响应式设计

• 原则: 流式布局 响应式图片 媒体查询 移动端统一视口 相对长度
• 媒体查询: @media 媒体类型和媒体特性约束; 少用
• 设备(物理)像素和参考像素和单位
• 移动端viewport: width height initial-scale等
• 相对单位: em rem vw vh

css生态相关

• 语言增强: 预处理器(less scss stylus) 后处理器(postcss)
• 工程架构: bem, scoped ,css module,css in js, styled componect, 原子化css(Tailwind)