这是我参与「第四届青训营 」笔记创作活动的的第2天
CSS是什么？
Cascsding Style Sheets
用来定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果
简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
css分为：外链、嵌入、内联
CSS是如何工作的？
CSS 选择器
选择器 Selector
找出页面中的元素，以遍给他们设置元素
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
通配选择器
在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。
在 CSS3 中，星号 (*) 可以和命名空间组合使用：
ns|*- 会匹配ns命名空间下的所有元素*|*- 会匹配所有命名空间下的所有元素|*- 会匹配所有没有命名空间的元素
标签选择器
作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性。
id选择器
在一个 HTML 文档中，CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素，元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。
类选择器
在一个 HTML 文档中，CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。
属性选择器
CSS属性选择器通过已经存在的属性名或属性值匹配元素
伪类（pseudo-classes）
不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类
组合（Combinators）
css样式
font-family 使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
font-size
-
关键字
- small、medium、large
-
长度
- px、em
-
百分数
- 相对于父元素字体大小
line-height
line-height CSS属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
text-align
text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。
text-indent
text-indent 属性能定义一个块元素首行文本内容之前的缩进量
text-decoration
text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 [text-decoration-line]、 [text-decoration-color]、[text-decoration-style]和新出现的 [text-decoration-thickness]属性的缩写。
white-space
white-space CSS 属性是用来设置如何处理元素中的 [空白 (en-US)]。
初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显示重置为初始值
- background-color:initial
布局（Layout）是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术：常规流（行级、块级、表格布局、FlexBox、Grid布局）、浮动、绝对定位
width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
指定容器边框样式、粗细和颜色
border三种属性
-
border-width
-
border-style
-
border-color
-
四个方向
- border-top
- border-bottom
- border-right
- border-left
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
使用margin：auto水平居中
margin collapse外边距折叠
什么是外边距折叠
准确来说，外边距折叠应该叫垂直外边距折叠，因为只会发生在垂直方向上，而水平方向上不会发生。
box-sizing：border-box
border-box告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
overflow
CSS 属性 overflow 定义当一个元素的内容太大而无法适应 [块级格式化上下文] 时候该做什么。它是 [overflow-x]和[overflow-y]的简写属性
值
visible- 默认值。内容不会被修剪，可以呈现在元素框之外。
hidden- 如果需要，内容将被剪裁以适合填充框。不提供滚动条。
scroll- 如果需要，内容将被剪裁以适合填充框。浏览器显示滚动条，无论是否实际剪切了任何内容。 （这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。
auto- 取决于用户代理。如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。如果内容溢出，桌面浏览器会提供滚动条。
overlay- 行为与
auto相同，但滚动条绘制在内容之上而不是占用空间。仅在基于 WebKit（例如，Safari）和基于 Blink 的（例如，Chrome 或 Opera）浏览器中受支持
dispaly属性
bolck 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略
常规流 Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
- 行级排版上下文
- 块级排版上下文
- Table 排版上下文
- Flex 排版上下文
- Grid 排版上下文
行级排版上下文
-
Inline Formatting Context（IFC）
-
只包含行级盒子的容器会创建一个IFC
-
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
块级排版上下文
-
Block Formatting Context（BFC）
-
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- dispaly：flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box是什么？
-
一种新的排版上下文
-
它可以控制子级盒子的：
- 摆放的流向（→ ← t ↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
dispaly：grid
- dispaly：grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
position属性
- static 默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位
- fixed 相对于视口绝对定位
position：relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其他元素当它没有偏移一样布局
