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

CSS 概述

层叠样式表，用于定义页面元素的样式

方式：外链嵌入内联

CSS 选择器

通配选择器标签选择器 id选择器类选择器属性选择器伪类选择器（状态/结构）组合选择器

设置文本样式

颜色 rgb hsl hsl（18,66%，61%）alpha 透明度（rgba，hsla）字体 font-family 大小 font-size 字重 font-weight 行高 line-height 处理空白 white-space

继承一般文字继承盒子不继承显示继承（指定）inherit

CSS 布局

常规流（行级块级表格布局 FlexBox Grid布局）
浮动
绝对定位

盒模型

width 取值为长度、百分度、auto height 取值为长度、百分度、auto 容器有指定高度时，百分数才生效 padding 内边距 border 边框（根据每条边框不同的设置可以得到各种各样的三角形 margin 外边距（auto水平居中）

box-sizing：border-box

有时内容会从框里溢出来，请设置 overflow
overflow：visible 调整框的大小
overflow：hidden 多于内容隐藏
overflow：scroll 多余内容在视窗内可滚动

常规流

根元素、浮动、绝对定位的元素会脱离常规流
其他元素在常规流之内（in-flow）
常规流的盒子，在某种排版上下文参与布局

排版上下文

行级（IFC）
块级（BFC）
table
Flex
Grid

块级行级

块级
不和其他盒子并列摆放
body article div main section h1-h6 p ul li 等
行级（width height 可能设置无效）
和其他行级盒子放在一行或多行
span em strong cite code 等

display属性

block 块级
inline 行级
inline-block 行级可设宽高作为整体不会被拆散成多行
none 排版时完全忽略

Flex 布局

主轴-水平-justify-content

侧轴-竖直-align-item

Flexibility

可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
flex grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

Grid

display：grid 使元素生成一个块级的GRID容器使用grid-template相关属性将容器划分为网格设置每个子项占哪些行/列

浮动

float 实现文字环绕效果、

定位

position属性

static 默认值，非定位元素
relative 相对于自身本来的位置偏移，不脱离文档流
absolute 绝对定位，相对于非static祖先元素定位（不影响别的元素）
fixed 相对于视口绝对定位

个人感想

这节课让我们系统地回顾了css的概念，引入方式，选择器，盒模型和许多常用的布局方式，让我发现了一些之前没有思考或者注意到的细节。在视频的最后老师提出了三点建议：充分利用MDN和W3C，保持好奇心，持续学习。希望自己会坚持上面的几点并且继续加油。

理解CSS ｜ 青训营笔记（2）