这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
CSS是什么
Cascading Style Sheets 用来定义页面元素的样式，设置字体和颜色，设置位置和大小，添加动画效果
CSS语法结构
页面中使用CSS
- 外链（用link标签引入）
- 嵌入（在style标签中书写）
- 内联（在需要添加样式的标签中添加style属性，较不推荐）
CSS如何工作
选择器Selector
找出页面中的元素，以便给他们设置样式
- 按照标签名，类名或id
- 按照属性名
- 按照DOM树中的位置
选择器种类
- 通配选择器(*)
- 标签选择器(标签名)
- id选择器(#，id值唯一)
- 类选择器(class类名)
- 属性选择器(通过属性名或属性值来选中，也可用正则表达式匹配，例：[disable]或特定的值[type="password"]或[href^="#"])
伪类（pseudo-classes）
不基于标签和属性定位元素 种类 状态伪类 结构性伪类
组合(Combinators)
颜色表示（每种颜色都是0-255）
#6位字符，每两位字符表示一种颜色数量 rgb(xx,xx,xx)
颜色-HSL
- Hue：色相(H)是色彩的基本属性，如红，黄等，取值范围0-360
- Saturation：饱和度(S)是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%
- Lightness：亮度(L)指颜色的明亮程度；越高颜色越亮，取值范围0-100%
- hsl(颜色数量，饱和度%，亮度%)
透明度（alpha）
表示方式（1为不透明，0为完全透明）
- #6位表示颜色数量，两位表示透明度
- rgba(xx,xx,xx,透明度)
- hlsa(颜色数量，饱和度，亮度，透明度)
通用字体族
表示某一类字体，并不表示特定字体，使用时建议表示英文的字体名放在表示中文的字体名前面
web fonts的使用
选择器优先级
选择器特异度
继承
某些属性会自动继承父元素的计算值，除非显式指定一个值，盒模型相关的属性不会继承
显式继承
关键字inherit,可让原本不可继承的属性变为可继承的
用如上的方式的好处是，先用通配符选择器默认修改所有盒模型的box-sizing为显式继承，这样后代默认继承父元素box-sizing
初始值
CSS中，每个属性都有一个初始值，bgc初始值为transparent，margin-left初始值为0，可以用initial关键字显式重置为初始值，例：bgc：initial
CSS解析过程
布局(Layout)是什么
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟结点和内容等信息来计算
布局相关技术
- 常规流（行级，块级，表格布局，FlexBox，Grid布局）
- 浮动
- 绝对定位
盒模型
content(width、height)、padding、border、margin
width
- 指定content box宽度
- 取值为长度，百分数，auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box宽度
- 取值为长度，百分数，auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
- 容器由指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
- 指定一个值表示四个方向，指定两个值，第一个值表示上下的宽度，第二个表示左右，指定四个值，表示上下左右四个方向，值的顺序就是上下左右
border
- 指定容器边框样式、粗细和颜色
- 三种属性(width,style,color)
- 四个方向
技巧：当内容为0时，可把任意三个方向的边框颜色设置为透明，这样可得到四个方向之一的三角形
margin
- 指定元素四个方向的外边距
- 取值可以是长度，百分数，auto
- 百分数相对于容器宽度
- 指定一个值表示四个方向，指定两个值，第一个值表示上下的宽度，第二个表示左右，指定四个值，表示上下左右四个方向，值的顺序就是上下左右
常规流
- 根元素、浮动和绝对定位的元素离常规流
- 其他元素都在常规流之内
- 常规流的盒子，在某种排版上下文中参与布局
行级排版上下文
块级排版上下文
Flex Box是什么
- 一种新的排版上下文
- 可以控制盒子的摆放的流向，摆放顺序，盒子宽度和高度，水平和垂直方向的对齐是否允许折行
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；不够时会收缩
- flex-grow有剩余空间时伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
Grid布局
dispaly:grid
- 使元素生成一个块级的grid容器
- 使用grid-template相关属性将容器划分为网络
- 设置没用过子项占哪些行/列
