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

一.选择器的特异度

优先级：id>伪类>标签

因此： .bin .pre会覆盖.bin的属性

二.继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值这里的pre就是显示指定了值，因此他没有继承父元素的值

什么是子元素？

eg： strong为p的子元素

<p><strong></strong></p>

注意：与盒子模型相关的元素不可被继承 如果非要继承父级：运用显示继承：

*{box-sizing:inherit;}

此代码将不可继承的box-sizing的所有元素都变为inherit，既可以从父类继承

三.初始值

css中，每个属性都有一个初始值为0
可以使用initial关键字显示重置为初始值
- eg：background-color:initial

四.css的求值过程

五.布局是什么

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

六.布局的相关技术

1.盒子模型

eg：

1.width

用来指定content box宽度
取值为长度，百分数，auto
auto由浏览器根据其他的属性确定
百分数相对于容器的content box宽度而定
容器有指定的宽度时，百分数才生效，否则为auto

2.padding

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

3.border

用来指定边框的样式，粗细和颜色

边框有三个属性：

border-width
border-style （eg:border-style:solid(实线)/dotted（虚线））
border-color

可以进行组合：eg：

border：1px solid red
border-left:1px solid red

4.margin

相当于当前盒子对于其他盒子的距离
指定元素四个方向的外边距
取值为长度，百分数，auto
百分数相对于宽度，没有宽度为auto（水平居中）

5.overflow

在使用外边框时，边框内的文字超出边框时使用

overflow：visible 显示超出的文字

overflow:hidden 去掉超出的文字

overflow:scorll 使用下拉条

6.四个方向

分别为：top/right/left/bottem
不管是padding还是border和margin都有四个方向

2.行级和块级

1.块级

不和其他的盒子并排摆放
适用所有的盒子模型属性
块级元素有：body,article,div,main,h1-6,p

2.行级

和其他行级盒子一起放在一行或拆开成多行
盒子模型中的width,height不适用
行级元素有：span,em,strong,cite

3.display属性

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

4.overflow

单词超出块元素换行
overflow-wrap:bread-word

5.行级排版上下文

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

6.块级排版上下文

某些容器会创建一个BFC
根元素
浮动，绝对定位，inline-block
FLEX子项和Grid子项
overflow值不是visible的块盒
display：flow-root
BFC内的排版规矩：
- 盒子从上到下拜访
- 垂直margin合并
- BFC内的盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠

7.Flex Box是什么

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

8.justify-content

1.flex-start

2.flex-end

3.center

4.space-between

5.space-around

6.space-evenly

9.align-items

1.flex-start

2.flex-end

3.center

4.stretch

5.baseline

10.Flexibility（灵活）

可以设置子项的弹性：当容器有剩余空间时会延伸，容器空间不够时，会伸缩

flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不够时的收缩能力
flex-basis 没有伸展或收缩时的基础长度

由于在这个环境运行与浏览器结果不一样，这里附上浏览器截图

11.Grid布局

1.区别：

2.display:grid

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

3.划分网络

.container {
    grid-template-columns: 40px 50px auto 50px 40px; 
    grid-template-rows: 25% 100px auto; 
}

值可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）

4.grid line网格线

可以明确指定网格线(Grid Line)：

我们可以用网格线来定位：

grid-row-start:1
    -column-start:1
    -row-end:3
    -column-end:3;

也可以写为：

grid-area:1/1/3/3

结果划分出了以下范围：

3.浮动

用来实现照片环绕文字的一个效果，在图片上使用之后文字会自动绕开图片

float:right/left

4.position属性

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

深入CSS | 青训营笔记