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