这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS初识
CSS(Cascading Style Sheets) 美化样式
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
三种样式表总结（位置）
选择器
- id选择器： 看HTML标签中的id
.xxx {
}
复制代码
- 类选择器： 看HTML中的class
#xxx {
}
复制代码
- 属性选择器： 看HTML中设置的属性
[xxx] {
}
复制代码
伪类
-
不基于标签和属性定位元素
-
几种伪类
- 状态伪类
①、:link 默认
②、:visited 访问过
③、:hover 鼠标移动到
④、:active 鼠标点击
⑤、:focus 聚焦 - 结构性伪类
①、:first-child 第一个
②、:last-child 最后一个
- 状态伪类
white-space处理空白符
- normal：默认，多个空格合并
- nowrap：不换行
- pre：保留所有（空格、换行）
- pre-wrap：一行内显示不下，自动换行，保留空格
- pre-line：合并空格，保留换行
深入CSS
margin collapse
margin 垂直方向上，取值大的那个外边距，而不是上下值相加
| 块级 | vs | 行级 |
|---|---|---|
| 不和其他盒子并列摆放 | 和其他行级盒子一起放在一行或拆开成多行 | |
| 适用所有的盒模型属性 | 盒模型中的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不会和浮动元素重叠
Flex Box 是什么？
-
一种新的排版上下文
-
它可以控制子级盒子的：
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
display:grid
- 使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
position
- static---默认值，非定位元素
- relative---相对自身原本位置偏移，不脱离文档流
- absolute---绝对定位，相对非static祖先元素定位
- fixed---相对于视口绝对定位（滚动时固定区域）
