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
4.loop迴圈(遞迴迴圈).block
.div:extend(.block)
有規律的樣式
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定位
一 為什麼需要定位 某個元素可以自由的在乙個盒子內移動位置,並且壓住其他盒子。當滾動視窗時,某些模組是固定在螢幕中的某個位置。以上兩個效果通過標準流和浮動都無法快速實現,此時需要定位來實現。二 定位組成 定位 將盒子定在某一位置 定位 定位模式 邊偏移 定位模式用於指定元素在文件中的定位方式,邊偏移...