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

选择器的特异度（Specificity）

选择器的特殊程度，越特殊的选择器优先级会越高。

CSS的样式可以进行覆盖，可以更加方便的实现复用。
主要按钮就用.btn.primary来选中

继承

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

恰当的使用继承可以简化代码，降低CSS样式的复杂性子元素可以继承父元素的样式(text- , font- , line- 这些元素开头的可以继承，以及color属性)

有些元素我们不可去继承,可以使用inherit关键字，表示显示的从父级去继承

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

初始值

CSS种，每个属性都有一个初始值
- background-color 的初始值为transparent（透明的）
- margin-left 的初始值为0
可以使用 initial 关键字显示重置为初始值
- background-color : initial（手动设置初始值，相当于background-color : transparent;）

CSS求值过程

CodePen - 青训营/CSS/取值过程 (cdpn.io)

布局(Layout)是什么？

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

布局相关技术

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

盒模型：一个盒子就是一个容器

width

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

height

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

padding 内边距

padding属性用于设置内边距，即边框与内容之间的距离

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding属性可以有一到四个值

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5px的内边距
padding: 5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px;	4个值，上是5像素，右是10像素，下是20像素，左是30像素顺时针

border 边框

用于指定容器边框的样式、粗细和颜色

三种属性 | 属性 | 作用 | | ------------ | ---------------------- | | border-width | 定义边框粗细，单位是px | | border-style | 边框的样式 | | border-color | 边框颜色 |
四个方向

属性	作用
border-top	上边框
border-right	右边框
border-bottom	下边框
border-left	左边框

也可以进行灵活组合

margin 外边距

指定元素四个方向的外边距
取值可以时长度、百分数、auto
百分数相对于容器宽度

使用 margin: auto 水平居中

margin 在垂直方向上有边距的合并/折叠

margin collapes

box-sizing: border-box

当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。

box-sizing: content-box/border-box;

content-box : 浏览器对盒模型的解释遵从W3C标准，定义 width 和 height 时，它的参数值不包括 border 和 padding。
border-box : 定义 width 和 height 时，border 和 padding 的参数值包含在 width 和 height 之内。

overflow

控制溢出的内容如何展示

overflow: visible

overflow: hidden

overflow: scroll

块级vs行级

Block Level Box	Inline Level Box
不和其他盒子并列摆放	和其他行级盒子一起放在一行或拆开称多行
适用所有的盒模型属性	盒模型中的 width 、 height 不适用

块级元素	行级元素
生成块级盒子	-生成行级盒子 - 内容分散在多个行盒（line box）中
body 、article 、div 、main 、section 、h1-6 、p 、ul 、li 等	span 、em 、strong 、cite 、code 等
display: block	display: inline

display 属性

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

常规流 Normal Flow

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

行级排版上下文
块级排版上下文
Table排版上下文
Flex排版上下文
Grid排版上下文

行级排版上下文

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

块级排版上下文

Block Formatting Context (BFC)
某些容器会创建一个 BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;

BFC内的排版规则

盒子从上到下摆放
垂直 margin 合并
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠

Flex Box 是什么

CodePen Embed - 青训营/CSS/Flex

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

flex-direction

主轴与侧轴

主轴的对齐方式

justify-contect

侧轴的对齐方式

align-items

align-self

order

Flexibility

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

flex-grow

CodePen Embed - 青训营/CSS/flex-grow

A、B、C都占100px，容器减去300px后还剩余一点，把剩余部分按照2：1的比例分配给A和B

flex-shrink

刚性的，压缩压不动

CodePen Embed - 青训营/CSS/flex-shrink

flex-basis

元素不被压缩不被拉伸的时候，原原本本的值

进行缩写

Grid布局

display: grid

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

划分网格

CodePen - 青训营/CSS/grid-template (cdpn.io)

grid line 网格线

CodePen - 青训营/CSS/grid-area (cdpn.io)

float浮动

实现文字环绕的效果

position 定位

position 属性

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

position: relative

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

position: absolute

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

CodePen Embed - 青训营/CSS/position

CodePen Embed - 青训营/CSS/position-fixed

学习CSS的几点建议

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

前端第二天---深入CSS｜ 青训营笔记