这是我参与[第五届青训营]伴学笔记创作活动的第2天
课堂笔记
本堂课重点内容
CSS概念和工作原理
各种CSS选择器以及盒模型和常用的布局方式
CSS概述：
在 前端和HTML课程中我们学习了 HTML 是什么，以及如何使用它来组成页面。浏览器能够解析这些页面。当开发者没有指定样式时，浏览器通过默认样式浏览器的默认样式。可能不太美观，但是可以通过使用 CSS 控制浏览器如何显示 HTML 元素，从而充分展示开发者想要呈现的设计样式。
CSS最基础的代码由选择器和由属性与属性值组成的声明组成
在页面中使用CSS有三种方法：
- 外链：把CSS的定义放在一个单独的文件里，然后用link标签把它引入到页面中
<link rel="stylesheet" href="CSS文件的位置"> - 嵌入:直接把样式嵌在
<style>标签里 - 内联：直接把标签的属性写在标签里边。eg:
<p style="margin:1em 0">内容</p>
一般更推荐第一种,最不推荐的是内联。
CSS工作流程：
选择器 Selector： 就是用多种方式选择页面中的元素，给他们设置样式。
- 通配选择器：
* - 标签选择器
- id选择器：生成一个id属性来选中元素，id属性值不能重复，是唯一的。
- 类选择器class：同一类型的标签去设置样式的时候可以用。
- 属性选择器：通过这个元素的一些属性或者属性值去选中这个元素。
只要元素里有disabled这个属性就可以选定：
用属性值选定时可以用type=""的形式：
伪类是不基于标签和属性定位元素，分为状态伪类和结构性伪类两种。
状态伪类：不是指某一个具体的值、某一个元素，还要处于一个特定的状态下。eg：链接，可以区分访问过和未访问过的。
连接的四种状态：
[选择器的特异度]
[字体]： 在定义字体的时候可以在最后添加一个通用字体族。
[继承]： CSS里的某些元素会自动的继承他父类元素的计算值，除非显示指定一个值。
继承也需要在上下文中去理解：一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。
[初始值]： CSS中，每个属性都有一个初始值
background-color的初始值为transparent margin-left的初始值为0
可以用initial关键字显示重置为初始值
background-color:initial
CSS求值过程
布局：确定内容的大小和位置的算法
通常根据元素、容器、兄弟节点和内容等信息来计算
布局会用到三种常用的方式：
常规流
浮动
绝对定位
盒模型
常见布局（行级&块级）
- 块级：不和其他盒子并列摆放；适用所有盒模型属性
- 行级：和其他行级盒子一起放在一行或拆开成多行；盒模型中的width、height不适用
[display属性]：
block：块级盒子
inline：行级盒子
inline-block：本身是行级，可放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none：排版时完全被忽略
一个只包含行级盒子的容器，会创建一个行级排版上下文（IFC）。
IFC内的排版规则
盒子在一行内水平摆放
一行放不下时，换行显示
text-align绝定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（float）元素
某些容器会创建一个块级排版上下文（BFC）：
- 根元素；
- 浮动、绝对定位、inline-block；
- Flex子项和Grid子项；
- overflow值不是visible的块盒；
- display：flow-root；
BFC内的排版规则
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠
