基础知识
1. CSS的三个位置
-
内部样式表
可以通过style标签来创建一个内部样式
-
外部样式表
将样式编写到css文件中,然后通过link标签引入外部样式
并且外部文件可以利用到浏览器的缓存机制，加快用户的访问速度
-
内联样式表
可以直接将css编写到标签的style属性中
2. CSS的基本语法
- 选择器
用来指定要设置样式的元素
- 声明块
用来设置样式；由一对大括号括起来；里边是一个一个声明
里边是一个一个声明
声明是一个明值对：
一个样式名对应一个或多个样式值，之间用:连接，使用;结尾
3. CSS选择器
基本选择器（元素选择器，id选择器#，类选择器.,通配选择器*）属性选择器[]，分组选择器，伪类选择器（:link/:visited/:hover/:active）
选择器优先级
继承的样式:没有优先级
通配选择器:0,0,0,0
元素选择器:0,0,0,1
类和伪类选择器:0,0,1,0
id选择器:0,1,0,0
内联样式:1,0,0,0
4. 盒子模型
每一个盒子，都由以下几部分组成
- 内容区（content）
内容区在元素最内部，用来容纳子元素
内容区的大小由width和height设置
- 内边距（padding）
内容区和边框之间的距离
- 边框（border）
边框是盒子边界，离开边框就属于盒子外部了
边框会影响盒子可见框大小
- 外边距（margin）
盒子与盒子之间的距离
由于浏览器默认是按照自左向右，自上向下的顺序来排列元素的
所以当设置上和左外边距时，是改变元素自身的位置
但是设置右和下外边距时，会改变其他元素的位置
margin不会改变元素可见框的大小，但是会改变实际占用大小
布局
1. 文档流（normal flow）
文档流是网页中的位置，我们所创建的元素默认都存在于文档流中
文档流中的元素，必须要遵循文档流的规则在页面中排列
块元素
块元素在文档流中自上向下垂直排列
块元素的默认宽度会将父元素撑满（默认值为auto）
块元素的默认高度被内容撑开
行内元素
行内元素在文档流中会自左向右水平排列
如果一行不足以容纳所有元素，则会另起一行继续自左向右水平排列
行内元素的默认宽度和高度都会被内容撑开
2. 定位
| position值 | 描述 |
|---|---|
| relative | 元素相对于自己原来在文档流中的位置进行定位,但是原来文档流的空间还在。 |
| absolute | 元素被移出正常文档流,且没有预留空间，相对于最近的非static定位祖先元素的进行定位。 |
| fixed | 元素被移出正常文档流,且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置 |
| sticky | 元素相对它的最近滚动祖先（祖先的overflow是scroll/hidden/auto)的视口(scrollport)定位 |
3. 弹性盒子
Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)的调整更为灵活。
4.Grid
Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。
层叠上下文（The stacking context）
-
层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的z轴排开
-
形成层叠上下文的条件（任一即可）
- position : relative 或absolute；并且z-index不是auto
- position : fixed 或sticky
- flex或grid的子元素；并且z-index不是auto
- opacity的值小于1
- transform的值不为none
- will-change的值不为通用值
- ......
-
层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序
