前端筆記 CSS

2022-06-19 17:15:11 字數 1345 閱讀 9072

1.使用background-image:url()引入雪碧圖

2.利用background-position屬性結合background-size,background-repeat等屬性定位需要的圖示

1.將多張合併到一張中,減小的總大小

2.減少http請求數,提高載入效能

1.減少http請求數,提高載入效能

2.適用於小

3.使用base64會增加體積(約為原圖的4/3)

1.偽類表示一種狀態,如:hover表示滑鼠懸停在元素上的狀態

2.偽元素是真的有元素,如::before可以在元素內容前面插入新內容

3.css3要求使用雙冒號表示偽元素,單冒號表示偽類

1.借助lable for 標籤通過id繫結input,這樣在點選label時就相當於點選了checkbox

2.將input標籤隱藏

3.設定未選中時label標籤的樣式,選中時通過相鄰選擇器:checked + label設定選中時的樣式

1.將div的寬高設為0

2.設定左右下邊框(畫素大一點),將左右邊框設為透明(transparent)

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

.clearfix::after
1.設定viewport

2.rem **查詢 百分比/vh vw

補間動畫

div

div:hover

關鍵幀動畫

div

@keyframes mymove

to }

若要使用逐幀動畫則需要指定animation-timing-function:step(1)

1.less(node.js)

2.sass(ruby)

1.**巢狀 反應層級

2.宣告變數@basecolor:#fff

3.mixin extend **塊,減少重複**

.block(@basecolor)

.div

.block

.div:extend(.block)

4.loop迴圈(遞迴迴圈)

有規律的樣式

5.import模組化

@import "./header.css"

預處理框架:lesshat/est

前端css筆記2016 2 16

一 display none與visible hidden的區別 一 display none與visible hidden的區別 display none和visible hidden都能把網頁上某個元素隱藏起來,但兩者有區別 display none 不為被隱藏的物件保留其物理空間,即該物件在頁...

前端基礎 css筆記

css的四種引入方式 1.行內式 顯示優先順序最高 hello 2.嵌入式3 鏈結式 4.匯入式注意 匯入式會在整個網頁裝載完後再裝載css檔案,因此這就導致了乙個問題,如果網頁比較大則會兒出現先顯示無樣式的頁面,閃爍一下之後,再出現網頁的樣式。這是匯入式固有的乙個缺陷。使用鏈結式時與匯入式不同的是...

前端筆記 CSS定位

一 為什麼需要定位 某個元素可以自由的在乙個盒子內移動位置,並且壓住其他盒子。當滾動視窗時,某些模組是固定在螢幕中的某個位置。以上兩個效果通過標準流和浮動都無法快速實現,此時需要定位來實現。二 定位組成 定位 將盒子定在某一位置 定位 定位模式 邊偏移 定位模式用於指定元素在文件中的定位方式,邊偏移...