資訊專欄INFORMATION COLUMN
摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。
一、HTML基礎(chǔ) html常見(jiàn)元素和理解
html常見(jiàn)元素分類
head區(qū)元素：（不會(huì)在頁(yè)面上留下直接內(nèi)容）
meta
title
style
link
script
base
body區(qū)：
div/selection/article/aside/header/footer
p
span/em/strong
table/thead/tbody/tr/td
ul/ol/li/dl/dt/dd
a
form/input/select/textarea/button
// 指定一個(gè)基礎(chǔ)路徑，所有的路徑都是以這個(gè)為基準(zhǔn) //viewport表示視圖的大小 //適配移動(dòng)端第一步，viewport
HTML重要屬性
a[href,target]
target：打開(kāi)窗口。也可以設(shè)置框架中在哪個(gè)框架打開(kāi)
img[src,alt]
alt:圖片不可用時(shí)候，文字顯示出來(lái)
table td[colspan,rowspan]
form[target,method,enctype](有表單的地方都建議放上form)
target:表單提交到哪兒
enctype:指定編碼，如果上傳文件指定要用form-data
input[type,value]
button[type]
select>option[value]
label[for]
label與input進(jìn)行關(guān)聯(lián)
如何理解html
HTML“文檔”
描述文檔的結(jié)構(gòu)
有區(qū)塊和大綱
"大綱"作用
更好的讓機(jī)器、搜索引擎、蜘蛛很好的理解結(jié)構(gòu)
html的語(yǔ)義化
html版本
HTML4/4.01(SGML)瀏覽器做很多的容錯(cuò)和修正工作
XHTML(XML)要求非常嚴(yán)格，嚴(yán)格要求編碼習(xí)慣
HTML5(基于HTML4)
html5新增內(nèi)容
新增區(qū)塊標(biāo)簽
section
article
nav
aside //一般不出現(xiàn)在大綱中，表示不重要的廣告類
表單增強(qiáng)
日期、時(shí)間、搜索
表單驗(yàn)證
placehold自動(dòng)聚焦
html5新增語(yǔ)意
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
inline-block
HTML分類法
嵌套關(guān)系默認(rèn)樣式和reset
塊級(jí)元素可以包含行內(nèi)元素
塊級(jí)元素不一定能包含塊級(jí)元素(p標(biāo)簽不能包含div)
行內(nèi)元素一般不能包含塊級(jí)元素(a>div 合法，html5中a是transparent元素)
HTML標(biāo)簽在瀏覽器中都有默認(rèn)的樣式，不同的瀏覽器的默認(rèn)樣式之間存在差別。例如ul默認(rèn)帶有縮進(jìn)樣式，在IE下，它的縮進(jìn)是由margin實(shí)現(xiàn)的，而在Firefox下卻是由padding實(shí)現(xiàn)的。開(kāi)發(fā)時(shí)瀏覽器的默認(rèn)樣式可能會(huì)給我們帶來(lái)多瀏覽器兼容性問(wèn)題，影響開(kāi)發(fā)效率?，F(xiàn)在很流行的解決方式是一開(kāi)始就將瀏覽器的默認(rèn)樣式全部覆蓋掉，這就是css reset。
Normalize.css
面試題 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有什么變化新的語(yǔ)義化標(biāo)簽
表單增強(qiáng)(新的元素，表單驗(yàn)證)
新的API(離線、音視頻、圖形、實(shí)時(shí)通信、本地存儲(chǔ)、設(shè)備能力)
Canvas+WEBGL等技術(shù)，實(shí)現(xiàn)無(wú)插件的動(dòng)畫(huà)以及圖像、圖形處理能力；
本地存儲(chǔ)，可實(shí)現(xiàn)offline應(yīng)用；
websocket，一改http的純pull模型，實(shí)現(xiàn)數(shù)據(jù)推送的夢(mèng)想；
MathML，SVG等，支持更加豐富的render；
em和i有什么區(qū)別em是語(yǔ)義化的標(biāo)簽，表強(qiáng)調(diào)
i是純樣式的標(biāo)簽，表斜體
HTML5中i不推薦使用，一般用作圖標(biāo)
語(yǔ)義化的意義是什么開(kāi)發(fā)者容易理解
機(jī)器容易理解結(jié)構(gòu)(搜索、讀屏軟件)
有助于SEO
semantic microdata
哪些元素可以自閉合表單元素input
圖片img
br hr
meta link
HTML和DOM的關(guān)系HTML是‘死’的(字符串，沒(méi)有結(jié)構(gòu))
DOM由HTML解析而來(lái)，是活的(是樹(shù)，有結(jié)構(gòu))
JS可以維護(hù)DOM
property和attribute的區(qū)別attribute是‘死’的(屬性，寫(xiě)在HTML中)
property是‘活’的(特性，DOM對(duì)象中)
attribute不會(huì)影響property,property也不會(huì)影響attribute
form作用直接提交表單
使用submit/reset按鈕
便于瀏覽器保存表單
第三方庫(kù)可以整體提取值
第三方庫(kù)可以進(jìn)行表單驗(yàn)證
二、css基礎(chǔ)cascading style sheet層疊樣式表選擇器
選擇器簡(jiǎn)介
用于匹配HTML元素
分類和權(quán)重
解析方式和性能
瀏覽器的解析方式是從右往左反著，然后再往前驗(yàn)證,主要出于性能的考慮，更快速的匹配到指定元素(左邊范圍太廣了，比如 值得關(guān)注的選擇器 元素選擇器???????????? a{}
偽元素選擇器???????? ::before{} //真實(shí)存在的容器 類選擇器???????????????? .link{}
屬性選擇器???????????? [type=radio]{}
偽類選擇器???????????? :hover{} //元素的狀態(tài)
ID選擇器?????????????? #id{}
組合選擇器???????????? [type=checkbox] + label{}
否定選擇器???????????? :not(.link){}
通用選擇器???????????? *{}
ID選擇器器???????????? +100 類 屬性 偽類器?????? +10 元素 偽元素器???????? +1 其它選擇器器????????? +0 #id .link a[href] 計(jì)算：
#id????????? +100
.link?????? +10
a?????????????? +1
[href]????? +0 結(jié)果：111 只要有id選擇器，就是最大，類選擇器再多也不會(huì)進(jìn)位，只能在自己位上 百位????十位????個(gè)位
!important優(yōu)先級(jí)最高 元素屬性優(yōu)先級(jí)高 //元素的屬性 > 外部樣式表 (style標(biāo)簽，外部樣式表)
相同權(quán)重后寫(xiě)的生效
字體、字重、顏色、大小、行高
背景、邊框
滾動(dòng)、換行
粗體、斜體、下劃線
serif(襯線字體)
sans-serif(非襯線字體)
monospace(等寬字體，例如代碼)
cursive(方正靜蕾體) fantasy 指定多個(gè)字體，如果找不到會(huì)按照順序使用其他字體，或者用同類字體 英文字體用Monaco,但是Monaco沒(méi)有中文字體，所以如果碰到中文會(huì)使用PingFangSC，一個(gè)字體一個(gè)字體的找 字體族不需要引號(hào)，因?yàn)椴皇蔷唧w的字體 指定在mac系統(tǒng)上用PingFang SC,windows上用Microsoft Yahei，把單個(gè)平臺(tái)獨(dú)有的字體寫(xiě)到前面 自定義字體 網(wǎng)絡(luò)字體：注意跨域
先把只有一個(gè)平臺(tái)才有的寫(xiě)到最前面 引用遠(yuǎn)程字體有問(wèn)題的話，要注意跨域問(wèn)題 阿里巴巴的圖標(biāo)庫(kù)，自選 iconfont.cn
行高由line-box決定
line-hight會(huì)撐起inline-box的高度，并不會(huì)影響本身布局的高度，但是會(huì)影響外部元素(line-box)
inline-box組成line-box，line-box高度是由inline-box決定 一般做垂直居中用line-height做就行了 默認(rèn)情況是按照base-line對(duì)齊，如果要居中對(duì)齊就用vertical-align:middle
底線、頂線和文字的頂和文字的底是不一樣的 原理：按照inline排版，如果按照inline排版的話，默認(rèn)按照基線排版(base-line) 基線和底線之間有距離的，如果12px字體那么縫隙可能就是3px
解決方案：按照底線對(duì)齊，vertical-align:bottom 或者display:block
HSL H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。取值為：0 - 360 S：Saturation(飽和度)。取值為：0.0% - 100.0% L：Lightness(亮度)。取值為：0.0% - 100.0% RGB(A) 背景圖 background: webkit-linear-gradient( left, red, green); //老式寫(xiě)法 background: linear-gradient(to right,red, green) ; background: linear-gradient (45deg, red, green); background: linear-gradient( 135deg, red 0, green 50%, blue 100%) background: linear-gradient ( 135deg, transparent 0, transparent 49.5%,green 50%) background實(shí)現(xiàn)各種漸變背景，可以通過(guò)疊加實(shí)現(xiàn)，放射漸變
優(yōu)點(diǎn)： 減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù) 提高頁(yè)面的加載速度
缺點(diǎn)： 單個(gè)圖片大小，考慮網(wǎng)絡(luò)環(huán)境比較差的情況 內(nèi)存使用問(wèn)題。大量空白你就會(huì)最終使用大量的無(wú)用的空白。 維護(hù)比較麻煩， 一種文本格式，顯示的是一串文本，而這串文本就是圖片本身
優(yōu)點(diǎn) 傳輸性能，減少http請(qǐng)求
缺點(diǎn)：
增大了體積的開(kāi)銷 圖片本身提交增大1/3 增大css體積 增加了解碼的開(kāi)銷 適用：小圖標(biāo)，例如：loading圖 用法：一般用在構(gòu)建中轉(zhuǎn)，打包 線型 大小 顏色 原理：利用邊框銜接過(guò)程是斜切
visible:內(nèi)容直接顯示，撐出容器
hidden：超出容器部分隱藏
scroll:超出容器滾動(dòng)，始終顯示滾動(dòng)條
auto:超出容器滾動(dòng)，當(dāng)內(nèi)容比較短不需要滾動(dòng)條的時(shí)候不顯示滾動(dòng)條 在mac系統(tǒng)上收系統(tǒng)設(shè)置影響 字重(粗體) font-weight
斜體font-style:itatic
下劃線text-decoration
指針cursor
Hack看起來(lái)不合法但生效的寫(xiě)法 主要用于區(qū)分不同的瀏覽器，只在特定的瀏覽器生效
缺點(diǎn) 難理解 難維護(hù) 易失效
替代方案 特性檢測(cè) 針對(duì)性加class
使用注意 標(biāo)準(zhǔn)屬性寫(xiě)到前面，hack寫(xiě)到后面
作用 瀏覽器兼容性
典型案例 checkbox tabs
早期以table為主(簡(jiǎn)單) 解析并不是流式的，以前可能等待時(shí)間長(zhǎng)，現(xiàn)在已經(jīng)可以流式布局 后來(lái)以技巧性布局為主(難) 現(xiàn)在有flexbox/grid(偏簡(jiǎn)單) 響應(yīng)式布局是(必備知識(shí)) table表格布局 float浮動(dòng)+margin inline-block布局 flexbox布局 display:table display:table-row #### display/position block inline inline-block:有寬高有可以與其他元素排在同一行
static:靜態(tài)布局，按照文檔流布局
relative:相對(duì)于元素本身的偏移，relative偏移時(shí)，元素所占據(jù)的文檔空間不會(huì)產(chǎn)生偏移
absolute：從文檔流脫離，相對(duì)于最近的父級(jí)absolute或者relative，如果父級(jí)不是的話，會(huì)一直網(wǎng)上到body
fixed:相對(duì)于屏幕/可視區(qū)域 定位于relatvie、absolute、fixed都可以設(shè)置z-index，數(shù)值越大附帶 彈性盒子 盒子本來(lái)就是并列的 指定寬度即可 ? 低版本IE不支持 出過(guò)三個(gè)版本，市面上各個(gè)瀏覽器都有對(duì)應(yīng)的解析，會(huì)導(dǎo)致一些兼容性問(wèn)題 移動(dòng)瀏覽器基本兼容,react Native和微信小程序可以直接用來(lái)布局 彈性布局用法詳解 元素“浮動(dòng)” 脫離文檔流 但不脫離文本流 形成“塊”(BFC),inline元素也可以設(shè)置寬高(BFC背后的神奇原理) 位置盡量靠上 位置盡量靠左(右) float本意就是要做文字環(huán)繞、圖文混排等內(nèi)容的 上面貼著非float元素 旁邊貼float元素 不影響其他塊級(jí)元素位置 影響其他塊級(jí)元素內(nèi)部文本 從父級(jí)元素上“消失” 高度“塌陷”
讓父元素形成BFC來(lái)接管自己的高度 overflow:auto/hidden 當(dāng)里面的元素超出的時(shí)候自動(dòng)滾動(dòng) 用其他元素?fù)纹饋?lái) 兼容性好
兩欄布局：
float:left(左)
margin-left:左元素的寬度(右)
三欄布局：記住“盡量往左靠，盡量往右靠”
float:left(左)
float:right(右)
中間元素寫(xiě)在最后，否則右邊的float元素不會(huì)對(duì)其 margin-left:左元素的寬度 margin-right:右元素的寬度 像文本一樣排block元素 沒(méi)有清除浮動(dòng)等問(wèn)題 需要處理間隙 間隙來(lái)源：html中的空白
處理辦法： 直接把兩塊html寫(xiě)在一起； 兩塊中間加一個(gè)注釋；
父字體設(shè)置font-size:0;子塊重新加上字體font-sizi:14px;
在不同的設(shè)備上正常使用 一般主要處理屏幕大小的問(wèn)題
主要方法： 隱藏+折行+自適應(yīng)空間 rem/viewport/media query 適配的第一部永遠(yuǎn)是加上viewport
viewport`可視區(qū)大小=屏幕大小`，有些設(shè)備默認(rèn)屏幕寬度980px
如果固定使用width，可以使不同頁(yè)面等比放大 也可以根據(jù)window.innerWidth動(dòng)態(tài)計(jì)算頁(yè)面的寬度 float布局:兼容性好 表格布局 display:table
float+margin布局(清理浮動(dòng))
inline-block布局(處理間隙)
flexbox布局(兼容性不是特別好) 前者相對(duì)于最近的absolute/relative
后者相對(duì)屏幕(viewport) 如果要兼容老的設(shè)備，fixed兼容性不是很好 原因:空白字符 解決:消滅字符(標(biāo)簽寫(xiě)到一起不要加空白，或者中間寫(xiě)上注釋)或者消滅間距 清除浮動(dòng)原理
讓盒子負(fù)責(zé)自己的布局 overflow:hidden(auto)
::after{clear:both}(也可以用多帶帶的元素) 首先適配viewport(頁(yè)面寬度和移動(dòng)端適配)
rem/viewport/media query(大小方面的適配) 設(shè)計(jì)上:隱藏折行自適應(yīng) box-shadow text-shadow border-radius background clip-path 營(yíng)造層次感(立體感) 充當(dāng)沒(méi)有寬度的邊框 特殊效果 一個(gè)div畫(huà)xx系列，可以用box-shadow，其他圖形可以通過(guò)點(diǎn)，確定是可能有性能問(wèn)題 立體感 印刷的品質(zhì)感 圓角矩形 圓形(圓角足夠大 border-radius:50%) 半圓/扇形 一些奇怪的角角 效果 紋理、圖案 漸變 雪碧圖動(dòng)畫(huà) 背景圖尺寸適應(yīng)方案 對(duì)容器進(jìn)行裁剪 常見(jiàn)幾何圖形 自定義路徑 clip-path支持動(dòng)畫(huà)且不改變?nèi)萜鞔笮?/b> clip-path: inset(100px 50px); clip-path: circle(50px at 100px 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); 支持svg transform translate(translateZ 3D立體) scale skew(斜切) rotate 缺點(diǎn)：性能不是很好 復(fù)雜場(chǎng)景下出現(xiàn)渲染不一樣問(wèn)題 box-shadow outline border-radius:50% clip-path:(svg)
border-radius組合： 有無(wú)邊框 邊框粗細(xì) 圓角半徑 視覺(jué)暫留作用 畫(huà)面逐漸變化 愉悅感 引起注意 操作進(jìn)行反饋 掩飾(程序在后臺(tái)加載)
transition補(bǔ)間動(dòng)畫(huà)(中間的過(guò)程瀏覽器腦補(bǔ)起來(lái))
keyframe關(guān)鍵幀動(dòng)畫(huà)(也是補(bǔ)間動(dòng)畫(huà)，但是有很多關(guān)鍵幀) 逐幀動(dòng)畫(huà)(特殊的逐幀動(dòng)畫(huà)，無(wú)法使用補(bǔ)間動(dòng)畫(huà)) 位置-平移(left/right/margin/transform) 方位-旋轉(zhuǎn)(transform) 大小-縮放(transform) 透明度(opacity) 其他-線性變換(transform) [深入了解transition動(dòng)畫(huà)](https://www.cnblogs.com/xiaoh... transition: [動(dòng)畫(huà)類型] [動(dòng)畫(huà)時(shí)間] transition-delay //延遲多長(zhǎng)時(shí)間執(zhí)行 transition-delay:width 1s,background 3s; //多個(gè)效果疊加 transition-timing-function timing(easing)：定義動(dòng)畫(huà)進(jìn)度和時(shí)間的關(guān)系 linear ease-in-out 自定義貝塞爾曲線 相當(dāng)于多個(gè)補(bǔ)間動(dòng)畫(huà) 與元素狀態(tài)的變化無(wú)關(guān) 定義更加靈活 animation:run 1s linear;
animation-direction //reverse:反向
animation-fill-mode:forword //forwards,backwards決定動(dòng)畫(huà)最終停留在哪里
animation-iteration-count //infinite:循環(huán)次數(shù)
animation-play-state:pause //js控制它的停和動(dòng) 每幀都是關(guān)鍵幀，中間沒(méi)有補(bǔ)間過(guò)程 依然使用關(guān)鍵幀動(dòng)畫(huà) 屬于關(guān)鍵幀動(dòng)畫(huà)中的一種特殊情況 適用于無(wú)法補(bǔ)間計(jì)算的動(dòng)畫(huà) 資源較大(適合時(shí)間短、資源小的動(dòng)畫(huà)，一定要控制好大小的時(shí)長(zhǎng)) 使用steps()
例如：圖片合成的動(dòng)畫(huà) 指定時(shí)間和動(dòng)畫(huà)進(jìn)度關(guān)系 中間不要加?xùn)|西，每個(gè)區(qū)間就只有一個(gè)狀態(tài)，靜止
step是指定每個(gè)區(qū)間幀數(shù) transition keyframes(animation) 過(guò)度動(dòng)畫(huà)需要有狀態(tài)變化，關(guān)鍵幀動(dòng)畫(huà)不需要有狀態(tài)變化 關(guān)鍵幀動(dòng)畫(huà)能控制更精細(xì) 使用關(guān)鍵幀動(dòng)畫(huà) 去掉補(bǔ)間(steps) 性能不差 部分情況下優(yōu)于JS 但JS可以做到更好 部分高危屬性，box-shadow等 基于CSS的另一種語(yǔ)言 通過(guò)工具編譯成CSS 添加了很多CSS不具備的特性(變量) 能提升CSS文件的組織方式
less 基于node
優(yōu)點(diǎn)：用JS寫(xiě)的，編譯速度比較快，有個(gè)瀏覽器中可以直接使用的版本，不需要預(yù)先編譯,入門簡(jiǎn)單 缺點(diǎn)：在一些復(fù)雜特性上比較繁瑣
sass(scss)
ruby寫(xiě)的比較慢，但是有解決方案，可以使用它的移植版本node-sass
嵌套 ???????????????? ??????????? 反映層級(jí)和約束 變量和計(jì)算?????????????????? 減少重復(fù)代碼
Extend和Mixin ???????? 代碼片段 循環(huán)?????????????????????????????? 適用于復(fù)雜有規(guī)律的樣式
import CSS ???????????????? 文件模塊化 sass的輸出有多重格式 使用這條命令時(shí)候，我們編譯的路徑，不能有中文名，否則會(huì)報(bào)錯(cuò)，之后只要我們更改scss文件，保存后，就會(huì)自動(dòng)修改編譯后的css文件 變量為了可以參與運(yùn)算，提供了各種運(yùn)算的函數(shù)，包括顏色
less:@fontSize
sass:$fontSize
less的理念：盡量的接近c(diǎn)ss的語(yǔ)法
sass的理念：盡量避免產(chǎn)生混淆 CSS中并沒(méi)有提供復(fù)用CSS的方法，而是通過(guò)HTML復(fù)用 不加括號(hào)也可以，不加括號(hào).block{}不會(huì)被編譯出來(lái)，加了會(huì)被編譯出來(lái) 區(qū)別在于需要顯示的聲明和調(diào)用，而且不能既做class又做mixin 場(chǎng)景：mixin清除浮動(dòng) 減少重復(fù)代碼 不會(huì)復(fù)制重復(fù)代碼 選擇器提取出來(lái)，公共的樣式寫(xiě)到一起 引用: 生成效果: 引用： 生成效果： 生成效果: mixin方式： sass是支持循環(huán)的，不需要遞歸 使得CSS變得更像一門變成語(yǔ)言 預(yù)處理器的變量跨文件 預(yù)處理器的模塊化，提供了按需使用他人代碼的可能 SASS-Compass Less-Lesshat/EST(國(guó)內(nèi)) 提供現(xiàn)成mixin
提供JS類庫(kù)，封裝常用功能 有兼容性問(wèn)題的封裝成mixin統(tǒng)一處理
Less(Node.js)
Sass(Ruby，有Node版本) 幫助更好地組織CSS代碼 提高代碼復(fù)用率 提升可維護(hù)性 嵌套 反應(yīng)層級(jí)和約束 變量和計(jì)算 減少重復(fù)代碼
Extend和Mixin 代碼片段 循環(huán) 適用于復(fù)雜有規(guī)律的樣式
import CSS文件模塊化 優(yōu)點(diǎn)：提高代碼復(fù)用率和可維護(hù)性 缺點(diǎn)：需要引入編譯過(guò)程 有學(xué)習(xí)成本 前端工程化發(fā)展起來(lái)了，預(yù)處理器的熱度有所下降 一個(gè)CSS框架
twitter出品 提供通用基礎(chǔ)樣式 兼容IE10+(bootstrap3兼容到IE9) 使用flexbox布局 拋棄Nomalize.css
提供布局和reboot版本 基礎(chǔ)樣式 常用組件 JS插件 現(xiàn)在用sass編寫(xiě)
用于組件交互
dropdown(下拉)
modal( 彈窗)
基于jQuery 依賴Popper.js
bootstrap.js
使用方式 基于data-屬性 基于JS-API
不同的分辨率下面又不同的分配 使用CSS同名類覆蓋 修改源碼重新構(gòu)建 ??????????????????????????? //修改徹底，但是需要了解整個(gè)框架 使用SCSS源文件，修改變量 ????????? //對(duì)結(jié)構(gòu)的要求更高 把bootstrap當(dāng)初一個(gè)預(yù)處理文件來(lái)使用，十一個(gè)更干凈的使用方式 優(yōu)點(diǎn)：CSS代碼結(jié)構(gòu)合理，現(xiàn)成的樣式可以直接使用 缺點(diǎn)：定制較為繁瑣，體積大 原理：通過(guò)media query設(shè)置不同分辨率的class
使用：為不同分辨率選擇不同的網(wǎng)格class
使用CSS同名覆蓋 修改源碼重新構(gòu)建 引用SCSS源文件，修改變量 組織 優(yōu)化 構(gòu)建 維護(hù)
PostCSS本身只有解析能力 各種神奇的特性全靠插件
目前至少有200多個(gè)插件
import模塊合并
autoprefixier自動(dòng)加前綴
cssnano壓縮代碼
cssnext使用css新特性
precss 變量 條件 循環(huán)
MIxin Extend
import 屬性值引用
Webpack??????? postcss-loader
Gulp??????????????gulp-postcss
Grunt ?????????? grunt-postcss
Rollup????????? rollup-postcss
css-loader將css文件變成js文件
style-loader將變成js的css文件注入到頁(yè)面中 直接將class名全部換掉，確保組件樣式不沖突 var styles = require("component.css"); style.green ...
css-loader????????????????? 將 CSS變成JS
style-loader ?????????????將JS樣式插入head
ExtractTextPlugin???? 將CSS從JS中提取出來(lái)
css modules???????????????? 解決css命名沖突的問(wèn)題(映射表)
less-loader ?????????????? sass-loader各類預(yù)處理器
postcss-loader ????????? PostCSS處理
less sass 等CSS預(yù)處理器
PostCSS插件(postCSS-import/precss等)
webpack處理CSS(css-loader+style-loader)
autoperfixer cssnext precss等，兼容性處理
import模塊合并
css語(yǔ)法檢查、兼容性檢查 壓縮文件 解決類名沖突的問(wèn)題 使用PostCSS或者webpack等構(gòu)建工具進(jìn)行編譯 在HTML模板中使用編譯過(guò)程產(chǎn)生的類名
JS作為入口，管理資源有天然優(yōu)勢(shì) 將組件的結(jié)構(gòu)、樣式、行為封裝到一起，增強(qiáng)內(nèi)聚 可以做更多處理(webpack)
Angular.js(1.x) 沒(méi)有樣式集成能力
Angular(2+) typeScript 提供了樣式封裝能力 與組件深度集成 邏輯上是一個(gè)DOM
結(jié)構(gòu)上存在子集集合 shadowDOM介紹 限定了范圍的CSS
無(wú)法影響外部元素 外部樣式一般不影響內(nèi)部 可以通過(guò)/deep/或>>>穿透 兼容性還存在問(wèn)題 方案一：隨機(jī)選擇器(不支持)
方案二：隨機(jī)屬性 div[abcdefg]{} 模擬Scoped CSS 方案一：隨機(jī)選擇器 CSS modules
方案二：隨機(jī)屬性 vue同時(shí)支持了這兩種方案可能能找到幾百個(gè))
選擇器分類
選擇器權(quán)重
計(jì)算一個(gè)不進(jìn)位的數(shù)字
#id .link.active
#id +100
.link +10
.active +10
結(jié)果：120
不進(jìn)位
其他選擇器權(quán)重
非布局樣式
字體族
多字體fallback機(jī)制
font-family:Monaco PingFangSC
font-family:"Microsoft Yahei",serif
.chinese{
font-family:"PingFang SC","Microsoft Yahei",monospace
}
網(wǎng)絡(luò)字體、自定義字體
@font-face{
font-family:"IF";
src:url("./IndieFlower.ttf");
}
.custom-font{
font-family:IF;
}
iconfont
字體機(jī)制
行高的構(gòu)成
行高的相關(guān)現(xiàn)象
經(jīng)典圖片空隙問(wèn)題
背景顏色
background:hsl(0,100%,50%)
漸變色背景
多背景疊加
background: linear-gradient( 135deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),linear-gradient( 45deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%)
background-size:30px 30px
背景圖片和屬性(雪碧圖)
由所需圖片拼成的一張 GIF 圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小。
單張的 GIF 只有相關(guān)的一個(gè)色表，而多帶帶分割的每一張 GIF
都有自己的一個(gè)色表，這就增加了總體的大小。
因此，多帶帶的一張 JPEG 或者 PNG sprite 在大小上非?？赡鼙劝岩粡垐D分成多張得來(lái)的圖片總尺寸小
一個(gè)例子是來(lái)自于WHIT TV的網(wǎng)站。
注意這是一個(gè)1299×15,000像素的PNG圖片。
它也被壓縮的很好——實(shí)際下載大小只有大概26K —
但是瀏覽器并不會(huì)渲染壓縮后的圖片數(shù)據(jù)。當(dāng)這個(gè)圖片被下載并被解壓縮之后
base64和性能優(yōu)化
多分辨率適配
邊框
邊框的屬性
邊框背景圖
border-img("./border.img") 30 round;
//repeat：可能會(huì)導(dǎo)致不完整
//round：整數(shù)個(gè)拼，可能會(huì)有一些空間上的壓縮
邊框銜接(三角形)
width:0px;
border-bottom:30px solid red;
border-left:20px solid transparent;
border-right:20px solid transparent;
滾動(dòng)
滾動(dòng)行為和滾動(dòng)條
overflow-wrap(word-wrap)通用換行控制
- 兼容性不太好，經(jīng)常還用word-wrap
- 是否保留單詞
- `normal` 只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）。
- `break-word` 在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行。
word-break
- 針對(duì)多字節(jié)文字，中文句子也是單詞
- `break-all` 允許在單詞內(nèi)換行。
- `keep-all` 只能在半角空格或連字符處換行，中文句子也不換行，兼容性還有點(diǎn)問(wèn)題
white-space
- 空白處是否斷行
- 不換行的話 `white-space: nowrap`
overflow-wrap: break-word ;
word-break: keep-all;
white-space: normal ;
裝飾性屬性(粗體、斜體、下劃線)
CSS布局
常用布局方式
布局方式(表格)
盒模型
寬度和高度是只對(duì)內(nèi)容區(qū)生效
占據(jù)的空間是content + padding + border
display確定元素的顯示類型：
position確定元素的位置：
float
float對(duì)自身的影響：
對(duì)兄弟的影響
對(duì)父級(jí)元素的影響
解決“高度塌陷”的方案
container2::after{
content:"";
clear:"both"; //保證這個(gè)元素左右都是"干凈"的，沒(méi)有浮動(dòng)元素
display:block;
height:0; //不占高度
visibility:hidden //不用顯示
}
//比較經(jīng)典的清除浮動(dòng)布局的方式
float布局
float和margin實(shí)現(xiàn)兩欄布局和三欄布局
處理間隙
響應(yīng)式設(shè)計(jì)和布局
viewport：
media query:
@media(max-width:640px){
.left{
display:none;
}
}
rem：
html{
font-size:16px; // 默認(rèn)16個(gè)像素，為了好記一般設(shè)置10px，20px
}
@media (maxwidth: 375px){
html{
font-size :24px ;
}
}
@media (max-width: 320px){
html{
fonts ize: 20px;
}
}
@media (max-width: 640px){
intro{
margin: .3rem auto ;
display: block;
}
}
//精確性要求高的地方不要使用`rem`布局
主流網(wǎng)站使用的布局方式
浮動(dòng)元素不會(huì)占據(jù)父元素空間，因此父元素不會(huì)管浮動(dòng)元素，很可能超出父元素，對(duì)其他元素產(chǎn)生影響。作為父元素一定要清除浮動(dòng)，保證對(duì)外沒(méi)有影響
效果屬性
百分比是寬高的百分比
多背景疊加(顏色、圖片、漸變)
.i{
width: 20px ;
height :20px ;
background: url(./background.png) no repeat;
background-size: 20px 40px;
transition: background-position .4s ;
}
.i:hover{
background-position: 0 20px;
}
clip-path: url(#clipPath);
background-size: cover;
transition:clip-path .4s;
變換transform(2D)
transform:translateX(100px) translateY(100px) rotate(25deg)
transform:rotate(25deg) translateX(100px) translateY(100px)
//有順序
box-shadow無(wú)限投影
::before
::after
如何產(chǎn)生不占空間的邊框
background-position
background-repeat
background-size(cover/contain)
如何平移放大一個(gè)元素
transform:translateX(100px)
transform:scale(2)
如何實(shí)現(xiàn)3D效果
perspective:500px; //指定透視的角度
transform-style:preserve-3d; //保留3D效果
transform:translate rotate;
css動(dòng)畫(huà)
動(dòng)畫(huà)的原理：
動(dòng)畫(huà)的作用
動(dòng)畫(huà)類型
)animation-timing-function:steps(1)
介紹
less和sass的區(qū)別
CSS預(yù)處理器
less
加上 &：并不是父子關(guān)系而是同級(jí)
CSS中并不允許這么嵌套寫(xiě)，less和sass允許，結(jié)構(gòu)關(guān)系清晰body{
padding:0px;
margin: 0px;
}
.wrapper{
background: white;
.nav{
font-size: 12px;
}
&:hover{ //偽類
background: red
}
}
打包指令
lessc a.less > a.css
sass
npm install node-sass
node-sass a.scss>a.css --output-style expanded
less
.block(@fontSize){
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
.block(@fontsize+2px);
sass
@mixin block($fontSize) {
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
@include block(font-size+2px);
作用
less
寫(xiě)法:
.block{
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
.nav:extend(.block){
font-size: @fontSize;
}
.content{
font-size: @fontSize + 2px;
&:extend(.block);
}
.block,
.wrapper .nav,
.wrapper .content {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
sass
寫(xiě)法：
.block {
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
@extend .block;
.block, .wrapper {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
loop
less
less中實(shí)際上沒(méi)有循環(huán)的語(yǔ)法,通過(guò)遞歸來(lái)實(shí)現(xiàn)相應(yīng)的效果
引用方法:
.gen-col(@n) when (@n > 0 ){
.gen-col(@n - 1);
.col-@{n}{
width: 1000px/12*@n;
}
}
.gen-col(12);
.col-1 {
width: 83.33333333px;
}
.col-2 {
width: 166.66666667px;
}
.col-3 {
width: 250px;
}
.col-4 {
width: 333.33333333px;
}
.col-5 {
width: 416.66666667px;
}
.col-6 {
width: 500px;
}
.col-7 {
width: 583.33333333px;
}
.col-8 {
width: 666.66666667px;
}
.col-9 {
width: 750px;
}
.col-10 {
width: 833.33333333px;
}
.col-11 {
width: 916.66666667px;
}
.col-12 {
width: 1000px;
}
應(yīng)用場(chǎng)景：表格、特效等
sass
@mixin gen-col($n) {
@if $n>0 {
@include gen-col($n - 1);
.col-#{$n} {
width: 1000px/12*$n;
}
}
}
@include gen-col(12);
@for $i from 1 through 12 {
.col-#{$i} {
width: 1000/12*$i;
}
}
@import "logo";
@import "nav";
@import "content";
預(yù)處理器框架
介紹
Bootstrap4
功能
CSS工程化介紹
postCSS支持的構(gòu)建工具
取決于插件可以做什么
Angular各版本
shadowDOM
Scoped CSS
模擬Scoped CSS
內(nèi)置CSS解決方案
[abadafda]{}
<