理解CSS|青训营笔记

干饭阿澄
128 阅读9分钟

这是我参与的青训营笔记创作活动的第4天

主要分为以下部分：

  • 基础知识
  • 布局和定位
  • 层叠上下文（The Stacking Context）
  • 变形、过渡、动画
  • 响应式设计
  • CSS生态相关

基础知识

层叠（Cascading）、优先级

1.png

HTML代码

<head>
<style>
	#title{
		color: red;
		}
</style>
<link rel="stylesheet"href="./index.css"type="text/css">
</head>
<body>
<h1 id="title"style="color:green;">I am a Tittle</h1>
</body>

Index.css代码

h1{
	color: blue;
	font-size: 48px;
}

层叠三大原则（优先程度递减）

1、样式表来源

3.png

2、选择器优先级

4.png

5.png

3、源码位置

6.png

1.对于@import的样式，根据@import的顺序

2.对于link和style标签的样式，根据在document中的顺序决定

7.png

8.png

由层叠概念引申出的css代码good practice

  1. 选择器尽量少用id
  2. 尽量不要用！important
  3. 自己的样式加载在引用库样式的后面

继承

9.png

  • 大部分具有继承特性的属性跟文本相关：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing，还有少部分列表、表格的属性

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

10.png

CSS的值和单位

11.png

盒模型

浏览器根据视觉格式化模型(visual formatting model),将所有元素表示为盒子模型，css通过盒模型做layout

12.png

控制盒子类型

display: block、inline、inline-block、flex、…

控制盒子大小&计算方式

width，height …box-sizing: content-box、border-box

控制盒中内容流

overflow: auto、scroll、hidden、…

控制定位

position: static、relative、absolute、fixed、sticky

是否可见

visibility: visible、hidden、…

盒模型-负外边距

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

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

13.png

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

14.png

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

布局

概述

  • CSS3之前的常用布局

Normal Flow常规流：

- 默认的布局方式
- 有块级格式化上下文和内联格式化上下文

Float浮动流：

- 用float属性控制
- 脱流、做横向布局

Positioning定位流：

- 用position属性控制
- fixed和absolute脱离文档流可以自由定位、覆盖等

  • CSS3之后的新增布局

    • Flex弹性盒子布局
    • grid网络布局
    • Multicol多列布局
    • 一维空间布局
    • 二维空间布局
    • 文本、内容的多列展示

常规流布局

15.png

16.png

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

格式化上下文的布局规范为

17.png

18.png

外边距塌陷

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

19.png

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

消除外边距塌陷的方法：

20.png

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

内联级格式化上下文

21.png

22.png

弹性盒子布局

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

23.png

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

作用于父元素(flex container):

  • 建立一个弹性盒子

display: flex | inline-flex;

  • 规定盒子的主轴方向

flex-direction:row | column |…;

  • 子元素折行显示形式

flex-wrap: nowrap | wrap | wrap-reverse;

  • 主轴方向子元素的排列方式

justify-content: center | space-between | …;

  • 交叉轴方向子元素的对齐方式

align-items: flex-start | center | stretch | …;

  • 交叉轴方向多行子元素的布局方式

align-content: flex-start | space-between | …;

  • 以明确值设定子元素间的间隔

gap: < row-gap > < column-gap >;

作用于子元素(flex items):

  • 规定item未放缩之前的默认大小

flex-basis: auto |长度值…;

  • 规定有剩余空间时，对item的分配比例

flex-grow: number;

  • 规定空间不够时，对item的压缩的比例

flex-shrink: number;

  • 以上三项的缩写

flex: grow shrink basis;默认0 1 auto

  • 规定item从左到右(row布局)显示的顺序

order: number;默认是0

  • 规定单个item在交叉轴上的位置

align-self: auto | center | flex-start |…

网格布局

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

24.png

Grid和Flex布局的使用策略

25.png

26.png

定位Position

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

27.png

层叠上下文（The Stacking Context）

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

28.png

30.png

31.png

32.png

编写z-index的建议：

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

33.png

变形、过渡、动画

transform变形

2D相关属性：

transform: translate(移动)、rotate(旋转)、scale(放缩)、matrix(变形矩阵)等

transform-origin: right top、center等表示变形时依据的原点

34.png

3D相关属性：

transform: translate3d、rotate3d、scale3d、matrix3d等

transform-origin: right top、50px 30px等表示变形时依据的原点

transform-style: flat或preserve-3d看子元素的3d表现

perspective：观看点距离z=0这个平面的距离,可以在transform中用perspective()使用作用为当前元素，也可以直接使用，给后代元素一个统一值

perspective-origin：观看者的位置，如top、bottom等

backface-visibility：元素正面只有朝向观察者的时候可见

35.png

36.png

transform过渡

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

div{
    transition: <property><duration><timing-gunction><delay>;
}

其中timing-function一般有三种用法：线性(linear)、贝塞尔曲线(cubic-bezier()或ease-in等)、阶跃(step)

37.png

animation动画

38.png

39.png

响应式设计

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

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

媒体查询

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

40.png

使用媒体查询的一些Tips

  1. 媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个
  2. 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
  3. 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

设备像素

设备像素（物理像素）：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

DPI && PPI

dpi（dots per inch）：每英寸多少点

ppi（pixels per inch）：每英寸多少像素数

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

42.png

41.png

CSS像素

43.png

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

通常认为常人臂长为28英寸，那么视线与水平线的夹⻆是:(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度如果1css像素永远等于1设备像素，那么

44.png

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

DPR设备像素比

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

45.png

46.png

移动端的viewport

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

47.png

48.png

相对长度的使用

em

49.png

rem

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

50.png

vw 和 vh

51.png

CSS生态相关

语言增强：CSS预处理器

52.png

53.png

54.png

55.png

56.png

57.png

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

58.png

语言增强：CSS后处理器

59.png

语言增强：postcss 机制浅析

60.png

工程架构：CSS 模块化

CSS Module就是为了解决全局污染问题出现的方案，解决CSS全局污染，本质上是保证样式集合对应的选择器是唯一的，从这个⻆度看，主流的单纯针对于防止全局污染的方案大概有：

61.png

工程架构：CSS-in-JS

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

62.png

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

63.png

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

64.png

工程架构：原子化 CSS

65.png

66.png

67.png

avatar
文章
阅读
粉丝