前言：课程概论

1.为什么要学习CSS

2.CSS简要发展历史

3.课程范围

课程内容：

1. 基础知识

2. 布局和定位

3. 层叠上下文（The Stacking Context）

4. 变形，过滤，动画

5. 响应式设计

6. CSS生态相关

一、基础知识

Casading规则，选择器，继承，值和单位，盒模型

1.层叠（Casading），优先级

HTML代码

<head>
<style>
#title{
color:red;
}
</style>
<link rel="stylesheet"href="./index.css"type="text/css">
</head>
<body>
<h1 id="title"style="color:green;">I am a title</h>
</body>

index.css

code.juejin.cn/api/raw/722…

2.层叠三大原则：

1. 样式表来源

2. 选择器优先级

3. 源码位置

3.样式表来源重要排序

用户代理样式（浏览器默认）

用户样式表（很少有）

作者样式表(developer写的)

作者样式表中的！important

用户样式表中的！important

用户代理样式表中的！important

这里忽略了transition和animation，原因是不同浏览器和css规范规定的表现不一致

4.选择器有哪些？

1.基础选择器

#id--ID选择器。Tagname--类型选择器或者标签选择器。 class--类选择器。* --通用选择器。该选择器匹配所有元素。

2.组合器

子组合器(>)--匹配的目标元素是其他元素的直接后代。如:parent>child

相邻兄弟组合器(+)-- 匹配的目标元素紧跟在其他元素后面。如:p+h2。

通用兄弟组合器(~~) 匹配所有跟随在指定元素之后的兄弟元素，如:liactive~~li复合选择器多个基础选择器可以连起来使用，如:h1page-header。

3.属性选择器

通过约束属性值，divdata-title=“aaa”

4.伪类选择器

选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如:first-child，:hover

5.伪元素选择器

四配在文档中没有直接对应HTML元素的特定部分，或插入内容。如 h2::first-letter，div::before

6.逻辑选择器

较新的选择器:is():has():where():not()

5. 选择器优先级

6.源码顺序

7.由层叠概念引申出的css代码good practice

选择器尽量少用id

尽量不要用！important

自己的样式加载在引用库样式的后面

8.继承

大部分具有继承特性的属性跟文本相关: color、fontfont-familyfontsizefont-weightfont-variantfont styleline-height、letter-spacing text-aligntext-indenttext- transform、white-space以及word-spacing 还有少部分列表、表格的属性。

可以使用inherit关键字显式指定一个属性值从其父元素继承

9.CSS的值和单位

10.盒模型

控制盒子类型 display: block、inline、inline-block、flex、….

控制盒子大小&计算方式 width, height ...

box-sizing:content-box、border-box

控制盒中内容流 overflow:auto、scrollhidden、...

控制定位 position:staticrelative absolutefixedsticky

是否可见 visibility:visiblehidden、….

① 实现三角形

//html
<div class="triangle-bottom"></div>

//css
.triangle-bottom{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid red;
}

② 实现固定比例矩形

//html
<div class="ratio-box"></div>

//css
.ratio-box{
background-color:cadeblue;
//width是父元素宽度的100%
width:100%;
height:0;
padding:0;
//padding-bottom是父元素宽度75%
padding-bottom：75%；
}

③ 实现水平居中

//html
<div class="wrap">
<div class="h-center"></div>
</div>

//css
.wrap{
width:100%;
height:80px;
border;1px dashed grey;
}
.h-center{
width:100px;
height:50px;
background-color:navajowhite;
//左右两侧的margin使用auto
//将水平方向剩余空间均分auto
margin:10px auto;
}

④ 实现渐变框

//html
<div class="awesome-boder"></div>

