[TOC]
一、課程介紹
二、HTML基礎強化
html常見元素和理解
html常見元素分類
head區元素：（不會在頁面上留下元素）
* meta
* title
* style
* link
* script
* base
body區：
* 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
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<base href="/">
// 指定一個基礎路徑，所有的路徑都是以這個爲基準
//viewport表示視圖的大小
//適配移動端第一步，viewporta[href,target]
//target：打開窗口。也可以設置框架中在哪個框架打開
img[src,alt]
//alt:圖片不可用時候，文字顯示出來
table td[colspan,rowspan]
form[target,method,enctype]
//target:表單提交到哪兒
//enctype:指定編碼，如果上傳文件指定要用form-data
input[type,value]
button[type]
select>option[value]
label[for]
//label與input進行關聯如何理解html
HTML“文檔”
描述文檔的結構
有區塊和大綱更好的讓機器、搜索引擎、蜘蛛很好的理解結構
html的語義化
html版本
* HTML4/4.01(SGML) 瀏覽器做很多的容錯和修正工作
* XHTML(XML) 要求非常嚴格，嚴格要求編碼習慣
* HTML5(基於HTML4)html5新增內容
1、新增區塊標籤
* section
* article
* nav
* aside //一般不出現在大綱中，表示不重要的廣告類
2、表單增強
* 日期、時間、搜索
* 表單驗證
* placehold自動聚焦html5新增語意
header/footer頭尾
section/article區域
nav導航
aside不重要內容
em/strong強調
i //icon元素分類
按默認樣式分
塊級block：
行內inline：
inline-block:HTML分類法
嵌套關係
默認樣式和reset
* 塊級元素可以包含行內元素
* 塊級元素不一定能包含塊級元素(p標籤不能包含div)
* 行內元素一般不能包含塊級元素(a>div 合法，html5中a是transparent元素)
HTML標籤在瀏覽器中都有默認的樣式，不同的瀏覽器的默認樣式之間存在差別。例如ul默認帶有縮進樣式，在IE下，它的縮進是由margin實現的，而在Firefox下卻是由padding實現的。開發時瀏覽器的默認樣式可能會給我們帶來多瀏覽器兼容性問題，影響開發效率。現在很流行的解決方式是一開始就將瀏覽器的默認樣式全部覆蓋掉，這就是css reset。真題
doctype的意義是什麼？
1、讓瀏覽器以標準模式渲染
2、讓瀏覽器知道元素的合法性HTML、XHTML、HTML5的關係
1、HTML屬於SGML
2、XHTML屬於XML，是HTML進行XML嚴格化的結果
3、HTML5不屬於SGML或者XML，比XHTML寬鬆HTML5有什麼變化
1、新的語義化標籤
2、表單增強
3、新的API(離線、音視頻、圖形、實時通信、本地存儲、設備能力)
//Canvas+WEBGL等技術，實現無插件的動畫以及圖像、圖形處理能力；
//地存儲，可實現offline應用；
//websocket，一改http的純pull模型，實現數據推送的夢想；
//MathML，SVG等，支持更加豐富的render； em和i有什麼區別
1、em是語義化的標籤，表強調
2、i是純樣式的標籤，表斜體
3、HTML5中i不推薦使用，一般用作圖標語義化的意義是什麼
1、開發者容易理解
2、機器容易理解結構(搜索、讀屏軟件)
3、有助於SEO
4、semantic microdata哪些元素可以自閉合
1、表單元素input
2、圖片img
3、br hr
4、meta linkHTML和DOM的關係
1、HTML是‘死’的
2、DOM由HTML解析而來，是活的
3、JS可以維護DOMproperty和attribute的區別
1、attribute是‘死’的
2、property是‘活’的form作用
1、直接提交表單
2、使用submit/reset按鈕
3、便於瀏覽器保存表單
4、第三方庫可以整體提取值
5、第三方庫可以進行表單驗證三、css基礎
cascading style sheet 層疊樣式表
1、選擇器
1、用於匹配HTML元素
2、分類和權重
3、解析方式和性能
* 瀏覽器的解析方式是從右往左反着，然後再往前驗證,主要出於性能的考慮，更快速的匹配到指定元素
4、值得關注的選擇器選擇器分類
1、元素選擇器 a{}
2、僞元素選擇器 ::before{} //不會出現在html中也不會出現DOM樹中，真實存在的元素
3、類選擇器 .link{}
4、屬性選擇器 [type=radio]{}
5、僞類選擇器 :hover{} //一個元素的狀態
6、ID選擇器 #id{}
6、組合選擇器 [type=checkbox] + label{}
7、否定選擇器 :not(.link){}
8、通用選擇器 *{}選擇器權重
ID選擇器 +100
類 屬性 僞類 +10
元素 僞元素 +1
其它選擇器 +0計算一個不進位的數字
#id .link a[href]
#id +100
.link +10
a +1
[href] +0
結果：111#id .link.active
#id +100
.link +10
.active +10
結果：120注意：只要有id選擇器，就是最大，類選擇器再多也不會進位，只能在自己位上
百位 十位 個位其他選擇器權重
!important優先級最高
元素屬性優先級高 //元素的屬性 > 外部樣式表 (style標籤，外部樣式表)
相同權重後寫的生效2、非佈局樣式-字體
字體
1、字體族
serif
sans-serif
monospace
cursive
fantasy
2、多字體fallback
3、網絡字體、自定義字體
4、 iconfont字體機制
先把只有一個平臺纔有的寫到最前面
引用遠程字體有問題的話，要注意跨域問題
阿里巴巴的圖標庫，自選 iconfont.cn3、非佈局樣式-行高
行高由line-box決定
line-hight會撐起inline-box的高度，並不會影響本來的高度
inline-box組成line-box，line-box是由inline-box決定1、一般做垂直居中用line-height做就行了
2、默認情況是按照base-line對齊，如果要居中對其就用vertical-align:middle
3、底線、頂線和文字的頂和文字的底是不一樣的經典圖片空隙問題：
原理：按照inline排版，如果按照inline排版的話，那麼它就有基線排版，默認按照base-line
基線和底線之間有距離的，如果12px字體那麼縫隙可能就是3px
解決方案：按照底線對齊，vertical-align:bottom4、非佈局樣式-背景
背景顏色
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值爲：0 - 360
S：Saturation(飽和度)。取值爲：0.0% - 100.0%
L：Lightness(亮度)。取值爲：0.0% - 100.0%漸變色背景
background: webkit-linear-gradient( left, red, green); //老式寫法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: 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實現各種漸變背景，可以通過疊加實現，放射漸變背景圖片和屬性(雪碧圖)
base64和性能優化
優點：節省http鏈接數
缺點：體積會增大，圖片原來的體積會(增大1/3,增大css文件)；增大解碼的開銷(先轉化成圖片再解碼)
適用：小圖標
用法：一般用在構建中轉多分辨率適配
5、非佈局樣式-邊框
- 邊框的屬性：線型 大小 顏色
- 邊框背景圖
- 邊框銜接(三角形)
原理：利用邊框銜接過程是斜切
6、非佈局樣式-滾動
滾動行爲和滾動條
visible:內容直接顯示，撐出容器
hidden：超出容器部分隱藏
scroll:超出容器滾動，始終顯示滾動條
auto:超出容器滾動，當內容比較短不需要滾動條的時候不顯示滾動條在mac系統上收系統設置影響
7、非佈局樣式-文本折行
1、overflow-wrap(word-wrap)通用換行控制：是否保留單詞
2、word-break針對多字節文字，中文句子也是單詞
3、white-space空白處是否斷行overflow-wrap: break-word ;
word-break: keep-all;
white-space: normal ;不換行的話 white-space: nowrap
word-wrap：
1、normal 只在允許的斷字點換行（瀏覽器保持默認處理）。
2、break-word 在長單詞或 URL 地址內部進行換行。word-break：
normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。8、非佈局樣式-裝飾性屬性(粗體、斜體、下劃線)
1、裝飾性屬性及其它
2、字重(粗體) font-weight
3、斜體font-style:itatic
4、下劃線text-decoration
5、指針cursor9、hack和案例
1、Hack即不合法但生效的寫法
2、主要用於區分不同的瀏覽器
3、缺點：難理解，難維護，易失效
4、替代方案：特性檢測
5、替代方案：針對性加class10、面試題
CSS樣式(選擇器)的優先級
計算權重確定
!important
內聯樣式
後寫的優先級高 雪碧圖的作用
減少HTTP請求數，提高加載性能
有一些情況下可以減少圖片大小自定義字體的使用場景
1、宣傳/品牌/banner等固定文案
2、字體圖標base64的使用
1、用於減少HTTP請求
2、適用於小圖片
3、base64的體積約爲原圖的4/3僞類和僞元素的區別
1、僞類表狀態
2、僞元素是真的有元素
3、前者單冒號，後者雙冒號(注意兼容性)如何美化checkbox
1、label[for]和id
2、隱藏原生的input
3、:checked+label四、css佈局
1、佈局簡介
- CSS知識體系的重中之重
- 早期以table爲主(簡單)
- 後來以技巧性佈局爲主(難)
- 現在有flexbox/grid(偏簡單)
- 響應式佈局是必備知識
常用佈局方式
1、table表格佈局
2、float浮動+margin
3、inline-block佈局
4、flexbox佈局2、佈局方式(表格)
display:table
display:table-row3、一些佈局屬性
盒模型
寬度和高度是隻對內容區生效
display/position
確定元素的顯示類型：
1、block
2、inline
3、inline-block:有寬高有可以與其他元素排在同一行確定元素的位置：
1、static：靜態佈局，按照文檔流佈局
2、relative:相對於元素本身的偏移，relative偏移時，元素所佔據的文檔空間不會產生偏移
3、absolute：從文檔流脫離，相對於最近的父級absolute或者relative，如果父級不是的話，會一直網上到body
4、fixed:相對於屏幕/可視區域定位於relatvie、absolute、fixed都可以設置z-index，數值越大附帶
4、flexbox佈局
彈性盒子
盒子本來就是並列的
指定寬度即可低版本IE不支持
出過三個版本，市面上各個瀏覽器都有對應的解析，會導致一些兼容性問題5、float 佈局
元素“浮動”
脫離文檔流
但不脫離文本流float對自身的影響：
1、形成“塊”(BFC),inline元素也可以設置寬高
2、位置儘量靠上
3、位置儘量靠左(右)對兄弟的影響
上面貼着非float元素
旁邊貼float元素
不影響其他塊級元素位置
影響其他塊級元素內部文本對父級元素的影響
從父級元素上“消失”
高度“塌陷”解決“高度塌陷”的方案：
1、讓父元素形成BFC來接管自己的高度 overflow:auto/hidden
//當裏面的元素超出的時候自動滾動
2、用其他元素撐起來container2::after{
content:'';
clear:'both';
display:block;
height:0;
visibility:hidden
}
//比較經典的清除浮動佈局的方式 float佈局
兼容性好
float和margin實現兩欄佈局和三欄佈局
兩欄佈局：float:left float:right margin:""
三欄佈局：記住“儘量往左靠，儘量往右靠”6、inline-block佈局
像文本一樣排block元素
沒有清除浮動等問題
需要處理間隙處理間隙
間隙來源：html中的空白
處理辦法：1、直接把兩塊寫在一起；
2、兩塊中間加一個註釋；
3、父字體設置font-size:0;子塊重新加上字體font-sizi:14px;7、響應式設計和佈局
1、在不同的設備上正常使用
2、一般主要處理屏幕大小的問題
3、主要方法：
* 隱藏+折行+自適應空間
* rem/viewport/media queryviewport：
1、適配的第一部永遠是加上 viewport，可視區大小=屏幕大小，有些設備默認屏幕寬度980px
* <meta name='viewport' content="width=device-width,initial-scale=1.0">
* 如果固定使用width，可以使不同頁面等比放大
* 也可以根據window.innerWidth動態計算頁面的寬度
media query:
@media(max-width:640px){
.left{
display:none;
}
}rem：
@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;
}
} 8、主流網站使用的佈局方式
9、CSS面試真題
1、實現兩欄(三欄)佈局的方法
1、表格佈局 display:table
2、float+margin佈局
3、inline-block佈局：處理間隙
4、flexbox佈局：兼容性不是特別好2、position:absolute/fixed有什麼區別？
1、前者相對於最近的absolute/relative
2、後者相對屏幕(viewport)
如果要兼容老的設備，fixed兼容性不是很好 display:inline-block的間隙
原因:字符間距
解決:消滅字符或者消滅間距如何清除浮動
1、讓盒子負責自己的佈局
2、overflow:hidden(auto)
3、::after{clear:both}如何適配移動端頁面?
1、viewport
2、rem / viewport/ media query
3、設計上:隱藏折行自適應五、css效果
- box-shadow
- text-shadow
- border-radius
- background
- clip-path
1、box-shadow
1、營造層次感(立體感)
2、充當沒有寬度的邊框
3、特殊效果
一個div畫xx系列，可以用box-shadow，其他圖形可以通過點，確定是可能有性能問題2、text-shadow
3、border-radius
圓角矩形
圓形
半圓/扇形
一些奇怪的角角4、background
多背景疊加
- 紋理、圖案
- 漸變
- 雪碧圖動畫
- 背景圖尺寸適應方案
動畫效果
.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;
}5、clip-path
- 對容器進行裁剪
- 常見集合類型
- 自定義路徑
clip-path支持動畫且不改變容器大小
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); clip-path: url(#clipPath);
background-size: cover;
transition:clip-path .4s;6、3D-transform
變換transform(2D)
- translate
- scale
- skew
- rotate
缺點：性能不是很好
複雜場景下出現渲染不一樣問題7、面試題
如何用一個div畫xxx
box-shadow無線投影
::before
::after如何產生不佔空間的邊框
1、box-shadow
2、outline如何實現圓形元素(頭像)
border-radius:50%如何實現IOS圖標的圓角
clip-path:(svg)如何實現半圓、扇形等圖標
border-radius組合：
有無邊框
邊框粗細
圓角半徑如何實現背景圖居中顯示/不重複/改變大小
background-position
background-repeat
background-size(cover/contain)如何平移放大一個元素
transform:translateX(100px)
transform:scale(2)如何實現3D效果
perspective:500px; //指定透視的角度
transform-style:preserve-3d; //保留3D效果
transform:translate rotate; 六、css動畫
動畫的原理：
- 1、視覺暫留作用
- 2、畫面逐漸變化
.
動畫的作用
- 1、愉悅感
- 2、因其作用
- 3、操作進行反饋
- 4、掩飾(程序在後臺加載)
.
動畫類型：
- transition補間動畫(中間的過程瀏覽器腦補起來)
- keyframe關鍵幀動畫(也是補間動畫，但是有很多關鍵幀)
- 逐幀動畫
1、transition
位置-平移(left/right/margin/transform)
方位-旋轉(transform)
大小-縮放(transform)
透明度(opacity)
其他-線性變換(transform)transition-delay //延遲多長時間執行transition-delay:width 1s,background 3s; //多個效果疊加transition-timing-function
timing(easing)：定義動畫進度和時間的關係
//linear,ease-in-out
//自定義貝塞爾曲線2、keyframes動畫
相當於多個補間動畫
與元素狀態的變化無關
定義更加靈活animation:run 1s linear;
animation-direction //reverse:反向
animation-fill-mode:forword //forwards,backwards決定動畫最終停留在哪裏
animation-iteration-count //infinite:循環次數
animation-play-state:pause //js控制它的停和動3、逐幀動畫
每幀都是關鍵幀，中間沒有補間過程
依然使用關鍵幀動畫
屬於關鍵幀動畫中的一種特殊情況適用於無法補間計算的動畫
資源較大
使用steps()animation-timing-function:steps(1);
//中間不要加東西，每個區間就只有一個狀態
step是指定每個區間幀數4、CSS面試題
css中動畫怎麼寫，transation和animation和keyframs怎麼寫
CSS中動畫實現的方式有幾種
transition
keyframes(animation)過渡動畫和關鍵幀動畫的區別
過度動畫需要有狀態變化，關鍵幀動畫不需要有狀態變化
關鍵幀動畫能控制更精細如何實現逐幀動畫
使用關鍵幀動畫
去掉補間(steps)CSS動畫的性能
1、性能不壞
2、部分情況下優於JS
3、但JS可以做到更好
4、部分高危屬性，box-shadow等七、預處理器
介紹
- 基於CSS的另一種語言
- 通過工具編譯成CSS
- 添加了很多CSS不具備的特性(變量)
- 能提升CSS文件的組織方式
less和sass的區別：
1、less：用JS寫的，編譯速度比較快，有個瀏覽器中可以直接使用的版本，不需要預先編譯
缺點：在一些複雜特性上比較繁瑣
2、sass(scss)：ruby寫的比較慢，但是有解決方案，可以使用它的移植版本node-sassCSS預處理器：
1、嵌套 反映層級和約束
2、變量和計算 減少重複代碼
3、Extend和Mixin 代碼片段
4、循環 適用於複雜有規律的樣式
5、import CSS 文件模塊化1、嵌套
less
加上 &：並不是父子關係而是同級
CSS中並不允許這麼嵌套寫，less和sass允許，結構關係清晰
body{
padding:0px;
margin: 0px;
}
.wrapper{
background: white;
.nav{
font-size: 12px;
}
&:hover{ //僞類
background: red
}
}打包指令
lessc a.less > a.csssass
npm install node-sasssass的輸出有多重格式
node-sass a.scss>a.css --output-style expanded 使用這條命令時候，我們編譯的路徑，不能有中文名，否則會報錯，之後只要我們更改scss文件，保存後，就會自動修改編譯後的css文件
2、變量
less:@fontSize
sass:$fontSize
less的理念：儘量的接近css的語法
sass的理念：儘量避免產生混淆3、mixin
CSS中並沒有提供複用CSS的方法，而是通過HTML複用
less
.block(@fontSize){
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}.block(@fontsize+2px);不加括號也可以，不加括號.block{}不會被編譯出來，加了會被編譯出來
sass
@mixin block($fontSize) {
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}@include block(font-size+2px);區別在於需要顯示的聲明和調用，而且不能既做class又做mixin
場景：mixin清除浮動
4、extend
less
寫法:
.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
寫法：
.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;
}5、loop
less
less中實際上沒有循環的語法,通過遞歸來實現相應的效果引用方法:
.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;
}應用場景：表格、特效等sass
mixin方式：
@mixin gen-col($n) {
@if $n>0 {
@include gen-col($n - 1);
.col-#{$n} {
width: 1000px/12*$n;
}
}
}
@include gen-col(12);sass是支持循環的，不需要遞歸
@for $i from 1 through 12 {
.col-#{$i} {
width: 1000/12*$i;
}
}使得CSS變得更像一門變成語言
6、import
預處理器的變量跨文件
@import "logo";
@import "nav";
@import "content";7、預處理器框架
預處理器的模塊化，提供了按需使用他人代碼的可能
SASS-Compass
Less-Lesshat/EST
提供現成mixin
提供JS類庫，封裝常用功能有兼容性問題的封裝成mixin統一處理
真題
常見的CSS預處理器
Less(Node.js)
Sass(Ruby，有Node版本)預處理器作用
幫助更好地組織CSS代碼
提高代碼複用率
提升可維護性預處理利器的作用
嵌套 反應層級和約束
變量和計算 減少重複代碼
Extend和Mixin 代碼片段
循環 適用於複雜有規律的樣式
import CSS文件模塊化預處理器的優缺點
優點：提高代碼複用率和可維護性
缺點：需要引入編譯過程 有學習成本前端工程化發展起來了，預處理器的熱度有所下降
八、Bootstrap
介紹
- 一個CSS框架
- twitter出品
- 提供通用基礎樣式
.
Bootstrap4
- 兼容IE10+(bootstrap3兼容到IE9)
- 使用flexbox佈局
- 拋棄Nomalize.css
- 提供佈局和reboot版本
.
功能
- 基礎樣式
- 常用組件
- JS插件
現在用sass編寫
1、基本用法
2、Js組件
用於組件交互
dropdown(下拉)
modal( 彈窗)基於jQuery
依賴Popper.js
bootstrap.js 使用方式
基於`data-`屬性
基於JS-API3、響應式佈局
不同的分辨率下面又不同的分配
4、定製化
使用CSS同名類覆蓋
修改源碼重新構建 //修改徹底，但是需要了解整個框架
使用SCSS源文件，修改變量 //對結構的要求更高把bootstrap當初一個預處理文件來使用，十一個更乾淨的使用方式
5、CSS真題、
Bootstrap的優缺點
優點：CSS代碼結構合理，現成的樣式可以直接使用
缺點：定製較爲繁瑣，體積大Bootstrap如何實現響應式佈局
原理：通過media query設置不同分辨率的class
使用：爲不同分辨率選擇不同的網格class如何基於Bootstrap定製自己的樣式
使用CSS同名覆蓋
修改源碼重新構建
引用SCSS源文件，修改變量九、css工程化方案
postCSS介紹
- 組織
- 優化
- 構建
- 維護
1、postCSS插件的使用
PostCSS本身只有解析能力
各種神奇的特性全靠插件
目前至少有200多個插件import模塊合併
autoprefixier自動加前綴
cssnano壓縮代碼
cssnext使用css新特性2、CSSnext
3、precss
- 變量
- 條件
- 循環
- MIxin Extend
- import
- 屬性值引用
4、gulpPostCSS
postCSS支持的構建工具
- Webpack postcss-loader
- Gulp gulp-postcss
- Grunt grunt-postcss
- Rollup rollup-postcss
5、webpack
6、webpack處理css
css-loader將css文件變成js文件
style-loader將變成js的css文件注入到頁面中7、 css-modules和extract-text-plugin
直接將class名全部換掉，確保組件樣式不衝突
var styles = require('component.css');
style.green ...
8、 webpack小結
css-loader 將 CSS變成JS
style-loader 將JS樣式插入head
ExtractTextPlugin 將CSS從JS中提取出來
css modules 解決css命名衝突的問題(映射表)
less-loader sass-loader各類預處理器
postcss-loader PostCSS處理9、 真題
如何解決CSS模塊化：
less sass 等CSS預處理器
PostCSS插件(postCSS-import/precss等)
webpack處理CSS(css-loader+style-loader)PostCSS可以做什麼
取決於插件可以做什麼
autoperfixer cssnext precss等，兼容性處理
import模塊合併
css語法檢查、兼容性檢查
壓縮文件CSS modules是做什麼的，如何使用
解決類名衝突的問題
使用PostCSS或者webpack等構建工具進行編譯
在HTML模板中使用編譯過程產生的類名爲什麼使用JS來引用、加載CSS
JS作爲入口，管理資源有天然優勢
將組件的結構、樣式、行爲封裝到一起，增強內聚
可以做更多處理(webpack)十、三大框架中的css
1、Angular中的CSS
Angular各版本
Angular.js(1.x)
*沒有樣式集成能力
Angular(2+)
*typeScript
*提供了樣式封裝能力
*與組件深度集成shadowDOM
邏輯上是一個DOM
結構上存在子集集合Scoped CSS
限定了範圍的CSS
無法影響外部元素
外部樣式一般不影響內部
可以通過/deep/或>>>穿透兼容性還存在問題
模擬Scoped CSS
方案一：隨機選擇器(不支持)
方案二：隨機屬性
*<div abcdefg>
*div[abcdefg]{}2、Vue中的CSS
內置CSS解決方案
模擬Scoped CSS
方案一：隨機選擇器 CSS modules
方案二：隨機屬性 <div abcdefg> <div>[abadafda]{}vue同時支持了這兩種方案
<style module>
<style scoped>3、React中的CSS
React的處理
- 官方沒有集成方案
- 社區方案衆多
css modules
(babel)react-css-modules
styled components
styled jsx十一、課程總結
課程內容
- HTML基礎 CSS基礎
- CSS佈局
- 效果和動畫
- 工具、工程化、框架