在學習CSS的過程中做的一些記錄，用于未來的快速回憶。

指定字符集

meta name="viewport" content="..."定義視圖大小與設備屏幕大小的比例，用戶是否可縮放

指定基準路徑

a[href, target]

img[src, alt]

table td[colspan, rowspan]

form[target, method, enctype]

input[type, value]

button[type]

select > option[value]

label[for]

HTML用于描述網頁的結構，負責頁面整體的結構

可以使用http://h5o.github.io/來分析一個頁面的結構

HTML要強調語義化

使用https://validator.w3.org/check來檢查HTML語法

新的區塊標簽：section、article、nav、aside

表單增強：添加日期時間搜索類型、表單驗證、Plaveholder自動聚焦

新增語義：header/footer頭尾、section/article區域、nav導航、aside不重要的內容、em/strong強調、i為icon

按默認樣式分：塊級block、行內inline（沒有尺寸屬性width/height等）、inline-block

塊級元素可以包含行內元素

塊級元素不一定能包含塊級元素，例如

行內元素一般不能包含塊級元素（a >div 元素例外）

使用CSS Reset清除一些默認樣式

使用Normalize.css來修正默認樣式（例如修正各瀏覽器對寬高定義的不一致）

doctype的意義是什么？

讓瀏覽器以標準模式渲染

讓瀏覽器知道元素的合法性

HTML XHTML HTML5之間的關系？

HTML屬于SGML

XHTML屬于XML，是HTML進行XML嚴格話的結果

HTML5不屬于SGML或XML，比XHTML寬松

HTML5有什么變化？

新的語義化元素、表單增強、新的API（離線、音視頻、圖形、實時通信、本地存儲、設備能力）

em與i有什么區別？

em 是語義化的標簽，表強調

i 是純樣式的標簽，表斜體（一般不在HTML5中用）

語義化的意義是什么？

開發者容易理解

機器容易理解結構（搜索引擎、讀屏軟件）

有助于SEO

哪些元素可以自閉合？

input、img、br、hr、meta、link

HTML和DOM的關系？

HTML是靜止的

DOM是由HTML解析而來的，是活的

JS可以維護DOM

form的作用有哪些？

直接提交表單

使用submit/reset按鈕

便于瀏覽器保存表單

第三方庫可以整體提取值

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

元素選擇器 a{}

偽元素選擇器 ::before()

類選擇器 .link{}

屬性選擇器 [type=radio]{}

偽類選擇器 :hover{}（偽元素是真實存在的，而偽類是一種狀態）

ID選擇器 #id{}

組合選擇器 [type=checkbox] + label{}

否定選擇器 not(.link){}

通用選擇器 *{}

權重計算，相加時不進位

ID選擇器：+100

類、屬性、偽類：+10

元素、偽元素：+1

其他選擇器：+0

!important優先級最高

元素屬性 優先級高

相同權重 后寫的生效

字體

字體族（使用時不能加引號）：serif(襯線體)、sans-serif(非襯線體)、monospace(等寬字體)、cursive(手寫體)、fantasy(花體)

多字體（使用時需要對每個字體用引號，fallback機制是針對每個字）

網絡字體、自定義字體

/* 自定義字體 */
/* url可使用在線url，若跨域，需要對方服務器允許跨域（對方服務器展示CORS頭） */
@font-face {
    font-family: "JC";
    src: url("./define.ttf")
}
.custom-font {
    font-family: JC
}

iconfont

行高

line-height會撐起line-box的高度，以line-height最大的為準

字體渲染時默認以base-line（基線）為準，可通過修改vertical-align來修改對齊方式或基線位置

圖片空白

原因：img行內元素，以inline的方式排版，渲染時默認以字體對齊的base-line為準

偏差大?。阂宰煮w大小為依據

修正：①將圖片style設置為vertical-align: bottom；②display: block;

背景

純色背景：使用顏色名或rgb或rgba(帶透明度)或hsl(色相)或hsla(帶透明度的色相)指定

漸變色背景：

線性漸變

簡單寫法：linear-gradient(to right, red, green)，to right指明從左到右，也可使角度30deg

