又稱層疊樣式表，其中css2.1最為廣泛，css3之後便是分子產品更新。
首先在加入css樣式時用
border調試法，加入邊框便可清楚發生什麼變化，友善我們繼續寫代碼。
1、css的文檔流- 行内元素：inline ， 寬度 由内容決定， 高度 由line-height間接決定。
- 行内塊元素：inline-block，整個元素是個整體，不會分開， 寬度 由内容和内聯元素總和決定， 高度 由文檔流元素總和決定。
- 塊級元素：block，能有多寬，就有多寬， 寬度 ：占據整行。 高度 由文檔流元素總和決定。
二者差別前者寬度等于内容，後者寬度等于border+padding+内容。
（小知識）- block : margin會合并,上下重疊，左右不重疊。（如果要不合并，可以加border，加padding，加overflow：hidden）
- 機關：em：font-size的倍數。
- 顔色：transparent ：完全透明。
子元素加float：left和寬度，元素脫離文檔流，父元素必須加上.clearfix
.clearfix:after{
display:block;
content:"";
clear:both;
}
（1）容器：container
（2）内容：items
flex布局分容器樣式和内容樣式，容器樣式有很多種比如：決定方向，是否換行，主軸（justify-conten）的對齊方式，次軸（aligin-items）的對齊方式等。
内容樣式：
order：排列順序（從小到大）預設是0
flex-grow：配置設定多餘空間
flex-shrink：縮小，預設是1，0不能小。
align-self：會對齊目前 flex 行中的元素，并覆寫已有的
algin
-items的值。
（3）grid布局（網格布局）（1）容器：container
（2）元素：items
列 ：grid-template-columns
行：grid-template-rows
grid-template-areas: （劃分）
"a a a"
"b c c"
"b c c";
grid-area：（配置設定）
4、定位 （垂直螢幕方向） 層疊上下文：（最底層到最上層）：z-index：-1 ->background ->border ->塊級子元素 -> 浮動元素 -> 内聯子元素（内容）->z-index：1 産生層疊上下文：- 文檔根元素（
<html>
-
position
absolute
relative
z-index
auto
-
position
fixed
sticky
- flex (
flexbox
z-index
auto
- grid (
grid
z-index
auto
-
opacity
1
-
mix-blend-mode
normal
更多請看（
層疊上下文developer.mozilla.org
N/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context）
5、動畫首先知道浏覽器渲染原理：
- 根據HTML建構HTML樹（DOM）
- 根據CSS建構CSS樹（CSSDOM）
- 将2棵樹合并成一顆渲染樹（render tree）
- Layout布局（文檔流、盒模型、計算大小和位置）
- Paint 繪制（把邊框顔色，文字顔色，陰影等畫出來）
- Composite合成（根據層疊關系展示畫面）
三種更新方法：
@keyframs 名字{
0%{}
50%（）
100%（）
}（建立動畫）
以上便是css的總結歡迎補充~