CSS基础｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第3天 CSS基础、CSS布局、CSS Modules

这是我参与「第四届青训营」笔记创作活动的的第3天

CSS知识

0.声明-Declarations、100 different properties

截屏2022-07-28 上午12.52.51.png

1.选择器-Selectors
基础类型：通配Universal、元素Type、类Class、ID、属性Attribute
组合类型：后代Descendant 、子代Child、一般兄弟General sibling、相邻兄弟Adjacent sibling、列Column
伪类伪元素： :Pseudo classes、::Pseudo elements

2.逻辑属性和值-Logical Properties and Values

3.规则集-At-rule

4.盒模型-Box Model

5.布局-Layout

6.层叠和继承-Cascade and inheritance

权重相同，后面覆盖前面，权重不同看优先级千、百、十、个组合优先级

截屏2022-07-27 下午11.24.22.png

控制继承：inherit、initial、revert、unset、revert-layer
取值过程

截屏2022-08-20 上午10.07.22.png

[7. 文本空格和断行-white-space、word-break、overflow-wrap]
【CSS】：white-space、word-break、overflow-wrap
【CodePen】：white-space、overflow-wrap

截屏2022-08-20 上午10.39.15.png

布局Layout cookbook

正常文档流Normal flow
弹性布局Flexbox
网格布局Grids
浮动布局Floats
定位布局Positioning
多列布局Multiple-column layout
响应式布局Responsive design
媒体查询media queries

布局案例（垂直居中）

截图摘自10种垂直居中方法，其中5和10相似、9是8的简写、常用1、2、3

块格式化上下文BFC

正常流在水平模式下：块级元素垂直排列，行内元素水平排列；垂直模式下，块级元素水平排列
浮动和决定定位元素脱离文档流
BFC规定了区域中的元素布局和元素之间如何定位的关系

BFC形成

html、float不为none、position为absolute/fixed
overflow不为visible
contain为layout/content/paint
display为flex/inline-flex/grid/inline-grid/inline-block/flow-root/table/table-cell/table-caption/row/table-row/table-row-group/table-header-group/table-footer-group/inline-table
column-count不为1/auto或column-width不为auto、column-span为all

BFC规则

自适应布局：每个box左边对齐、BFC区域不与float重叠会依次排列
高度塌陷：清除浮动、浮动元素的高度也参与BFC计算
边距折叠：同一个BFC边距折叠，不同BFC不影响

BFC应用

移动端：flex；PC端：有兼容要求且宽高固定：则absolute+负margin，不固定：table-cell，无兼容要求则flex
居中元素定宽高：（absolute + 负margin） / （absolute + margin auto + 四个方向0） / （absolute + calc）
居中元素不定宽高：（font-size + line-height） / transform / table-cell / flex
一列定宽：BFC -（float + overflow: hidden）; （float + margin）; （absolute + margin）; （flex: 1）;
两列定宽：BFC布局 - （L + R + C - fl + fr + C_overflow）; flow布局 -（L + R + C - fl + fr + ml + mr）; flex布局 - （L + C + R - C_flex_1）; absolute布局 - （L + R + C - l0t0 + mlmr + r0t0）;

// 两列定宽
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>
</div>
.parent {
  width: 100%;
  height: 100px;
}
// BFC - （L + R + C - fl + fr + overflow）
.center {
  overflow: hidden;
  height: 100%;
}
// flow -（L + R + C - fl + fr + ml + mr）
.center {
  margin-left: 100px;
  margin-right: 100px;
  background: pink;
  height: 100%;
}
.left {
  float: left;
  width: 100px;
  height: 100%;
  background: skyblue;
}
.right {
  float: right;
  width: 100px;
  height: 100%;
  background: yellow;
}
// flex - （L + C + R - cflex1）省略
// absolute布局 - （C + L + R - l0t0 + mlmr + r0t0）;
.parent {
  width: 100%;
  height: 100px;
  position: relative;
}
.center {
  margin-left: 100px;
  margin-right: 100px;
  background: pink;
  height: 100%;
}

.left {
  position: absolute;
  width: 100px;
  height: 100%;
  left: 0;
  top: 0;
  background: skyblue;
}
.right {
  position: absolute;
  width: 100px;
  height: 100%;
  right: 0;
  top: 0;
  background: yellow;
}

截屏2022-08-20 下午12.10.49.png

// 居中元素定宽高
.out {
    position: relative;
}
// `absolute`+负`margin`
.in {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
// `absolute` + `calc`
.in {
    position: absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
}
// `absolute` + `margin auto` + 四个方向0
.in {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
// 居中元素不定宽高
// `transorm`
.in {
    position: absolute;
    left: 50%;
    top: 50%;
    transorm: translate(-50%, -50%);
}
// `line-height` + `font-size`
<div style="line-height: 100px;font-size: 0;text-align: center;">
  <div style="display: inline-block;vertical-align: middle;text-align: left;"><div>
</div>
// tabel-cell
<div style="display: table-cell;vertical-align: middle;text-align: center;">
  <div style="display: inline-block;"><div>
</div>
// flex省略
// grid省略

CSS装饰

阴影：box-shadow / drop-shadow / text-shadow
背景和渐变：background-image / border-image / gradient
动画：Using_CSS_animations
形状：Overview_of_CSS_Shapes
变换和过渡：Using_CSS_transitions / Using_CSS_transforms / 3D specific CSS properties

截屏2022-08-20 上午11.56.57.png

截屏2022-08-20 上午11.47.47.png

CSS变量

语法：--变量名
使用：先定义html根:root -> 后消费var(--变量名)
场景：主题切换

CSS Modules

作用：适应软件工程方法、组件化、类名和选择器作用域、样式隔离、通过构建工具编译，如webpack的css-loader后面的参数modules标识开启CSS Modules功能

  {
    test: /.css$/,
    loader: "style-loader!css-loader?modules"
  }

CSS Modules 用法教程

UI设计

功能导向贯穿设计和开发流程 MVP原则

设计原则

层级
一致性贯穿各个角落
写个大家看的设计书(1.对比 2. 重复 3. 亲密性 4. 对齐)
设计体系

布局：多列布局/固定布局，保持可视最小宽，居中 600-800

间距：由松到紧 4px 的增长性小尺寸和大尺寸间距的增长性对比

文字：十数个字重字号字色层级行高对齐

色彩：主题色功能色灰色色盘

截屏2022-08-20 上午10.23.38.png

深度：阴影

可变字体

Firefox Font Editor
microsoft-edge-variable-fonts-demo
Microsoft - Variable Fonts
Axis-Praxis: Variable Fonts in the browser 通用字体簇

参考链接

codecademy
udacity
runoob-CSS3
freecodecamp-CSS
w3schools-Learn CSS
css-tricks.com
w3.org-CSS

设计工具

excalidraw
figma
RefactoringUi
Color_picker_tool
Border-image_generator

CSS基础｜青训营笔记