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

一、个人笔记

Cascading Style Sheets

选择器Selector
Declaration {Property: value}

外链link 推荐使用
嵌入style
内联style

CSS是如何工作的

Selector

找出页面中的元素，以便给它们设置样式
使用多种方式选择元素
按照标签名、类名或id
按照属性
按照DOM树中的位置
通配选择器* 标签选择器 id选择器#id 类选择器属性选择器
例：
href^="#" href以#开头
href$=".jpg" 以.jpg结尾

伪类pseudo-classes

不基于标签和属性定位元素

状态伪类
结构性伪类基于DOM树

例：
链接的状态：
link默认状态
visited访问过
hover鼠标移上
active鼠标按下
输入框focus状态
li:first-child last-child

组合Combinators

选择器组

颜色

RGB
HSL
Hue色相0～360
Saturation饱和度0～100%
Lightness亮度0～100%
alpha不透明度0～1

字体font-family

Web Fonts

font-size

关键字small、medium、large
长度px、em
百分数相对于父元素字体大小

font-weight粗细

100～900
400-normal
700-bold 需要字体本身支持

line-height行高

字体大小的1.6倍

text-align两端对齐
space
text-indent首行缩进
text-decoration下划线删除线
white-space空白符 normal nowrap pre pre-wrap保留空格换行 pre-line保留换行

调试CSS

右键点击页面，选择检查
使用快捷键 Ctrl+Shift+I(Win) Cmd+Opt+I(Mac)

选择器优先级

特异度Specificity高优先特殊样式额外的class覆盖
color、font-size等可以继承

不可继承属性：显式继承

*{
  box-sizing:inherit;
}

hrml{
  box-sizing: border-box;
}

.some-widget{
  box-sizing: content-box;
}

初始值

CSS中，每个属性都有一个初始值
background color的初始值为transparent
margin-left的初始值为0
可以使用initial关键字显式重置为初始值
background color: initial

CSS的求值过程

盒模型

布局Layout

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

width

指定content box宽度
取值为长度、百分数、auto
auto由浏览器根据其他属性决定
百分数相对于容器的content box宽度

height

指定content box高度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效

padding页边距

指定元素四个方向的内边框
百分数相对于容器的宽度

border边框

指定容器边框样式、粗细和颜色
三种属性
border-width
border-style
border-color
四个方向
border-top
border-right
border-bottom
border-left

margin外边距

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器的宽度 margin collapse: bottom top取大值

border-box

overflow

visible hidden scroll

块级&行级

display属性

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

行级排版上下文

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

块级排版上下文

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

Flex Box

一种新的排版上下文
它可以控制子级盒子的：
摆放的流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行对齐

Flexibility

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

display:grid

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

划分网格

float浮动

绝对定位

position属性

static 默认值，非定位元素
relative 相对自身原本位置偏移，不能脱离文档流
absolute 绝对定位，相对非static祖先元素定位
fixed 相对于视口绝对定位

position:relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内其它元素当它没有偏移一样布局

position:absolute

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

position:fixed

脱离常规流
相对于窗口定位

CSS｜ 青训营笔记