前端_CSS

CSS

CSS(Cascading Style Sheet): 層疊樣式表,控制網頁的樣式.選擇器區分大小寫.

1. 作用: 通過選擇器來定位DOM(文件物件模型)的元素,將各種樣式規則應用在元素上,改變元素在頁面上的顯示方式.
2. 使用方式: 內聯樣式 + 內部樣式 + 外部樣式

盒模型

1. 標準盒模型 = content +border + padding +margin
2. IE盒模型 = content(content + border + padding) + margin
3. 空間 = padding(內邊距) + margin (外邊距) + border (邊框)

塊級元素/行內元素

1. 塊級元素: 預設寬度是100%,塊級元素會自動從新的一行開始.div table h1-h6 p form ol section canvas audio video
2. 行內元素: 和其他元素在同一行,寬度/高度時內容的寬度和高度, a span b img input select strong

BFC(塊級格式化上下文)

1. 塊級格式化上下文,是一個獨立的渲染區域,讓處於BFC內部的區域與外部的元素相互隔離,使內外元素的定位不會影響.在IE下為layout,可通過zoom:1;觸發.
2. 計算BFC容器的高度時,浮動元素也會參與計算.容器內的Box會在垂直方向上一個接著一個放置.兩個相鄰的box的margin會發生重疊.
3. 觸發BFC: float: none; position: absolute; position: fixed; display: inline-block/table-cell/inline-flex/felx; overflow: visable;

層疊上下文
在三維空間.z軸高出普通元素.

1. 觸發條件: html ,position, flex, transform opacity filter will-change
2. 層疊等級:在同一層疊上下文中,層疊等級才有意義. background-color < z-index: -1; < 塊級元素 < 浮動元素 < 行內元素 < z-index: 0 /auto; < z-index: 1;

顏色

1. 十六進位制: hex使用6個十六進位制編碼來表示顏色,2個一組,分表表示紅(R),黃(G),藍(B).
2. hsl色彩: hsl(60,100%,50%)

佈局

1. 文字對齊方式: text-align: left/right/center/justify;
2. 盒陰影: box-shadow: offset-x offset-y blur-raduis spread-radius;
3. 透明度: opacity: 0.7;
4. 字母的大小寫: text-transform: lowercase / uppercase / capitalize / initial /inherit / noen;
5. 方向: top left right bottom;
6. 定位: position: relative(元素的定位參照於最近的已定位祖先的元素) absolute fixed ;
7. 堆疊順序: z-index: 10;
8. 變換 transform: scale(2) skewX;

偽類

1. 列表專案

動畫

1. 列表專案