这是我参与[第四届青训营]笔记创作活动的第二天。

通过本节课的学习，对CSS有了比较清晰的了解做出如下总结： 1、什么是CSS；2、CSS选择器；3、CSS工作方法；４、深入CSS；5、学习CSS的建议

一、什么是CSS：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、常见的选择器：

h1{
   color:red;
   font-size:14px;
  }

h1是选择器，表示要对页面上所有h1定义样式。 {}内写入要定义的声明，由属性和属性值组成。

通配选择器：

可对页面上所有元素定义样式.

id选择器：

使用时注意id应唯一

类选择器：

例子:对所有class="done" 的元素定义样式

在页面中使用CSS有三种方法：

外链、嵌入、内联。

属性选择器：

^="#"表示定义以#开头的属性，$=".jpg"表示定义以.jpg结尾的属性。

三、CSS工作方式：

伪类：

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

CSS伪类是用来添加一些选择器的特殊效果

状态伪类例子：

结构性伪类例子：

选择器组：

字体：

调试CSS：

四、深入CSS：

当多个选择器匹配到同一元素时根据选择器的特异度决定。

继承：

显式继承：

初始值：

CSS中，每个属性都有一个初始值。
- background-color的初始值为transparent。
- margin-left的初始值为0.
可以使用initial关键字显式重置为初始值。
- background-color:initial

CSS求值过程：

布局：

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

布局相关技术：

10px 20px 10px 20px(上右下左)

border：

指定容器边框样式、粗细和颜色。

使用margin:auto 可以水平居中。

两种常见布局规则:

块级和行级

块级元素:

生成块级盒子
body article div main section h1-6 p ul-l li等
display:block

行级元素：

生成行级盒子
内容分散在多个行盒(line box)中
span em strong cite code 等
display:inline

常规流 Normal Flow：

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

BFC内的排版规则：

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

Flex Box：

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

Flexibility：

Grid 布局：

display:grid

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

划分网格：

1、grid-template-columns: 100px 100px 200px;grid-template-rowS:100px 100px
2、grid-template-columns: 303% 308% auto;grid-template-rows: 100px auto
3、grid-temglate-columns:100px 1fr 1fr;grid template-rows: 100px 1fr

1、

3、

position属性：

position:ralative

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

position:absolute

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

五、学习CSS的建议

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

CSS简介|青训营笔记