也可添加多顏色以及控制顏色位置linear-gradient(30deg, red 0, green 10%, yellow 50%, green 100%)

放射性漸變

多背景疊加

背景①：linear-gradient(135deg, transparent 0, transparent 45.5%, green 45.5%, green 55.5%, transparent 55.5%, transparent 100%)

背景②：linear-gradient(45deg, transparent 0, transparent 45.5%, red 45.5%, red 55.5%, transparent 55.5%, transparent 100%)

設定背景大小可以讓背景顏色循環出現background-size: 30px 30px

背景圖片和屬性（雪碧圖）

使用backgorund-repeat可以控制圖片是否平鋪以及在哪個方向循環平鋪

使用background-position來指定圖片的位置，如background:center center為居中，也可是使用像素

使用background-size來控制圖片大小

雪碧圖（性能優化的一種）制作

就是將很多圖片合成一張圖片（下載時只需要一次http請求），使用時將某部分顯示出來即可

使用div來放置圖片，使用background來引入圖片，使用width/height來擬合圖標的大小，使用backgroung-position來在雪碧圖中找到圖標，使用background-size來縮放圖標大小

base64和性能優化

常用于小圖標

文件會增大（①圖片體積會增大1/3；②CSS文件會變大）

會變慢（瀏覽器需要將base64解碼）

多分辨率適配

對于高分辨率的屏幕，需要制作更大尺寸的圖標，然后使用background-size將其縮小，以解決高分屏模糊的問題

邊框

邊框的屬性：線型、大小、顏色

邊框背景圖border-img: url(./border.png) 30 round

邊框銜接（CSS實現三角形）

.div-class {
    width: 0px;
    height: 200px;
    border-bottom: 30px solid red;
    border-left: 30px solid transpatrnt;
    border-right: 30px solid transpatrnt;
    /* 添加圓角可以將三角形變成扇形 */
}

滾動

滾動行為與滾動條

visivle： 滾動條隱藏（會超出容器）

hidden： 滾動條隱藏（不會超出容器）

scroll： 滾動條顯示

auto： 滾動條自動顯示

文本折行

overflow-wrap（舊寫為word-wrap，通用換行控制）：是否保留單詞

word-break（針對多字節文字）：是否把單詞/中文句子/文字看作一個單位

white-space：空白處是否斷行

/* 這是一個示例,不對單詞換行、單個中文字為單位 */
.div-class {
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
}

裝飾性屬性

字重：font-weight

斜體： font-style:itatic

下劃線： text-decoration

指針： cursor

hack

hack（不合法但生效的寫法）：在特定瀏覽器生效，為了處理兼容性

hack寫在標準屬性后面

缺點：難理解、難維護、易維護

替代方案：特性檢測、針對性添加class

面試題

CSS樣式（選擇器）的優先級？

權重的計算（疊加不進位）

!important優先級最高

內聯樣式高

后寫的優先級高

雪碧圖的作用

減少HTTP請求數，提高加載性能

在一些情況下可以減少圖片的大小

自定義字體的使用場景

宣傳/品牌/banner等固定文案

字體圖標

base64的使用

將圖片變成文本

減少HTTP請求數

適用于小圖片

偽元素與偽類的區別

偽類表狀態

偽元素是真的有元素

前者單冒號，后者雙冒號（由于歷史問題，考慮兼容性時before/after可能需要使用單冒號）

如何美化checkbox

label[for]和id

隱藏原生input

input:checked + label

早期以table為主（簡單）

后來以技巧性布局為主（難）

現在有flexbox/grid布局（偏簡單）

響應式布局是必備知識

table表格布局

float浮動 + margin

inline-block布局

flexbox布局

    

        
左
        
右
    



    

        
左
        
右
    

.table {
    display: table;
    width: 900px;
    height: 100px;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    vertical-align: center;
}

盒子模型

content、 padding、border、margin

兩種：W3C標準模型、IE標準模型

display/position

display確定元素的顯示類型：block/inline/inline-block

position確定元素的位置：static（默認）/relative/absolute/fixed

static默認值，文檔流

relative相對位置，是相對于元素本身原來的位置，該值不會改變元素原來占用的空間

