前言

今天主要学习CSS语言的相关知识点与应用技巧。

基础知识

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

样式表来源
选择器优先级
源码位置

样式表来源重要排序（重要程度递增）

用户代理样式（浏览器默认样式）
用户样式表（很少有）
作者样式表（developer写的）
作者样式表中的! important
用户样式表中的! important
用户代理样式表中的! important

选择器分类

基础选择器

#id-- ID选择器。Tagname- - - - 类型选择器或者标签选择器。

.class- --类选择器。*--通用选择器。该选择器匹配所有元素
组合器

子组合器(>) --匹配的目标元素是其他元素的直接后代。如: .parent > child.

相邻兄弟组合器(+) - -匹配的目标元素紧跟在其他元素后面。如: p +h2。

通用兄弟组合器(~) - -匹配所有跟随在指定元素之后的兄弟元素，如: li.active ~ li。

复合选择器：多个基础选择器可以连起来使用，如: h1.page-header。
属性选择器

通过约束属性值，div[data-title="aaa"]
伪类选择器

选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如:first-child ，:hover
伪元素选择器

匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2:: first-letter, div:before
逻辑选择器

较新的选择器:is() :has() :where() :not()

CSS的值和单位

值

文字类:比如像initial这种关键字，颜色、位置等等

数值类:比如z-index:1 这种数值，或者带有单位的数值、百分比等

函数生成:比如calc()， min()， max() 等

单位

长度:
1. 绝对长度: px, pt, cm, n.....
2. 相对长度: em, rem, ex, rex... vw, vh, vmin, vmax...
角度: deg, grad, turn, rad
时间: s, ms
分辨率: dpi, dpcm, dppx

布局

概述

CSS 3之前的常用布局
1. Normal Flow常规流
  
  默认的布局方式
  
  有块级格式化上下文和内联格式化上下文
2. Float浮动流
  
  用float属性控制
  
  脱流，做横向布局
3. Positioning 定位流
  
  用position属性控制
  
  fixed和absolute脱离文档流可以自由定位、覆盖等
CSS 3之后的新增布局

Flex弹性盒子布局、一维空间布局；

Grid网格布局、二维空间布局；

Multicol多列布局、文本、内容的多列展示；

常规流布局

外部显示类型(display-outside): 规定了该盒子如何与同一格式上下文中的其他元素一起显示。
内部显示类型(display-inside):规定了该盒子内部的布局方式。比如display: flex;其外部显示是block，参与BFC; display: inline-flex,则外部显示是inline,参与IFC。他们内部的盒子都参与弹性盒子布局。

Grid和Flex布局的使用策略

Flex

一维布局
基于内容
浏览器兼容性更好

Grid

二维布局
基于布局
2017年后浏览器的版本普遍支持

注意区别：网格用于布局，Flexbox用于组件

大面积或整体布局推荐使用Grid布局
小面积或组件中，或Grid ltem中可以使用Flex做灵活布局

响应式设计

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

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

媒体查询

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

使用媒体查询的一些Tips

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

其他

通过这一部分的学习，大致了解了前端CSS的一些基础东西，为后续的学习奠定了基础。本次课程还介绍了布局、响应式设计等，感兴趣的同学可以自行去学习字节内部课程。

（ ps：本次学习主打的就是快乐！！！）

理解CSS ｜ 青训营笔记

前言