这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

Lecture2.1 走进前端技术栈 - CSS

css是什么

• 层叠样式表
• 定义元素样式

语法

h1 {
    color: red;
    font-size: 20px;
}

• h1是选择器

使用

• 外联：用<link rel="stylesheet" href="...">
• 嵌入：用<style />
• 内联：用元素的style属性，仅对当前元素有效
• 内联不是很推荐，外联比较常用

css如何工作

• 解析出每个节点的css属性，再附加到DOM树上

选择器

• 按标签名（h1, div, ...），类名（.name），id（#name）
• 按属性（[disabled], [type="password"], 不一定是等于，^=以字符串开头 $=以字符串结尾）
• 按DOM树位置
• 通配选择器（*）
• 关于伪类
  • 状态类（hover, active, focus, ...）
  • 结构类（first-child, last-child, ...）
• 组合
  • 直接组合（AB），同时满足A和B生效
  • 后代组合（A B），B是A的子孙节点生效
  • 亲子组合（A>B），B是A的直接孩子节点生效
  • 兄弟组合（A~B），B在A后面且同级生效
  • 相邻组合（A+B），B在A后面且相邻生效
• 选择器组，使用逗号分隔

颜色

• RGB颜色（红绿蓝）
  • rgb(R,G,B)十进制表示
  • #RRGGBB十六进制表示
• HSL颜色（色相、饱和度、亮度）
  • hsl(H,S,L)后面两个参数是百分比
• 预定义颜色，有很多
• alpha不透明度，取值0~1，0是透明
  • 井号表示法在后面加上两位即可
  • 或者用rgba()或hsla()

文字

• 字体：font-family
  • 一般是逗号分隔的多个值
  • 从前到后尝试适配
  • 匹配不同的操作系统
  • 通用字体族，指的是一类字体：serif（衬线体）, sans-serif（无衬线体）, cursive, fantasy, monospace（等宽字体）
  • 建议英文字体写在中文前面，因为中文字体往往对英文也有定义
  • web fonts：@font-face，写font-family和url
• 大小：font-size
• 样式：font-style（粗体斜体）
• 粗细：font-weight（100~900，normal是400，bold是700）
• 行高：line-height（两行文字基准线的距离，不加单位是文字大小的若干倍）
• 可以合并为font属性
• white-space：处理空格
  • normal：多个空格合并为一个
  • nowrap：不换行
  • pre：原始样式
  • pre-wrap：保留空格，自动换行
  • pre-line：保留换行，合并空格

Lecture2.2 深入CSS（上）

优先级

• 根据特异度，特异度高的优先
• id>类名>标签名
• 若只有同一级，数量多的优先级更高

继承

• 子元素继承父元素的样式
• 和文字相关的基本都是继承的
• 但是和模型相关的基本都不继承（如width）
• 显式继承（强制继承）：设置值为inherit

初始值

• 没设置属性或者继承的时候找不到父亲样式，则会使用初始值
• 强制使用初始值：设置值为initial

css求值过程

• 解析DOM树和样式规则
• 根据选择器筛选规则，得到一组声明值
• 根据优先级，选出优先级最高的一个层叠值
• 如果层叠值是空的，就寻找继承值或初始值，得到指定值
• 将可以直接算出的相对值和相对路径解析，得到计算值
• 将计算值中的关键字继续解析，得到使用值
• 小数转换，限制处理，得到实际值

布局layout

总体分类

• 常规流
  • 行级
  • 块级
  • 表格布局
  • flex
  • grid
• 浮动
• 绝对定位

详解盒模型

盒子模型content-box：从里到外content, padding, border, margin

• 默认选项
• height和width：长度，百分比，auto
  • auto根据内容计算
  • 百分比根据容器的content box计算
  • 容器有确定高度，百分比才生效
• 内边距padding
  • 一个参数：四个方向都一样
  • 两个参数：上下、左右
  • 四个参数：上、右、下、左
  • 百分比是相对于容器宽度的
• 边框border
  • 三个属性（宽度、样式、颜色）
  • 四个方向
  • 如果四个边框颜色不一样，连接处是斜线平分
  • 通过将内容设置为空，可以用边框搭建出三角形
• 外边距margin
  • 四个方向
  • 长度，auto，百分数
  • 如果左右都是auto可以让元素水平居中
  • margin在垂直方向上会进行折叠，上下元素响应margin取大处理

盒子模型border-box：从里到外content, padding, border, margin

• 宽度和高度计算的是边框的而不是内容的
• 比较符合人的思维模式

关于溢出

• visible，默认，不加处理
• hidden，切掉溢出的部分
• scroll，提供滚动条

Lecture2.3 深入CSS（下）:从布局layout继续

块级与行级的盒子

• 块级的不能并列，行级的是一起放一行
• 行级的不能指定宽度和高度

块级与行级的元素

• 分别生成对应的盒子
• 通过display设置block和inline来确定

关于display

• block：块级
• inline：行级
• inline-block：是行级，但是不能被拆分成多行
• none：不展示

行级排版上下文

• 只有行级盒子的容器创建
• 一行之内摆放
• 放不下的时候换行
• text-align水平对齐
• vertical-align垂直对齐
• 避开float元素

块级排版上下文

• 根元素
• 浮动，绝对定位，inline-block
• flex, grid
• 盒子从上到下摆放
• 垂直margin合并
• 里面的margin不会和外面的合并

flex box

• 可以控制盒子中元素摆放的流向、顺序、对齐方式，控制盒子本身的宽度、高度、是否允许换行

流向flex-direction

• row，从左到右，默认
• row-reverse，从右到左
• column，从上到下
• column-reverse，从下到上

对齐

• 主轴：元素排列的方向轴

  • justify-content
    • flex-start挤在起点
    • flex-end挤在终点
    • center挤在中间
    • space-between中间加空白，两边不加
    • space-around中间加空白，两边加少一点
    • space-evenly中间加空白，两边加多一点

  

• 侧轴：和主轴垂直的方向轴

  • align-items
    • flex-start挤在起点
    • flex-end挤在终点
    • center挤在中间
    • stretch拉伸到充满
    • baseline基线对齐

  

  • align-self，设置某个元素自己的对齐

弹性flexibility

• 设置子元素的收缩/伸展能力
• flex-grow，伸展能力，按比例分配剩余空间
• flex-shrink，收缩能力，比例分配压缩量
• flex-basis，基础长度
• 可以缩写成一个属性flex
  • 一个参数
    • 不带单位：flex-grow
    • 带单位：flex-basis
  • 两个参数
    • 都不带单位：flex-grow flex-shrink
    • 一个带单位：flex-grow flex-basis
  • 三个参数：flex-grow flex-shrink flex-basis
  • auto：1 1 auto
  • none：0 0 auto

换行

• flex-wrap

grid布局

• 一个二维的布局样式

grid-template划分格子

• grid-template-columns设置列
• grid-template-rows设置行

grid-line网格线

• 表示区域：通过边界线
• grid-row/column-start/end
• 或者写grid-area: 1/1/3/3（行开始/列开始/行结束/列结束）

position

• static，默认，非定位元素
• relative，相对自身偏移
  • 用top, left, right, bottom设置偏移量
  • 不会影响周围元素的布局
• absolute，绝对定位，相对于非static祖先定位
  • 脱离常规流布局，不会对流内元素产生影响
  • top, left, right, bottom设置距离
• fixed，相对视口定位
  • 脱离常规流布局，不会对流内元素产生影响
  • 总是相对于窗口定位
  • top, left, right, bottom设置距离
• sticky，粘性定位