absolute絕對位置，脫離文檔流，不影響文檔流的其他元素，相對于最近的relative或absolute元素

fixed，脫離文檔流，不影響文檔流中的其他元素，相對于屏幕可視區域來固定

層級

使用z-index來設置層級（relative，absolute，fixed這三種可以設置z-index）

默認后出現的元素在上層

基本知識

是彈性盒子

盒子本來就是并列的

指定寬度即可（可使用flex:1與width:20px兩種方式）

兼容性問題：IE完全不支持flex

特性

元素“浮動”

脫離文檔流，不脫離文本流

對自身的影響

形成“塊（block）”（BFC）

位置盡量靠上

位置盡量靠左（右）

對兄弟元素的影響

上面貼非float元素，旁邊貼float元素

不影響其他塊級元素的位置，影響其他塊級元素的文本

對父級元素的影響

從布局上“消失”

高度塌陷

float三欄布局示例

.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 200px;
}
.middle {
    margin-left： 200px;
    margin-right： 200px;
}
/* 注意，這里應該將left與right元素放在上面，然后再放middle */

特性

像文本一樣排列block元素

沒有清除浮動的問題

需要處理間隙問題

處理inline-block的間隙問題（就好比文字之間有間隙，inline-block同樣有這個問題）

父元素中將font-size設置為0；子元素中再將font-size設置回來（推薦使用這種方式）

間隙是因為兩個div尾部與頭部之間的空間造成的，解決方式：

    
left

    right




    
left
right

在不同設備上正常使用

一般主要處理屏幕大小問題

主要方法

第一步在head中添加viewport的內容為width=device-width

隱藏 + 折行 + 自適應空間

rem / viewport / media query

媒體查詢中，范圍大的放在上面

實現兩欄/三欄布局的方法

表格布局

float + margin布局

inline-block布局

flexbox布局

position:absolute/fixed有什么區別？

前者相對最近的absolute

后者相對于屏幕（viewport）

display:inline-block的間隙

原因：字符間隙

處理：消滅字符或者消滅字符

如何清除浮動？

為什么需要清除：浮動的元素不會占據父元素的布局空間

讓盒子負責自己的布局

overflow: hidden(auto)

::after(clear:both)（或者使用多帶帶一個元素）

如何適配移動端的頁面？

添加viewport

rem / viewport / media query

設計上：隱藏 折行 自適應

圖片來源：慕課網

默認為外陰影

末尾添加inset表示外陰影

陰影的形狀與原來的圖形一致

作用

營造層次感（立體感）

充當沒有寬度的邊框

實現特殊效果

作用：立體感 / 品質感

text-shadow:Apx Bpx Cpx #000

A-向右偏移；B-向下偏移；C-模糊

作用：圓角矩形 / 圓形(50%) / 半圓 / 扇形

有邊框時，使用百分數更合理，使用像素時計算的是添加邊框寬度后的半徑

border-radius: A B C D / E F G H:ABCD為水平方向的半徑，EFGH為垂直方向的半徑

扇形示例

