在學(xué)習(xí)CSS的過程中做的一些記錄，用于未來的快速回憶。

指定字符集

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

指定基準(zhǔn)路徑

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用于描述網(wǎng)頁(yè)的結(jié)構(gòu)，負(fù)責(zé)頁(yè)面整體的結(jié)構(gòu)

可以使用http://h5o.github.io/來分析一個(gè)頁(yè)面的結(jié)構(gòu)

HTML要強(qiáng)調(diào)語義化

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

新的區(qū)塊標(biāo)簽：section、article、nav、aside

表單增強(qiáng)：添加日期時(shí)間搜索類型、表單驗(yàn)證、Plaveholder自動(dòng)聚焦

新增語義：header/footer頭尾、section/article區(qū)域、nav導(dǎo)航、aside不重要的內(nèi)容、em/strong強(qiáng)調(diào)、i為icon

按默認(rèn)樣式分：塊級(jí)block、行內(nèi)inline（沒有尺寸屬性width/height等）、inline-block

塊級(jí)元素可以包含行內(nèi)元素

塊級(jí)元素不一定能包含塊級(jí)元素，例如

行內(nèi)元素一般不能包含塊級(jí)元素（a >div 元素例外）

使用CSS Reset清除一些默認(rèn)樣式

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

doctype的意義是什么？

讓瀏覽器以標(biāo)準(zhǔn)模式渲染

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

HTML XHTML HTML5之間的關(guān)系？

HTML屬于SGML

XHTML屬于XML，是HTML進(jìn)行XML嚴(yán)格話的結(jié)果

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

HTML5有什么變化？

新的語義化元素、表單增強(qiáng)、新的API（離線、音視頻、圖形、實(shí)時(shí)通信、本地存儲(chǔ)、設(shè)備能力）

em與i有什么區(qū)別？

em 是語義化的標(biāo)簽，表強(qiáng)調(diào)

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

語義化的意義是什么？

開發(fā)者容易理解

機(jī)器容易理解結(jié)構(gòu)（搜索引擎、讀屏軟件）

有助于SEO

哪些元素可以自閉合？

input、img、br、hr、meta、link

HTML和DOM的關(guān)系？

HTML是靜止的

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

JS可以維護(hù)DOM

form的作用有哪些？

直接提交表單

使用submit/reset按鈕

便于瀏覽器保存表單

第三方庫(kù)可以整體提取值

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

元素選擇器 a{}

偽元素選擇器 ::before()

類選擇器 .link{}

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

偽類選擇器 :hover{}（偽元素是真實(shí)存在的，而偽類是一種狀態(tài)）

ID選擇器 #id{}

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

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

通用選擇器 *{}

權(quán)重計(jì)算，相加時(shí)不進(jìn)位

ID選擇器：+100

類、屬性、偽類：+10

元素、偽元素：+1

其他選擇器：+0

!important優(yōu)先級(jí)最高

元素屬性 優(yōu)先級(jí)高

相同權(quán)重 后寫的生效

字體

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

多字體（使用時(shí)需要對(duì)每個(gè)字體用引號(hào)，fallback機(jī)制是針對(duì)每個(gè)字）

網(wǎng)絡(luò)字體、自定義字體

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

iconfont

行高

line-height會(huì)撐起line-box的高度，以line-height最大的為準(zhǔn)

字體渲染時(shí)默認(rèn)以base-line（基線）為準(zhǔn)，可通過修改vertical-align來修改對(duì)齊方式或基線位置

圖片空白

原因：img行內(nèi)元素，以inline的方式排版，渲染時(shí)默認(rèn)以字體對(duì)齊的base-line為準(zhǔn)

偏差大?。阂宰煮w大小為依據(jù)

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

背景

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

漸變色背景：

線性漸變

簡(jiǎn)單寫法：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%)

設(shè)定背景大小可以讓背景顏色循環(huán)出現(xiàn)background-size: 30px 30px

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

使用backgorund-repeat可以控制圖片是否平鋪以及在哪個(gè)方向循環(huán)平鋪

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

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

雪碧圖（性能優(yōu)化的一種）制作

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

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

base64和性能優(yōu)化

常用于小圖標(biāo)

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

會(huì)變慢（瀏覽器需要將base64解碼）

多分辨率適配

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

邊框

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

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

邊框銜接（CSS實(shí)現(xiàn)三角形）

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

滾動(dòng)

滾動(dòng)行為與滾動(dòng)條

visivle： 滾動(dòng)條隱藏（會(huì)超出容器）

hidden： 滾動(dòng)條隱藏（不會(huì)超出容器）