//css
.awesome-boder{
width:150px;
height:100px;
boder:8px solid transparent;
boder:-radius:12px;
background-clip:padding-box,boder-box;
background-origin:padding-box,border-box;
background-image:
linear-gradient(to right,#fff, #fff)
linear-gradient(135deg,#e941ab,#a557ef);
}

11.盒模型——负外边距

padding，border，margin中，只有margin可以设置负值。

1.设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠；

2.如果设置左边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来；

margin负值最终减少的是外界可感知的宽高。

二、布局

常规流，弹性盒子，Grid,定位

1.概述

CSS 3之前的常用布局

①.Normal Flow常规流

默认的布局方式

有块级格式化上下文和内联格式化上下文

②.Float浮动流

用float属性控制

脱流，做横向布局

③.Positioning定位流

用position属性控制

fixed和absolute脱离文档流可以自由定位，覆盖等

2.CSS 3之后的新增布局

①.Flex弹性盒子布局，一维空间布局

②.Grid网络布局，二维空间布局

③.Multicol多列布局，文本，内容的多列展示

2.常规流布局

3.块级格式化上下文（block formatting context）

格式化上下文的布局规范为：

"在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合(如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合)。">

那么，我们平时说的BFC是什么呢? BFC本身是blockformattingcontext的缩写，是一种格式规范。如果说一个盒子是BFC或者有BFC特性, 那么BFC表示的是block formatting context root。不管它外部显示类型是什么，但是它的内部显示类型是flow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文。

**如何触发一个盒子的BFC特性?以下条件满足任何一个即可

display:flow-rootinline-block;

position:absolute fixed;

float:不为none;

overflow:不为visible**

BFC具有一定的“沙盒”特性

4.外边距塌陷

1.会产生外边距塌陷的情况：

两个兄弟元素之间相邻的上下外边距

父子元素之间相邻的上下外边距

内容为空元素自己上下外边距

2.消除外边距塌陷的方法：

在两个相邻的上下边距之间增加border，padding或者内联元素，使之不相邻；

在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中。

5.内联级格式化上下文

“在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐:可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。(Therectanqular area that contains the boxes that form a line is called a line box）”

6.内联级格式化上下文

一些case：

单行文字垂直居中，比如标题

利用了line-height的垂直居中特性

//html
<div class="title">我是标题</div>
//css
.title{
background:antiquewhite;
font-size:18px;
line-height:36px;
height:36px;//可省
}

文字和icon垂直对齐

//html
<div class="wrap">
<img class="image" scr="dy.png">
<span class="text">抖音同款能力</span>
</div>
//css
.image{
width:24px;
height:24px;
verical-align:middle;
}
.text{
font-size:16px;
line-height:32px;
margin-left:4px;
vertical-align:middle;
}

利用了linebox中计算高度的原理和vertical-align的设置，垂直对齐，但不是完全垂直居中如果设置父元素font-size:0，基线和中线重叠，则居中对齐。

7.弹性盒子布局

Flexible BoxLayout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)的调整更为灵活。

8.使用弹性盒子布局的示例

展示灵活的文件长度省略展示

// html
<div class="filename">
<span class="filename__base">
this-file-has-a-really-really-really-long-filename.
</span>
<span class="filename__extension">
pdf
</span>
</div>

// css
.filename {
display:flex;
}
.filename__base {
text-overflow: ellipsis;
white-space: nowrap; 
overflow: hidden;
}
.filename__extension {
flex-shrink: 0;
}

1.展示筛子上的六个面

//html
<div class="dot-one">
<div class="dot"></div>
</div>
.dot-one{
display:flex;
justify-content:center;
align-items:center;
}

// html
<divclass="dot-three">
<span class="dot"></span>
<span class="dot dot-center">
</span>
<span class="dot dot-end"></span>
</div>

// css
.dot-three {
display: flex;
justify-content :space-between;
}
.dot-center {
align-self:center;
}
.dot-end {
align-self:flex-end;
}

// html
<div class="dot-five face">
<div class="row">
<div class="dot"></div>
<div class="dot"></div></div>
<divclass="row row-center">
<divclass="dot"></div>
</div>
<div class="row">
<divclass="dot"></div>
<div class="dot"></div>
</div>
</div>

// css
.dot-five {
display: flex;
flex-direction:column;
justify-content:space-between
}
.row {
display:flex;
justify-content:space-between;
} 
.row-center {
justify-content: center;
}

9.网格布局

2017年推出的Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网络中。元素可以只占其中一个单元格，也可以占据多行或多列。

作用于父元素:

display: grid I inline-grid;

用来生成显式的列、行 grid-template-colums/rows:数值/百分比/fr/repeat()等;

规定区域(area)的分布 grid-tempate-areas: "header header" "sidebar content" "footer footer";

规定默认的排序方向 grid-auto-flow:row(dense)I column(dense);

…其他属性

10.使用Grid布局的示例

将页面设置为均分的3*3grid布局

.face{
display:grid;
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr);
grid-template-areas:
"lt . rt"
"lc cc rc"
"lb . rb";
}

规定好所需要的点占用的area

.lt-dot{
grid-area:lt;
}
.rt-dot{
grid-area:rt;
}

.lc-dot{
grid-area:lc;
}

.cc-dot{
grid-area:cc;
}
.rc-dot{
grid-area:rc;
}

.lb-dot{
grid-area:lb;
}
.rb-dot{
grid-area:rb;
}

<div class="face">
<span class="dot cc-dot red">
</span>
</div>

<div class="face">
<span class="dot lt-dot"></span>
<span class="dot cc-dot"></span>
<span class="dot rb-dot"></span>
</div>

<div class="face">
<span class="dot lt-dot"></span>
<span class="dot lb-dot"></span>
<span class="dot cc-dot"></span>
<span class="dot rt-dot"></span>
<span class="dot rb-dot"></span>
</div>

11.Grid和Flex布局的使用策略

12.定位Position

-为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top,right,bottom,left对其进行定位。

1. relative

元素相对于自己原来在文档流中的位置进行定位，但是原来文档流的空间还在。

2.absoulte

元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位。

3.fixed

元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置。

4.sticky

元素相对它的最近滚动祖先（祖先的overflow是scroll/hidden/auto）的视口（scrollport）定位

三、层叠上下文（The Stacking Context）

1.层叠上下文

2.层叠上下文

形成新的层叠上下文的条件(任一即可):

position:relative或absolute;并且z-index不是auto

position:fixed或sticky

flex或grid的子元素;并且z-index不是auto

opacity的值小于1

transform的值不为none

will-change的值不为通用值

……详见规范*

3.层叠上下文

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序：

z-index 只能在同一个层叠上下文内比较
子元素的z-index无法超越父元素的z-index显示顺序

4.层叠上下文

编写z-index的建议： 1.使用css变量或者预处理语言的变量，管理z-index的值。 2.将预设间隔设置10或100，方便后续的插入。

四、变形，过渡，动画

1.transform变形

transform变形

2D相关属性: transform:translate(移动)、rotate(旋转)、 scale(放缩)、matrix(变形矩阵)等

transform-origin:right top、center等 表示变形时依据的原点

2.transform变形3D

3D 相关属性:

transform:translate3d、rotate3d、

scale3d、matrix3d等

transform-origin:right top、50px30px等

表示变形时依据的原点

transform-style:flat或preserve-3d看子元素的3d表现

perspective:观看点距离z=0这个平面的距离，可以在transform中用perspective()使用作用为当前元素，也可以直接使用，给后代元素一个统一值

perspective-origin:观看者的位置，如topbottom等

backface-visibility:元素正面只有朝向观察者的时候可见

3.transform变形3D

4.transition过渡

5.animation动画

@keyframes关键帧用来定义动画过程中出现的关键样式。

animation-*相关属性用来为元素添加动画

animation-name:定义好的关键帧的名字

animation-duration:动画时长

animation-timing-function:动画节奏

animation-delay:延时开始的时间

animation-iteration-count:执行次数

animation-direction:是否反向或交替

animation-fill-mode:动画执行前后的样式采用

animation-play-state:动画运行状态

@keyframes fadeInDown{
from{
opacity:0;
transform:translate3d(0,-100%,0);
}
to {
opacity:1;
transfrom:translate3d(0,0,0);
}
}
.fadeInDown{
animation-name:fadeInDown;
animation-duration:ls;
animation-fill-mode:both;
}

6.transform,transition,animation——性能相关

case2：非合成层元素背景色blue->red,需要CPU重新绘制主图。
case3：合成层元素文字色white>black,只需要Gpu重新绘制单独图层。
case4：合成层transform or opacity改变。

如何写动画性能更好？

1. 尽量不用触发reflow的属性

2. 在遇到性能问题时可以触发硬件加速，比如设置will-change属性，设置transform3d等。

3. 尽量使用transform和opacity去写动画

五、响应式设计

主要内容：

响应式设计原则
媒体查询
相对长度
绝对长度和视口

1.响应式原则推荐遵循的原则

优先选用流式布局，如百分比、flex、grid等

使用响应式图片，匹配尺寸，节省带宽

使用媒体查询为不同的设备类型做适配

给移动端设备设置简单、统一的视口

使用相对长度，em、rem、vw做为长度度量

2.媒体查询

媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型(如screenprint)以及媒体特性(如视口宽度，屏幕比例、设备方向:横向或纵向)做为约束条件。

使用媒体查询的一些Tips：

1.媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个

2.由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择

3.由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

3.设备像素，参考像素和移动设备视口

如图所示：

4.相对长度的使用

①.em

1.em:

在非font-size属性中使用是相对于自身的字体大小

在font-size上使用是相对于父元素的字体大小（一般不在这个属性上使用，因为font-size的继承特性，多重嵌套后大小不断放大或缩小，产生混乱）

应用场景：可以让展示区域根据展示字号的不同，做出放缩调整

// html
<div class="font-small paragraph">
文字较小时候的段落呈现</div>
<div class="font-large paragraph">
文字较大时候的段落呈现</div>

// css
.font-small
{
font-size: 12px;
}
.font-large 
{
font-size:20px;
}
.paragraph { padding:1em;
border-radius:0.5em;
line-height: 1.5em;
}

②.rem

③.vw和vh

CSS生态相关

语言增强：预处理器，后处理器

工程架构：CSS模块化，CSS-ln-Js,Atomic CSS

1.语言增强---CSS预处理器理解图

2.语言增强---postcss机制浅析

3.工程架构---CSS模块化

4.工程架构---CSS-In-JS

5.工程架构---style-component机制浅析

6.工程架构---原子化CSS

补充：

我们要理解CSS和熟练必须也要掌握以下：

掌握CSS的基本语法和结构，包括选择器、属性和值的写法，以及样式表的引入方式。

深入了解CSS盒模型，包括内容、内边距、边框和外边距四个主要部分，并掌握如何使用box-sizing属性来设置盒模型的计算方式。

学习CSS布局，包括文档流、浮动、定位和弹性布局等，了解每种布局的特点和使用场景。

掌握CSS的伪类和伪元素，包括常用的:hover、:active、:focus、:before和:after等，以及如何使用它们来实现常见的效果。

学习CSS动画和过渡，包括使用transition、animation和@keyframes等属性来实现动画效果，以及掌握如何设置动画的时间、缓动函数和延迟等参数。

持续学习和实践，可以通过阅读相关书籍、博客和视频教程，以及尝试实现不同的设计效果来加深对CSS的理解和掌握程度。

除了以上途径，还可以参考CSS规范和文档，了解CSS的标准和最佳实践，以及浏览器支持和兼容性等方面的知识。

希望能对大家学习CSS语法带来帮助，以上就是此次笔记的全部内容了，感谢大家的阅读~

深入理解CSS | 青训营笔记