理解CSS | 青训营笔记了解CSS 在页面中使用css的三种方法外链：嵌入：内联：(不好维护，一般不推荐)写在标

这是我参与「第四届青训营」笔记创作活动的的第1天

以下笔记内容是我个人觉得比较重要且有点遗忘的知识点，我整理出来便于下次深刻记忆!

了解CSS

在页面中使用css的三种方法
- 外链：
```
<link/>
```
- 嵌入：
```
<style>
.....
</style>
```
- 内联：(不好维护，一般不推荐)写在标签内：
```
  <h1 style= "color:red"/>
```
选择器找出页面中元素，以便给它们加上样式
- 分类
  - 通配选择器 *{....}
  - 标签选择器如：a{color:black}
  - id 选择器：#id{...}
  - 类选择器：.class{....}
  - 属性选择器：[disabled]{....}
    input[type="password"]{...}
    a[href^="#"]{...} ^以什么开头，$以什么结尾
  - 伪类选择器：
    - 不基于标签和属性定位元素
    - 状态伪类：比如a:hover a:visted 输入框中 :focus
    - 结构性伪类: 对dom元素结点的操作如first-child
组合
- 直接组合：AB - 满足A的同时满足B；如input:focus
- 后代组合：A B - 中间有空格，选中B，如果是A的子孙；如ul a
- 亲子组合：A>B - 选中B,如果是A的子元素；如ul>li
- 兄弟选择器：A~B - 选中B 如果它在A后且和A同级；如：h2~p
- 相邻选择器: A+b - 选中B 如果它紧跟在A后; 如h2 + p
- 选择器组同时设置多个元素的样式；如body,a,ul,input{.....}
颜色
- rgb(r,g,b)
  - 分别代表红绿蓝，取值范围0-255
- hsl(h,s,l)
  - h:色相即色彩的基本属性，0-360
  - s:饱和度即色彩的鲜艳程度，0-100%
  - l:亮度，越高越亮，0-100%
- 透明度 alpha
  - rgba(r,g,b,a) hsla(h,s,l,a)
  - 取值范围0-1，0指完全透明，1指完全不透明
字体
- 使用font-family来设置，考虑到多个设备的展示情况，可以设多个值
- 通用字体族:
  - serif 衬线体
  - sans-serif 无衬线体
  - cursive 手写体
  - fantasy 比较花哨的字体
  - monospace等宽字体
  - 使用建议：通用字体族放最后；英文字体放中文字体前面
- 使用Web Font：下载字体包后，利用@font-face{...}进行设置但会带来一点的性能开销
white-space
- 取值：
  normal,nowrap,wrap, pre(保留所有),
  pre-wrap(保留空格，放不下时换行),
  pre-line(合并空格，保留换行)

深入css

选择器的优先级（特异度） id > (伪)类 > 标签
继承：某些属性会自动继承其父元素的值，除非显示指定一个值 - 一般来说，跟盒模型相关的属性不能继承，和文字相关的都能继承 - 显示继承： box-sizing:inherit - 设置初始值：原初始值： background-color:tansparent 重置初始值： background-color:initial
css 求值过程

layout 布局
- height
  - 指定的时content box 高度
  - 取值为长度，百分数auto
  - auto 取值由其他属性计算的来
  - 百分数相对于容器的content box 高度
  - 容器有指高度时，百分数才生效
- border-box:border-sizing 盒子模型计算发生变化：border+padding+content 为自己设置的高度
- 常规流(Normal Flow)
  - 根元素、浮动和绝对定位的元素会脱离常规流
- 行级排版上下文（IFC）
  - 盒子在一行内水平摆放
  - 一行放不下时，水平摆放
  - text-align(水平方向) vertical-align（垂值方向）
  - 避开浮动元素
- 块级排版上下文
  - 创建BFC
    - 根元素
    - 浮动、绝对定位、inline-block
    - Flex子项和Grid子项
    - overflow不是visible的块盒
    - display:flow-root
  - BFC 排版规则
    - 盒子从上到下摆放
    - 垂直margin合并
    - BFC内的margin不与外合并
    - 不与浮动元素重叠
- FlexBox 弹性布局
  - 设置子项的弹性
    - flex-glow:1 对剩余空间的伸展能力
    - flex-shrink 不足空间时的收缩能力
    - flex-basis 基础长度
- Grid(网格) 布局
  display:grid
  其他复杂用法看文档
总结

布局排版很重要，要理解float,position在排版中的作用，尤其是position:absolute（子），一定要配合position:relative(父)来用，布局会更得心应手！

理解CSS | 青训营笔记

了解CSS

深入css

总结