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

一、本堂课重点内容

初步前端技术栈CSS
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
深入CSS
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级

二、详细知识点介绍

初步CSS

[css]

[css定义]

css称为Cascading Style Sheets，用来定义页面元素的样式。

css功能包括：

设置字体和颜色
设置位置和大小
添加动画效果

[页面使用css的方式]

方法包括外链、嵌入、内联三种

[css如何工作]

包括加载HTML和CSS、解析HTML和CSS、创建DOM树

[调试css]

1.右键点击页面，选择[检查]

2.使用快捷键

Ctrl+Shift+I (Windows)
Cmd+Opt+I (Mac)

[选择器]

[选择器]

选择器为选中页面元素，以便给他们设置样式

多种选择元素的方式：

按照标签名、类名或id
按照属性
按照DOM树中的位置

[通配选择器]

[标签选择器]

[id选择器]

[类选择器]

[属性选择器]

[组合]

[选择器组]

[属性]

[颜色-RGB]

[颜色-HSL]

包括色相、饱和度、亮度

[透明度]

[字体属性]

字体属性由font-family去定义；
可以使用Web Fonts 渲染；
line-height定义行高
white-space空白符

深入CSS

[选择器的特异度]

[继承]

继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值。

[显式继承]

[初始值]

[CSS求值过程]

[布局]

Layout定义：

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术：

[盒模型]

width：

指定content box宽度
取值为长度、百分数、auto
auto由浏览器根据其他属性确定
百分数相对于容器的content box 宽度

height：

指定content box高度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的content box 高度
容器有指定的高度时，百分数才生效

padding：

指定元素四个方向的内边距
百分数相对于容器宽度

border：

指定容器边框样式、粗细、颜色

margin:auto：水平居中

box-sizing：border-box

[块级vs.行级]

[display]

block：块级盒子
inline：行级盒子
inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none：排版时完全被忽略

[常规流Normal Flow]

[行级排版上下文]

[块级排版上下文]

[BFC内的排版规则]

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

[Flex Box]

定义：

[justify-content] [justify-content]

[Flexibility]

[Gird布局] 二维布局方式

[display:grid]

grid包括划分网格、grid line网格线、grid area网格区域

[float浮动]

[position 属性]

static：默认值，非定位元素
relative：相对自身原本位置偏移，不脱离文档流
absolute：绝对定位，相对非static祖先元素定位
fixed：相对于视口绝对定位

[position: relative]

在常规流里面布局
相对于自己本应该的位置偏移
使用top、left、bottom、right设置偏移长度
流内其它元素当它没有偏移一样布局

[position: absolute]

脱离常规流
相对于最近的非static祖先定位
不会流内元素布局造成影响

三、实践练习例子

标签选择器

<div>
  <h1>这是头</h1>
  <p>这是文段</p>

  <style>
  h1 {
    color: blue;
  }
  p {
    color: gray;
    font-size: 20px;
  }
  </style>
</div>

四、课后个人总结

在本次课堂中，CSS中的块/行级、flex这些方面不容易理解，CSS中的组合这部分各种组合容易混淆。不过学习到了CSS的各种属性以及模型工具等。

理解CSS ｜ 青训营笔记