这是我参与第五届青训营伴学笔记创作活动的第2天

走进CSS

定义页面样式
- 设置字体颜色
- 设置位置和大小
- 添加动画效果

css构成

h1 {
    color: white;
    font-size: 14px;
}
// 选择器Selector h1
// 选择器Property color
// 属性值Value white
// 声明 font-size: 14px;

页面中使用CSS

  <!-- 外链 -->
  <link rel="stylesheet" href="../02_CSS/01_走进CSS.css">
   <!-- 嵌入 -->
  <style>
    li { color: red; }
    p { color: blue; }
  </style>
  <!-- 内联 -->
  <p style="width: 14px;">exdasd</p>

css如何工作

选择器Selector

标签名，类名，id
- id用 # 号
- 类用 . 号

按照属性

[disable] { }
input[type="password"] { }
a[href^="#"] { } // 匹配开头型
a[href$="#"] { } // 匹配结尾型

伪类（pseido-classes）

状态伪类

a:link { }
a:visited { }
a:active { }
:focus { }

结构伪类
```
li:first-child { }
li:last-child { }
```

按照在DOM树中的位置
通配选择器 *

文本渲染

RGB
- #000000ff 最后两位表示不透明度
- rgba(红，绿，蓝，不透明度)
- hsla(色相，饱和度，亮度, 不透明度)
字体
- font-family
  - 不同网页展示不同的字体，从前到后只要有该字体就显示设备上有的字体，最后一位一般指定通用字体族
  - font-family: Optima, Georgia, serif;
  - font-family: , Sans-Serif;
  - @font-face 指定字体浏览器会尝试先去下载字体
- font-size
  - 关键词 small normal italic blod
- font-weight
  - 100-900 normal400 blod700
- line-height
- text-align
- white-space
  - normal nowrap pre pre-wrap pre-line

深入CSS

选择器的优先级

选择器的特异度（可以写一些通用的具体的再组合

继承

文字相关的一般都可以继承

显示集成

* {
   box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
.some-widgrt{
    box-sizing: content-box;
}

初始值

初始值每个属性都有初试著
- 可以使用initial显示重置初始值
CSS求值过程

CodePen - 青训营/CSS/取值过程 (cdpn.io)

布局（Layout）

确定内容的大小和位置的废
依据元素，容器，兄弟节点和内容等信息来计算
常用的布局技术
- 常规流
  - 行级
  - 块级
  - 表格布局
  - FLexBox
  - Grid布局
- 浮动
- 绝对定位

盒模型

两种模式
- border-box
  - 高度宽度是相对于content

- content-box - 高度宽度是相对于content

width height
- 指定box宽度
- 取值为长度 百分数 auto
- auto由浏览器和其他属性绝对
- 百分数相对容易的box宽度
- 容器有指定高度时，百分数才生效
padding
- 四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容易边框样式粗细和颜色
- 三种属性
  - border-width
  - border-style
  - border-color
- 四个方向
  - top right left bottom
- 可以利用边框来实现形状
margin
- 四个方向外边距
- 取值长度百分数 auto
- 百分数相对于容器宽度
- margin：auto水平居中
- 两个margin重合会取较大的那个

块级VS行级

Block Level Box	Inline Level Box
不和其他盒子并列摆放	其他行级一起放或者拆开放
适用所有盒模型属性	盒模型中的width、height不使用
body article div main section h1-6 p ul li等	span em strong cite code等
display: block	display: inline

display
- block
- inline
- inline-block 本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行
- none 排版时完全忽略

行级排版上下文

Inline Formatting Context （IFC）
只包含行级盒子的容器会创建一个IFC
IFC内排版规则
- 盒子在一行内水平摆放
- 一行放不下换行
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定盒子在行内垂直对齐
- 避开浮动（float）元素

块级排版上下文

Block Formatting Context （BFC）
某些容器会创建一个BFC
- 根元素
- 浮动绝对定位 inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root;
排版规则
- 盒子上下摆放
- 垂直margin合并
- 盒子内margin不会和外部合并
- BFC不会和浮动元素重叠