CSS學習筆記

2021-09-13 02:20:36 字數 2509 閱讀 6258

在學習css的過程中做的一些記錄,用於未來的快速回憶。

html xhtml html5之間的關係?

html5有什麼變化?

em與i有什麼區別?

語義化的意義是什麼?

哪些元素可以自閉合?

html和dom的關係?

form的作用有哪些?

瀏覽器在解析選擇器時是從右到左的。

!important優先順序最高

元素屬性 優先順序高

相同權重 後寫的生效

行高背景

放射性漸變

多背景疊加

背景和屬性(雪碧圖)

base64和效能優化

多解析度適配

邊框滾動

文字折行

裝飾性屬性

hack

面試題雪碧圖的作用

自定義字型的使用場景

base64的使用

偽元素與偽類的區別

如何美化checkbox

左右

左右

.table 

.table-row

.table-cell

display/position

層級相容性問題:ie完全不支援flex

對自身的影響

對兄弟元素的影響

對父級元素的影響

float三欄布局示例

.left 

.right

.middle

/* 注意,這裡應該將left與right元素放在上面,然後再放middle */

處理inline-block的間隙問題(就好比文字之間有間隙,inline-block同樣有這個問題)

position:absolute/fixed有什麼區別?

display:inline-block的間隙

如何清除浮動?

如何適配移動端的頁面?

background-repeat指定是否迴圈

background-size

clip-path不改變容器內的定位

如何產生不佔空間的邊框

如何實現圓形元素

如何實現ios圖示的圓角

如何實現半圓、扇形等圖形

如何實現背景圖居中顯示 / 不重複 / 改變大小

如何實現3d效果

作用可在devtools/elements/animatiom檢視動畫

可在上定製動畫

定義動畫

/* from/to可以使用百分數 */

@keyframes animation-run

to}

css動畫的實現方式有幾種

過渡動畫與關鍵幀動畫的區別

css動畫的效能

目前主流:less / sass

功能字尾名為.scss

.outter 

}

變數是可以計算的。

/* 變數定義 */

$fontsize: 20px;

$bgcolor: red;

/* 變數使用 */

.content

類似於js的方法。

$fontsize: 20px;

/* mixin 定義 */

@mixin block($fontsize)

/* mixin 使用 */

.content

}

復用**塊

$fontsize: 20px;

@mixin block($fontsize)

/* extend 定義 */

.block

/* extend 使用 */

.content

迴圈

/* 示例生成網格系統 */

/* 迴圈 定義(利用mixin遞迴) */

@mixin gen-col($n)

}}/* 迴圈 使用 */

@include gen-col(12);

/* 迴圈 定義(利用for)並使用 */

@for $i from 1 through 12

}

/* sass中使用 @import 引入檔案 */

/* 不同檔案的變數、mixin等在被import到同乙個檔案後可以跨檔案呼叫 */

@import "./a-scss"

@import "./b-scss"

預處理器的能力

預處理器的優缺點

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS 學習筆記

當同乙個html元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此,內聯樣式 在html 元素內部 擁有最...