这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
一、本堂课重点内容
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
二、详细知识点介绍
CSS含义
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
页面使用方式
- 内联（这个是在标签里面写样式的）
- 外联（这个是在本文件外写样式，然后再本文件中引用外部文件的样式）
- 嵌入（在style大标签里面写各种小标签的样式）
示例代码如下：
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
li { margin: 0; list-style: none; }
p { margin: lem 0; }
</style>
<!--内联 -->
<p style="margin:lem 0">Example Content</p>
CSS工作模式
选择器介绍
- 选择器 Selector
- 通配选择器
- 标签选择器
- 类选择器
- id选择器
- 属性选择器
调试CSS
- 右键点击页面，选择“检查”。
- 使用 快捷键。Ctrl+Shift+I(Windows)；Cmd+Opt+I(Mac)
CSS 选择器的特异度
- 含义： 选择器的特殊程度
- 计算方法： 数出选择器中 id 、（伪）类、标签的个数，从左往右（特殊性依次减小）排成三位数。这个三位数就是选择器的特异度。如果特异度相同顺序靠后的规则生效。
继承
- 某些属性会自动继承其父元素的计算值，除非显式指定一个值。
显式继承
- 使用
inherit属性值设置，可以使不可继承的元素变为可继承。 - 通配选择器内设置了所有容器大小都从父元素继承。
初始值
-
CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
-
可以使用 initial 关键字显式重置为初始值
- background-color: initial
布局含义
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
- 常规流
- 浮动
- 绝对定位
行级与块级区别
| 块级元素 | 行级元素 |
|---|---|
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
| 生成块级盒子 | 生成行级盒子；内容分散在多个行盒(line box)中 |
| body、article、div、main、section、h1-6、sp、ul、li 等 | span、em、strong、cite、code 等 |
| display: block | display: inline |
display 属性
- block： 块级盒子
- inline： 行级盒子
- inline-block： 本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
- none： 排版时完全被忽略
常规流
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内 (in-flow)
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC 内的排版规则
块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建一个BFC
Flex Box含义
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向 ( → ← ↑ ↓ )
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
三、课后个人总结
- 要充分利用好 MDN 和 W3C CSS 规范
- 一直保持好奇心，善于运用浏览器的开发者工具
- 保持持续学习的心，CSS新特性还在不断出现，需要及时学习
