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

选择器Selector

多种方式选择元素： eg:

标签名、类名、id、属性、DOM树中的位置

通配选择器

标签选择器

id选择器

（唯一）

类选择器

属性选择器

$= 以指定结尾

链接选择器：

link, visited, hover, active, focus

结构伪类

li:first-child li:last-child

组合

颜色

RGB

rgb, 0-255 #000000-#ffffff

HSL

Hue, Saturation, Lightness 色相，饱和度，亮度

alpha透明度

font-family

通用字体族：
Serif衬线字体
Sans-Serif无衬线体
Cursive手写体
Fantasy
Monospace 等宽字体

white-space

normal：空格合并 nowrap：强制不换行 pre：保留所有 pre-wrap：行内显示不下的时候换行 pre-line：合并空格保留换行

深入CSS

优先级

特异度（Specificity）越高优先级越高

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

显示继承

eg: box-sizing 不可继承

*{
box-sizing: inherit
}
.some-widget{
box-sizing: content-box
}

初始值

background-color: transparent margin-left: 0 background-color: initial

CSS求值过程

布局 Layout

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

布局相关技术

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

盒模型

width

指定content box宽度取值长度、百分数（相对容器content box宽度）、auto

height

同width 容器有指定高度时，百分数才生效

padding

border

三种属性、四个方向

margin

长度、百分数（相对于容器宽度）、auto margin collapse：两个边距取较大边距

border-box: 包含border和padding的值

overflow

visible, hidden, scroll

display属性

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

行级排版上下文

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

实现打断一个单词换行：

div{
    width: 10em;
    overflow-wrap: break-word
    background: #411;
    }

块级排版上下文

Block formatting Context(BFC) 内的排版规则：
盒子从上到下摆放，垂直margin合并，BFC内盒子和margin不会与外面的合并，BFC不会和float重叠

FLex Box

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

.container{
diaplay: flex;
}

主轴和侧轴

justify-content

align-items

Flexibility 可以设置子项的弹性。
flex-grow 有剩余空间时的伸展能力
flex-shrink
flex-basis 没有伸展或收缩时的基础长度

Grid布局

position属性

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

CSS基础 ｜ 青训营笔记