CSS笔记|青训营笔记

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

在页面中使用CSS的三种方式：

0. 外链，使用link标签引入CSS：

   <link rel="stylesheet" href='/assets/style.css'>
   

1. 嵌入：

   <style>
       li{ margin:0;list-style:none}
   </style>
   

2. 内联，直接写在html标签的style属性中

   <p style="margin:lem 0">
   </p>
   

伪类

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

1. 状态伪类：当元素处于某种状态时才会被选中

   <style>
       a:hover{
           color:orange;
       }
   </style>
   

2. 结构伪类：例如选中列表中第一个元素

   <style>
       li:first-child{
           color:coral
       }
   </style>
   

组合

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B，如果它是A的子元素	section > p
兄弟选择器	A ~ B	选中B，如果它在A后且和A同级	h2 ~p
相邻选择器	A + B	选中B，如果它紧跟在A后面	h2 + p

颜色

0. RGB：red,green,blue
1. RGBA: red,green,blue,alpha
2. HSL: Hue（色相），Saturation（饱和度），Lightness（亮度）

字体

0. font-family：在字体族最后加上通用字体族，如serif,sans-serif等

CSS选择器的特异度

0. #id：100
1. .类（伪类）：10
2. 标签：1

继承

0. 某些属性会自动继承父元素的计算值，除非显式指定一个值（盒模型中的属性不继承，如height，width等）

1. 显式继承：使用inherit

   * {
       box-sizing :inherit
   }
   html{
       box-sizing:border-box
   }
   

CSS求值过程

盒模型

0. width,height指定的是content box的宽和高
1. padding：顺序是上右下左
2. box-sizing：border-box中的width和height指的是包括border、padding和content

块级和行级

0. 块级：不和其他盒子并排摆放，适用于所用的盒模型
1. 行级：和其他行级盒子一起放在一行或拆开多行使用，盒模型中的width和height不适用

BFC块级排版上下文

0. 某些容器会创建一个BFC

   0. 根元素
   1. 浮动、绝对定位、inline-block
   2. Flex子项和Grid子项
   3. overflow值不是visible的块盒
   4. display：flow-root

1. BFC内的排版规则

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

Flex布局

flex是Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性

容器默认存在两根轴: 水平的主轴(main axis) 和垂直的交叉轴(cross axis) 。主轴的开始位置(与边框的交叉点)叫做main start，结束的位置佳作main end；价差周的开始位置又叫做cross start，结束为止叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴控件佳作main size，占据的交叉轴控件叫做cross size。

Grid布局

Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。 Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。

position属性

0. static
1. relative
2. absolute
3. fixed
4. stiky