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

一、本堂课重点内容：

构建CSS块
样式化文本
CSS布局

二、详细知识点介绍：

CSS的工作原理

选择器

基本：通用，标签，类，ID
扩展：后代（空格），交集（紧挨），并集（逗号），伪类（冒号）

其他：子代（>），相邻（+），兄弟（~），序（第一个:first-child 最后一个:last-child） PS：属性选择器（[]）：

<input value="zhao" disabled />
<input type="password" value="123456" />
<a href="#top">回到顶部</a>
<a href="a.jpg">查看图片</a>
<style>
   [disabled] {
     background: #eee;
     color: #999;
   }
   input[type="password"] {
     border-color: red;
     color: red;
    }
    a[href^="#"] {
      color: #f54767;
      background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
      padding-left: 1.1em;
    }
    a[href$=".jpg"] {
      color: deepskyblue;
    }
 </style>

选择器的特异度，及优先级：ID选择器 > 类选择器 > 标签选择器

颜色-HSL Hue：色相0-360，Saturation：饱和度0-100%，Lightness-亮度0-100%

rgba(,,,)和hsla(,,,)的最后一个参数0-1可调节透明度

字体 font: style weight size/height family

通用字体族使用font-family的建议：

通用字体族卸载字体列表的后面
英文字体放在中文字体前 Web Fonts的使用：

<h1>Web fonts are awesome!</h1>

  <style>
    @font-face {
      font-family: "Megrim";
      src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
    }

    h1 {
      font-family: Megrim, Cursive;
    }
  </style>

text-indent 首行缩进
white-space 空白处理方式
- normal：忽略多余空白，只保留一个
- nowrap：只保留一个空白，遇br换行
- pre：保留空白
- pre-wrap：保留空白符序列正产换行
- pre-line：合并空白符序列，保留换行符
CSS求值过程
布局
- 常规流：行级，块级，表格布局，FlexBox，Grid布局根元素、浮动和定位的元素会脱离常规流，常规流中的盒子，在以下某种排版上下文中参与布局。
  - IFC 行级排版上下文
    
    IFC内的排版规则：
```
 1. 盒子在一行内水平摆放
 2. 一行放不下时，换行显示
 3. text-align决定一行内盒子的水平对齐
 4. vertical-align决定一个盒子在行内的垂直对齐
 5. 避开浮动(float)元素
```
  - BFC 块级排版上下文
    
    会创建BFC的情况：
    - 根元素
      - 浮动、绝对定位、inline-block
      - Flex子项和Grid子项
      - overflow值不是visible的块盒
      - display: flow-root;
    BFC内的排版规则
```
1. 盒子从上到下摆放
2. 垂直 margin合并
3. BFC内盒子的 margin不会与外面的合并
4. BFC不会和浮动元素重叠
```
  - Table排版上下文
  - Flex排版上下文
    
    Flexibility 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
    
    flex-grow 有剩余空间时的伸展能力
    
    flex-shrink 容器空间不足时收缩的能力
    
    flex-basis没有伸展或收缩时的基础长度
  - Grid排版上下文
    
    display: grid 块级Grid容器
    
    grid-template-columns 设置列
    
    grid-template-rows 设置行
- 浮动
- 绝对定位
  - static 默认值，非定位元素
  - relative 相对自身原本位置偏移，不脱离文档流
  - absolute 绝对定位，相对非static祖先元素定位
  - fixed 相对于视口绝对定位
盒模型

宽度（width）和真实占有宽度不同，真实占有宽度 = 左border + 左padding + width + 右padding + 右border。

标准盒模型中width和height指内容区的宽高，IE盒模型中width和height指内容+border+padding后的宽高。
1. 盒模型会发生margin外边距叠加，叠加后的值会以最大边距为准
  
  不是所有情况下都会发生外边距叠加，比如行内框、浮动框或绝对定位框之间的外边距不会叠加
2. 正常的盒模型默认值是content-box，元素所占的总宽高为设置的元素宽高(width/height)等于：content + padding + border
  
  设置为border-box之后，元素所占的总宽高为设置的元素宽高(width/height)
行内元素与块级元素
- 行内元素：a，span，label，strong，em，br，img，input，select，textarea，cite......
  1. 相邻元素排在同一行，
  2. 宽度由内容撑开，设置width\height无效，
  3. 可以设置边距的左右，设置上下无效，
  4. 不能包含行内\块级元素
  5. 特殊：img、input和其他元素同行，可以设置宽高
  6. css设置行内元素的居中：
    - 水平： div{ text-align: center }
    - 垂直： div{ height: xxpx; line-height: xxpx }
- 块级元素：div，h1~h6，p，form，ul，li，ol，dl，address，hr，menu，table，fieldset......
  1. 元素独占一行，
  2. 宽度自动填满父元素宽度，可以设置width&height，
  3. 可以设置margin & padding，
  4. 可以包含行内\块级元素
  5. 特殊：p不能包含div
  6. css设置块级元素的居中：
    - 水平： div p{ margin: 0 auto; width: xxpx }
    - 垂直： div{ width: xxpx } div p{ margin: 0 auto; height: xxpx; line-hsight: xxpx }
```
     display：inline 行内元素/内联元素
     display:block 块级元素
     display:inline-block 设置成行内块级元素。
```

三、实践练习例子：

让元素水平垂直居中的方法：

• 知道宽高

	margin: 0 auto;
	positon: relative;
	top: 50%;
	margin-top: -1/2 ;

• 不知道元素宽高

	margin: 0 auto;
	position: relative;
	top: 50%;
	translateY(-50%)
        
	display: flex;	 
	align-items: center;
	justify-content: center;

四、课后个人总结：

css求值过程：声明值-层叠值-指定值-计算值-使用值-实际值

老师提出的关于学习CSS的几点建议：

充分利用MDN和M3C CSS规范
保持好奇心，善用浏览器的开发者工具
持续学习，CSS新特性还在不断出现

五、引用参考：

关于属性选择器，W3Cschool CSS3教程

关于盒模型的计算问题，摘录自千古前端图文教程

理解CSS | 青训营笔记

一、本堂课重点内容：

二、详细知识点介绍：

三、实践练习例子：

四、课后个人总结：

五、引用参考：