CSS
CSS(Cascading Style Sheet): 層疊樣式表,控制網頁的樣式.選擇器區分大小寫.
- 作用: 通過選擇器來定位DOM(文件物件模型)的元素,將各種樣式規則應用在元素上,改變元素在頁面上的顯示方式.
- 使用方式: 內聯樣式 + 內部樣式 + 外部樣式
盒模型
- 標準盒模型 = content +border + padding +margin
- IE盒模型 = content(content + border + padding) + margin
- 空間 = padding(內邊距) + margin (外邊距) + border (邊框)
塊級元素/行內元素
- 塊級元素: 預設寬度是100%,塊級元素會自動從新的一行開始.div table h1-h6 p form ol section canvas audio video
- 行內元素: 和其他元素在同一行,寬度/高度時內容的寬度和高度, a span b img input select strong
BFC(塊級格式化上下文)
- 塊級格式化上下文,是一個獨立的渲染區域,讓處於BFC內部的區域與外部的元素相互隔離,使內外元素的定位不會影響.在IE下為layout,可通過zoom:1;觸發.
- 計算BFC容器的高度時,浮動元素也會參與計算.容器內的Box會在垂直方向上一個接著一個放置.兩個相鄰的box的margin會發生重疊.
- 觸發BFC: float: none; position: absolute; position: fixed; display: inline-block/table-cell/inline-flex/felx; overflow: visable;
層疊上下文
在三維空間.z軸高出普通元素.
- 觸發條件: html ,position, flex, transform opacity filter will-change
- 層疊等級:在同一層疊上下文中,層疊等級才有意義. background-color < z-index: -1; < 塊級元素 < 浮動元素 < 行內元素 < z-index: 0 /auto; < z-index: 1;
顏色
- 十六進位制: hex使用6個十六進位制編碼來表示顏色,2個一組,分表表示紅(R),黃(G),藍(B).
- hsl色彩: hsl(60,100%,50%)
佈局
- 文字對齊方式: text-align: left/right/center/justify;
- 盒陰影: box-shadow: offset-x offset-y blur-raduis spread-radius;
- 透明度: opacity: 0.7;
- 字母的大小寫: text-transform: lowercase / uppercase / capitalize / initial /inherit / noen;
- 方向: top left right bottom;
- 定位: position: relative(元素的定位參照於最近的已定位祖先的元素) absolute fixed ;
- 堆疊順序: z-index: 10;
- 變換 transform: scale(2) skewX;
偽類
- 列表專案
動畫
- 列表專案