css又稱層疊樣式表，其中css2.1最為廣泛，css3之後便是分模組公升級。
首先在加入css樣式時用border除錯法，加入邊框便可清楚發生什麼變化，方便我們繼續寫**。
1、css的文件流
行內元素：inline ，寬度由內容決定，高度由line-height間接決定。
行內塊元素：inline-block，整個元素是個整體，不會分開，寬度由內容和內聯元素總和決定，高度由文件流元素總和決定。
塊級元素：block，能有多寬，就有多寬，寬度：佔據整行。高度由文件流元素總和決定。
2、盒模型
box-sizing：content-box/border-box
二者區別前者寬度等於內容，後者寬度等於border+padding+內容。
（小知識）
3、布局
（1）float布局
子元素加float：left和寬度，元素脫離文件流，父元素必須加上.clearfix
.clearfix:after有寬度的塊級元素： auto 左右居中。
使用float做平均布局 （要加入-margin）
（2）flex布局
（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
產生層疊上下文：
更多請看（
層疊上下文developer.mozilla.org
5、動畫
首先知道瀏覽器渲染原理：
根據html構建html樹（dom）
根據css構建css樹（cssdom）
將2棵樹合併成一顆渲染樹（render tree）
layout布局（文件流、盒模型、計算大小和位置）
paint 繪製（把邊框顏色，文字顏色，陰影等畫出來）
composite合成（根據層疊關係展示畫面）
三種更新方法：
（1）transition（過渡）：屬性名 時長 過度方式 延遲
搭配transform的移動translate， 縮放scale，旋轉rotate等展示動畫
（2）animation： 名字 時長 動畫方式 等屬性
@keyframs 名字
50%（）
100%（）
}（建立動畫）
以上便是css的總結歡迎補充~
css如何讓div顯示在最上層
方法 設定div樣式 z index auto auto可定義為乙個值 整數數字 越大代表越置前，如可定義為 z index 999。前提是div是定位元素。再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智慧的隊伍中來！方法 設定div樣式 z ...
IE6下select總是在最上層的解決辦法！
ie6下select總是在最上層的解決辦法！在ie6下，我們使用select的時候，會發現不管對上層的div的z index給多大的值，select總是要從下面冒出來，在網上找了一下，主要解決方法有兩種 1，通過iframe遮蓋select。2，通過js控制select的顯示和隱藏，不過當div只是...
CSS知識 浮動 定位
所有的元素預設情況下都是在文件流中存在的 文件流是網頁的最底層 元素在文件流中的特點 內聯元素 相對定位 相對於元素自身在文件流中的位置進行定位 相對定位的元素不會脫離文件流，定位元素的性質不會改變，塊還是塊，內聯還是內聯 如果不設定偏移量，元素不會發生任何的變化 會提公升元素的層級 絕對定位 相對...