在學習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 元素內部 擁有最...