scroll： 滾動(dòng)條顯示

auto： 滾動(dòng)條自動(dòng)顯示

文本折行

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

word-break（針對(duì)多字節(jié)文字）：是否把單詞/中文句子/文字看作一個(gè)單位

white-space：空白處是否斷行

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

裝飾性屬性

字重：font-weight

斜體： font-style:itatic

下劃線： text-decoration

指針： cursor

hack

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

hack寫在標(biāo)準(zhǔn)屬性后面

缺點(diǎn)：難理解、難維護(hù)、易維護(hù)

替代方案：特性檢測(cè)、針對(duì)性添加class

面試題

CSS樣式（選擇器）的優(yōu)先級(jí)？

權(quán)重的計(jì)算（疊加不進(jìn)位）

!important優(yōu)先級(jí)最高

內(nèi)聯(lián)樣式高

后寫的優(yōu)先級(jí)高

雪碧圖的作用

減少HTTP請(qǐng)求數(shù)，提高加載性能

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

自定義字體的使用場(chǎng)景

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

字體圖標(biāo)

base64的使用

將圖片變成文本

減少HTTP請(qǐng)求數(shù)

適用于小圖片

偽元素與偽類的區(qū)別

偽類表狀態(tài)

偽元素是真的有元素

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

如何美化checkbox

label[for]和id

隱藏原生input

input:checked + label

早期以table為主（簡(jiǎn)單）

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

現(xiàn)在有flexbox/grid布局（偏簡(jiǎn)單）

響應(yīng)式布局是必備知識(shí)

table表格布局

float浮動(dòng) + 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標(biāo)準(zhǔn)模型、IE標(biāo)準(zhǔn)模型

display/position

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

position確定元素的位置：static（默認(rèn)）/relative/absolute/fixed

static默認(rèn)值，文檔流

relative相對(duì)位置，是相對(duì)于元素本身原來的位置，該值不會(huì)改變?cè)卦瓉碚加玫目臻g

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

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

層級(jí)

使用z-index來設(shè)置層級(jí)（relative，absolute，fixed這三種可以設(shè)置z-index）

默認(rèn)后出現(xiàn)的元素在上層

基本知識(shí)

是彈性盒子

盒子本來就是并列的

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

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

特性

元素“浮動(dòng)”

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

對(duì)自身的影響

形成“塊（block）”（BFC）

位置盡量靠上

位置盡量靠左（右）

對(duì)兄弟元素的影響

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

不影響其他塊級(jí)元素的位置，影響其他塊級(jí)元素的文本

對(duì)父級(jí)元素的影響

從布局上“消失”

高度塌陷

float三欄布局示例

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

特性

像文本一樣排列block元素

沒有清除浮動(dòng)的問題

需要處理間隙問題

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

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

間隙是因?yàn)閮蓚€(gè)div尾部與頭部之間的空間造成的，解決方式：

    
left

    right




    
left
right

在不同設(shè)備上正常使用

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

主要方法

第一步在head中添加viewport的內(nèi)容為width=device-width

隱藏 + 折行 + 自適應(yīng)空間

rem / viewport / media query

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

實(shí)現(xiàn)兩欄/三欄布局的方法

表格布局

float + margin布局

inline-block布局

flexbox布局

position:absolute/fixed有什么區(qū)別？

前者相對(duì)最近的absolute

后者相對(duì)于屏幕（viewport）

display:inline-block的間隙

原因：字符間隙

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

如何清除浮動(dòng)？

為什么需要清除：浮動(dòng)的元素不會(huì)占據(jù)父元素的布局空間

讓盒子負(fù)責(zé)自己的布局

overflow: hidden(auto)

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

如何適配移動(dòng)端的頁(yè)面？

添加viewport

rem / viewport / media query

設(shè)計(jì)上：隱藏 折行 自適應(yīng)

圖片來源：慕課網(wǎng)

默認(rèn)為外陰影

末尾添加inset表示外陰影

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

作用

營(yíng)造層次感（立體感）

充當(dāng)沒有寬度的邊框

實(shí)現(xiàn)特殊效果

作用：立體感 / 品質(zhì)感

text-shadow:Apx Bpx Cpx #000

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

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

有邊框時(shí)，使用百分?jǐn)?shù)更合理，使用像素時(shí)計(jì)算的是添加邊框?qū)挾群蟮陌霃?/p>

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

作用：紋理 / 圖案 / 漸變

小技巧：雪碧圖動(dòng)畫 / 背景圖尺寸適應(yīng)

雪碧圖動(dòng)圖