.container {
    width: 100px;
    height: 100px;
    background: red;
    border-top-left-radius: 100px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

左上角水平方向10px，垂直方向20px：border-top-left-radius: 10px 20px

作用：紋理 / 圖案 / 漸變

小技巧：雪碧圖動畫 / 背景圖尺寸適應

雪碧圖動圖

將兩個圖標放在同一個圖片中，利用:hover在鼠標飄過時改變background-position的值并添加過度

background-repeat指定是否循環

background-size

cover保持圖片長寬比不變，覆蓋整個容器，多余的部分不顯示

contain保持圖片長寬比不變，顯示整個圖片，容易多余的部分變為空白

對容器進行裁剪（常見幾個圖形 / 自定義路徑）

clip-path: inset(100px, 50px)裁剪成長100px寬50px的矩形 =

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

屬性有：translate / scale / skew / rotate9

屬性出現的順序會影響效果

如何用一個div畫XXX？

box-shadow無限投影

::before

::after

如何產生不占空間的邊框

box-shadow

outline

如何實現圓形元素

border-radius：50%

如何實現IOS圖標的圓角

clip-path：(svg)

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

border-radius組合 ：有無邊框 / 邊框粗細 / 圓角半徑

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

background-position

background-repeat

background-size（cover / contain）（如果是百分數，則其是相對于容器的大?。?/p>

如何實現3D效果

perspective：500px

transform-style：preserve-3d

transform： translate / rotate

原理

大腦暫存動畫

作用

愉悅感 / 引起注意 / 反饋 / 掩飾

位置-平移（left / right / margin / transform）

方位-旋轉（transform）

大小-縮放（transform）

透明度（opacity）

其他-線性變換（transform）

屬性

transition-delay：延遲多久才執行補間動畫

transition-timing-function：定義動畫進度和時間的關系

可在devtools/elements/animatiom查看動畫

可在https://www.w3cways.com/css3-...上定制動畫

相當于多個補間動畫，與元素狀態的變化無關，定義更加靈活

屬性名：animation

具體屬性名

animation-direction定義方向

animation-iteration-count定義動畫循環次數

animation-play-state設置動畫狀態（可結合JS來實現更加酷炫的應用）

animation-fill-mode設置動畫完成后的狀態

定義動畫

/* from/to可以使用百分數 */
@keyframes animation-run{
    from{ width：100px; }
    to{ width:800px }
}

特點：適用于無法補間計算的動畫 / 資源較大

使用animation- timing-function：steps(1)

CSS動畫的語法

參考以上筆記

CSS動畫的實現方式有幾種

transition

keyframes（animation）

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

過渡動畫需要有狀態變化

關鍵幀動畫不需要狀態變化

關鍵幀動畫能控制得更精細

CSS動畫的性能

性能不壞

部分情況下優于JS

但JS可以做得更好

部分高危屬性性能較差，如bax-shadow

特點

基于CSS的另一種語言

可以通過工具將其編譯成CSS

添加了很多CSS不具備的特性，如變量等

能提升CSS文件的組織

目前主流：Less / Sass

功能

嵌套，反映層級和約束

變量和計算，減少重復代碼

Extend和Mixin，代碼片段

循環，適用于復雜有規律的樣式

import，CSS文件模塊化

后綴名為.scss。

.outter {
    background: red;
    .inner{
        background: green;
    }
}

變量是可以計算的。

/* 變量定義 */
$fontSize: 20px;
$bgColor: red;
/* 變量使用 */
.content {
    background: $bgColor;
    font-size: $fontsize;
}

類似于JS的方法。

$fontSize: 20px;
/* Mixin 定義 */
@mixin block($fontSize) {
    font-size: $fontSize;
    color: red;
}
/* Mixin 使用 */
.content {
    @include block($fontSize);
    .inner {
        @include block($fontSize + 5px);
    }
}

復用代碼塊

$fontSize: 20px;
@mixin block($fontSize) {
    font-size: $fontSize;
    color: red;
}
/* extend 定義 */
.block {
    font-size: $fontSize;
    color: red;
}
/* extend 使用 */
.content {
    @extend .block；
    background： green；
}

循環

/* 示例生成網格系統 */
/* 循環 定義(利用mixin遞歸) */
@mixin gen-col($n) {
    @if $n > 0 {
        @include gen-col($n - 1);
        .col-#{$n} {
            width: 1000px / 12 * $n;
        }
    }
}
/* 循環 使用 */
@include gen-col(12);
/* 循環 定義(利用for)并使用 */
@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000px / 12 * $i;
    }
}

/* Sass中使用 @import 引入文件 */
/* 不同文件的變量、mixin等在被import到同一個文件后可以跨文件調用 */
@import "./a-scss"
@import "./b-scss"

SASS - Compass

Less - Lesshat / EST

提供現成的mixin

預處理器的作用

幫助開發者更好的組織CSS代碼

提高代碼復用率

提升可維護性

預處理器的能力

嵌套，反映層級和約束

變量和計算，減少重復代碼

Extend和Mixin，代碼片段

循環，適用于復雜有規律的樣式

import，CSS文件模塊化

預處理器的優缺點

優點：提高代碼復用率和可維護性

缺點：需要引入編譯過程，有學習成本