这是我参与「第四届青训营」笔记创作活动的的第2天，今天我跟随韩老师开始了CSS（层叠样式表）的学习。

CSS在页面中的使用

外链样式：通过link标记指定CSS文件路径引入外部CSS文件。

<link rel="stylesheet" href="style.css">

嵌入样式：通过在HTML文件中的style标记中书写CSS样式代码实现。

<style>
    p{
        font-size:1.5em;
        color:red;
    }
</style>

内联样式：通过在元素标记内书写style属性并给予样式实现。

<p style="color:blue">Hellp</p>

CSS选择器的使用

标记选择器：以标记名选中所有指定的HTML标记；
通配选择器：使用*作为标识选中所有DOM节点；
id选择器：选中带有指定的id属性值的DOM节点（每个id值唯一，不可在多个标记中重复使用）；
类选择器：选中带有指定的class属性值的DOM节点；
属性选择器：选中所有带有指定属性名以及属性值或仅指定属性名的DOM节点，属性值匹配：
1. 使用^=筛选以指定值开头的属性值；
2. 使用$=筛选以指定值结尾的属性值；
伪类选择器：
1. 状态性伪类
2. 结构性伪类

选择器的组合

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的后代元素	nav a
父子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟组合	A B	选中B，如果它是A的下一个同级元素	h2~p
相邻组合	A B	选中B，如果它是A的下一个元素	h2+p
选择器组	A,B	分别选中多个满足条件的元素	h1,h2>p,[disabled],div:hover

常规流

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

行级排版（IFC）规则

盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开（float）浮动元素

块级排版（BFC）规则

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

flex布局

容器的属性

flex-direction

决定主轴的排列方向

flex-direction:row | row-reverse | column | column-reverse

justify-content

决定元素在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items

决定元素在交叉轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch;

align-self

决定单个元素在交叉轴的对齐方式

 align-self: auto | flex-start | flex-end | center | baseline | stretch;

order

决定元素排序的优先级，数值越小越靠前，默认为0

order: <integer>;

flex-grow

决定元素的放大比例，默认为0（即使空间有剩余，也不放大）

flex-grow: <number>; /* default 0 */

flex-shrink

决定元素的缩小比例，默认为1（当空间不足时，项目会缩小）

flex-shrink: <number>; /* default 1 */

flex-basis

决定在分配多余空间之前，元素占据的主轴空间,，默认值为auto（元素大小为原本大小）

flex-basis: <length> | auto; /* default auto */

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的复合属性，默认值为0 1 auto

flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

flex属性的使用


`flex:1`	====>	`flex-grow:1`
`flex:100px`	====>	`flex-basis:100px`
`flex:2 1`	====>	`flex-grow:2;flex-shrink:1`
`flex:1 100px`	====>	`flex-grow:1;flex-basis:100px`
`flex:2 0 100px`	====>	`flex-grow:2;flex-shrink:0;flex-basis:100px`
`flex:auto`	====>	`flex:1 1 auto`
`flex:none`	====>	`flex:0 0 auto`

Grid布局

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

可以使用repeat()函数简化多个重复值，repeat()函数接收两个参数，第一个为重复的次数，第二个为重复的值。

grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(4,100px 50px 75px);

position(定位)

static：默认值，不对元素进行定位
relative：相对定位，相对于自身原本位置进行偏移，不脱离文档流
- 在常规流进行布局
- 相对于自己原本的位置偏移
- 使用top、left、right、botton控制偏移方向与距离
- 流内的其他元素认为它没有进行偏移，按照原来方式进行布局
absolute：绝对定位，相对于最近的非static的祖先元素定位
- 脱离常规流
- 相对于最近的非static的祖先元素定位
- 不会对流内元素布局产生影响
fixed：固定定位，相对于视窗进行绝对定位

在这次学习中，不仅巩固了我对于css选择器的使用，也让我深入理解的各种布局的使用方法，也学习了我一直没怎么关注的grid布局。

理解CSS ｜ 青训营笔记