將兩個(gè)圖標(biāo)放在同一個(gè)圖片中，利用:hover在鼠標(biāo)飄過時(shí)改變background-position的值并添加過度

background-repeat指定是否循環(huán)

background-size

cover保持圖片長(zhǎng)寬比不變，覆蓋整個(gè)容器，多余的部分不顯示

contain保持圖片長(zhǎng)寬比不變，顯示整個(gè)圖片，容易多余的部分變?yōu)榭瞻?/p>

對(duì)容器進(jìn)行裁剪（常見幾個(gè)圖形 / 自定義路徑）

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

clip-path不改變?nèi)萜鲀?nèi)的定位

屬性有：translate / scale / skew / rotate9

屬性出現(xiàn)的順序會(huì)影響效果

如何用一個(gè)div畫XXX？

box-shadow無限投影

::before

::after

如何產(chǎn)生不占空間的邊框

box-shadow

outline

如何實(shí)現(xiàn)圓形元素

border-radius：50%

如何實(shí)現(xiàn)IOS圖標(biāo)的圓角

clip-path：(svg)

如何實(shí)現(xiàn)半圓、扇形等圖形

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

如何實(shí)現(xiàn)背景圖居中顯示 / 不重復(fù) / 改變大小

background-position

background-repeat

background-size（cover / contain）（如果是百分?jǐn)?shù)，則其是相對(duì)于容器的大小）

如何實(shí)現(xiàn)3D效果

perspective：500px

transform-style：preserve-3d

transform： translate / rotate

原理

大腦暫存動(dòng)畫

作用

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

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

方位-旋轉(zhuǎn)（transform）

大小-縮放（transform）

透明度（opacity）

其他-線性變換（transform）

屬性

transition-delay：延遲多久才執(zhí)行補(bǔ)間動(dòng)畫

transition-timing-function：定義動(dòng)畫進(jìn)度和時(shí)間的關(guān)系

可在devtools/elements/animatiom查看動(dòng)畫

可在https://www.w3cways.com/css3-...上定制動(dòng)畫

相當(dāng)于多個(gè)補(bǔ)間動(dòng)畫，與元素狀態(tài)的變化無關(guān)，定義更加靈活

屬性名：animation

具體屬性名

animation-direction定義方向

animation-iteration-count定義動(dòng)畫循環(huán)次數(shù)

animation-play-state設(shè)置動(dòng)畫狀態(tài)（可結(jié)合JS來實(shí)現(xiàn)更加酷炫的應(yīng)用）

animation-fill-mode設(shè)置動(dòng)畫完成后的狀態(tài)

定義動(dòng)畫

/* from/to可以使用百分?jǐn)?shù) */
@keyframes animation-run{
    from{ width：100px; }
    to{ width:800px }
}

特點(diǎn)：適用于無法補(bǔ)間計(jì)算的動(dòng)畫 / 資源較大

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

CSS動(dòng)畫的語法

參考以上筆記

CSS動(dòng)畫的實(shí)現(xiàn)方式有幾種

transition

keyframes（animation）

過渡動(dòng)畫與關(guān)鍵幀動(dòng)畫的區(qū)別

過渡動(dòng)畫需要有狀態(tài)變化

關(guān)鍵幀動(dòng)畫不需要狀態(tài)變化

關(guān)鍵幀動(dòng)畫能控制得更精細(xì)

CSS動(dòng)畫的性能

性能不壞

部分情況下優(yōu)于JS

但JS可以做得更好

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

特點(diǎn)

基于CSS的另一種語言

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

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

能提升CSS文件的組織

目前主流：Less / Sass

功能

嵌套，反映層級(jí)和約束

變量和計(jì)算，減少重復(fù)代碼

Extend和Mixin，代碼片段

循環(huán)，適用于復(fù)雜有規(guī)律的樣式

import，CSS文件模塊化

后綴名為.scss。

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

變量是可以計(jì)算的。

/* 變量定義 */
$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);
    }
}

復(fù)用代碼塊

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

循環(huán)

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

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

SASS - Compass

Less - Lesshat / EST

提供現(xiàn)成的mixin

預(yù)處理器的作用

幫助開發(fā)者更好的組織CSS代碼

提高代碼復(fù)用率

提升可維護(hù)性

預(yù)處理器的能力

嵌套，反映層級(jí)和約束

變量和計(jì)算，減少重復(fù)代碼

Extend和Mixin，代碼片段

循環(huán)，適用于復(fù)雜有規(guī)律的樣式

import，CSS文件模塊化

預(yù)處理器的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：提高代碼復(fù)用率和可維護(hù)性

缺點(diǎn)：需要引入編譯過程，有學(xué)習(xí)成本