前端面試之路一(HTML+CSS面試整理)

一、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
複製程式碼

HTML重要屬性

• a[href,target]
  • target：開啟視窗。也可以設定框架中在哪個框架開啟
• img[src,alt]
  • alt:圖片不可用時候，文字顯示出來
• 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進行關聯

如何理解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。

Normalize.css

面試題

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是‘死’的(屬性，寫在HTML中)
• property是‘活’的(特性，DOM物件中)
• attribute不會影響property,property也不會影響attribute

form作用

• 直接提交表單
• 使用submit/reset按鈕
• 便於瀏覽器儲存表單
• 第三方庫可以整體提取值
• 第三方庫可以進行表單驗證

二、css基礎

cascading style sheet層疊樣式表

選擇器

選擇器簡介

• 用於匹配HTML元素
• 分類和權重
• 解析方式和效能
  • 瀏覽器的解析方式是從右往左反著，然後再往前驗證,主要出於效能的考慮，更快速的匹配到指定元素(左邊範圍太廣了，比如<div>可能能找到幾百個)
• 值得關注的選擇器

選擇器分類

• 元素選擇器             a{}
• 偽元素選擇器         ::before{} //真實存在的容器
• 類選擇器                 .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機制

• 指定多個字型，如果找不到會按照順序使用其他字型，或者用同類字型

font-family:Monaco PingFangSC
複製程式碼

英文字型用Monaco,但是Monaco沒有中文字型，所以如果碰到中文會使用PingFangSC，一個字型一個字型的找

font-family:"Microsoft Yahei",serif
複製程式碼

字型族不需要引號，因為不是具體的字型

.chinese{
    font-family:"PingFang SC","Microsoft Yahei",monospace
}
複製程式碼

指定在mac系統上用PingFang SC,windows上用Microsoft Yahei，把單個平臺獨有的字型寫到前面

網路字型、自定義字型

• 自定義字型

@font-face{
    font-family:"IF";
    src:url("./IndieFlower.ttf");
}

.custom-font{
    font-family:IF;
}
複製程式碼

• 網路字型：注意跨域

iconfont

字型機制

• 先把只有一個平臺才有的寫到最前面
• 引用遠端字型有問題的話，要注意跨域問題
• 阿里巴巴的圖示庫，自選 iconfont.cn

行高

行高的構成

• 行高由line-box決定
• line-hight會撐起inline-box的高度，並不會影響本身佈局的高度，但是會影響外部元素(line-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或者display:block

背景

背景顏色

• HSL
  • H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
  • S：Saturation(飽和度)。取值為：0.0% - 100.0%
  • L：Lightness(亮度)。取值為：0.0% - 100.0% background:hsl(0,100%,50%)
• RGB(A)
• 背景圖

漸變色背景

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-size:30px 30px
複製程式碼

background實現各種漸變背景，可以通過疊加實現，放射漸變

背景圖片和屬性(雪碧圖)

• 優點：

  • 減少載入網頁圖片時對伺服器的請求次數

  • 提高頁面的載入速度

  由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。
  單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF
  都有自己的一個色表，這就增加了總體的大小。
  因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小
  複製程式碼

• 缺點：

  • 單個圖片大小，考慮網路環境比較差的情況
  • 記憶體使用問題。大量空白你就會最終使用大量的無用的空白。

  一個例子是來自於WHIT TV的網站。
  注意這是一個1299×15,000畫素的PNG圖片。
  它也被壓縮的很好——實際下載大小隻有大概26K —
  但是瀏覽器並不會渲染壓縮後的圖片資料。當這個圖片被下載並被解壓縮之後
  複製程式碼

  • 維護比較麻煩，

base64和效能優化

• 一種文字格式，顯示的是一串文字，而這串文字就是圖片本身
• 優點
  • 傳輸效能，減少http請求
• 缺點：
  • 增大了體積的開銷
    • 圖片本身提交增大1/3
    • 增大css體積
  • 增加了解碼的開銷
• 適用：小圖示，例如：loading圖
• 用法：一般用在構建中轉，打包

多解析度適配

邊框

邊框的屬性

• 線型
• 大小
• 顏色

邊框背景圖

border-img('./border.img') 30 round;

//repeat：可能會導致不完整
//round：整數個拼，可能會有一些空間上的壓縮
複製程式碼

邊框銜接(三角形)

原理：利用邊框銜接過程是斜切

width:0px;
border-bottom:30px solid red;
border-left:20px solid transparent;
border-right:20px solid transparent;
複製程式碼

滾動

滾動行為和滾動條

• visible:內容直接顯示，撐出容器
• hidden：超出容器部分隱藏
• scroll:超出容器滾動，始終顯示滾動條
• auto:超出容器滾動，當內容比較短不需要滾動條的時候不顯示滾動條

在mac系統上收系統設定影響

文字折行

overflow-wrap(word-wrap)通用換行控制 - 相容性不太好，經常還用word-wrap - 是否保留單詞 - normal 只在允許的斷字點換行（瀏覽器保持預設處理）。 - break-word 在長單詞或 URL 地址內部進行換行。

word-break - 針對多位元組文字，中文句子也是單詞 - break-all 允許在單詞內換行。 - keep-all 只能在半形空格或連字元處換行，中文句子也不換行，相容性還有點問題

white-space - 空白處是否斷行 - 不換行的話 white-space: nowrap

overflow-wrap: break-word ;
word-break: keep-all;
white-space: normal ;
複製程式碼

裝飾性屬性(粗體、斜體、下劃線)

• 字重(粗體) font-weight
• 斜體font-style:itatic
• 下劃線text-decoration
• 指標cursor

hack

• Hack看起來不合法但生效的寫法
• 主要用於區分不同的瀏覽器，只在特定的瀏覽器生效
• 缺點
  • 難理解
  • 難維護
  • 易失效
• 替代方案
  • 特性檢測
  • 針對性加class
• 使用注意
  • 標準屬性寫到前面，hack寫到後面
• 作用
  • 瀏覽器相容性
• 典型案例
  • checkbox
  • tabs

css佈局

佈局簡介

CSS佈局

• 早期以table為主(簡單)
  • 解析並不是流式的，以前可能等待時間長，現在已經可以流式佈局
• 後來以技巧性佈局為主(難)
• 現在有flexbox/grid(偏簡單)
• 響應式佈局是(必備知識)

常用佈局方式

• table表格佈局
• float浮動+margin
• inline-block佈局
• flexbox佈局

佈局方式(表格)

• display:table
• display:table-row

一些佈局屬性

盒模型

寬度和高度是隻對內容區生效 佔據的空間是content + padding + border

display/position

display確定元素的顯示型別：

• block
• inline
• inline-block:有寬高有可以與其他元素排在同一行

position確定元素的位置：

• static:靜態佈局，按照文件流佈局
• relative:相對於元素本身的偏移，relative偏移時，元素所佔據的文件空間不會產生偏移
• absolute：從文件流脫離，相對於最近的父級absolute或者relative，如果父級不是的話，會一直網上到body
• fixed:相對於螢幕/可視區域

定位於relatvie、absolute、fixed都可以設定z-index，數值越大附帶

flexbox佈局

• 彈性盒子
• 盒子本來就是並列的
• 指定寬度即可

 

• 低版本IE不支援
• 出過三個版本，市面上各個瀏覽器都有對應的解析，會導致一些相容性問題
• 移動瀏覽器基本相容,react Native和微信小程式可以直接用來佈局

彈性佈局用法詳解

float 佈局

float

• 元素“浮動”
• 脫離文件流
• 但不脫離文字流

float對自身的影響：

• 形成“塊”(BFC),inline元素也可以設定寬高(BFC背後的神奇原理)
• 位置儘量靠上
• 位置儘量靠左(右)

float本意就是要做文字環繞、圖文混排等內容的

對兄弟的影響

• 上面貼著非float元素
• 旁邊貼float元素
• 不影響其他塊級元素位置
• 影響其他塊級元素內部文字

對父級元素的影響

• 從父級元素上“消失”
• 高度“塌陷”

解決“高度塌陷”的方案

• 讓父元素形成BFC來接管自己的高度

  • overflow:auto/hidden
  • 當裡面的元素超出的時候自動滾動

• 用其他元素撐起來

container2::after{
	content:'';
	clear:'both';       //保證這個元素左右都是"乾淨"的，沒有浮動元素
	display:block;      
	height:0;           //不佔高度
	visibility:hidden   //不用顯示
}
//比較經典的清除浮動佈局的方式	
複製程式碼

float佈局

• 相容性好

float和margin實現兩欄佈局和三欄佈局

• 兩欄佈局：
  • float:left(左)
  • margin-left:左元素的寬度(右)
• 三欄佈局：記住“儘量往左靠，儘量往右靠”
  • float:left(左)
  • float:right(右)
  • 中間元素寫在最後，否則右邊的float元素不會對其
    • margin-left:左元素的寬度
    • margin-right:右元素的寬度

inline-block佈局

• 像文字一樣排block元素
• 沒有清除浮動等問題
• 需要處理間隙

處理間隙

• 間隙來源：html中的空白
• 處理辦法：
  • 直接把兩塊html寫在一起；
  • 兩塊中間加一個註釋；<!-- -->
  • 父字型設定font-size:0;子塊重新加上字型font-sizi:14px;

響應式設計和佈局

響應式設計和佈局

• 在不同的裝置上正常使用
• 一般主要處理螢幕大小的問題
• 主要方法：
  • 隱藏+折行+自適應空間
  • rem/viewport/media query

viewport：

• 適配的第一部永遠是加上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：

    html{
        font-size:16px; // 預設16個畫素，為了好記一般設定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`佈局
複製程式碼

主流網站使用的佈局方式

float佈局:相容性好

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(大小方面的適配)
• 設計上:隱藏折行自適應

css效果

效果屬性

• box-shadow
• text-shadow
• border-radius
• background
• clip-path

box-shadow

• 營造層次感(立體感)
• 充當沒有寬度的邊框
• 特殊效果

一個div畫xx系列，可以用box-shadow，其他圖形可以通過點，確定是可能有效能問題

text-shadow

• 立體感
• 印刷的品質感

border-radius

• 圓角矩形
• 圓形(圓角足夠大 border-radius:50%)
  百分比是寬高的百分比
• 半圓/扇形
  
• 一些奇怪的角角
  

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;
複製程式碼

支援svg

transform

3D-transform

變換transform(2D)

• translate(translateZ 3D立體)

• scale
• skew(斜切)
• rotate

transform:translateX(100px) translateY(100px) rotate(25deg)

transform:rotate(25deg) translateX(100px) translateY(100px) 

//有順序
複製程式碼

• 缺點：效能不是很好
• 複雜場景下出現渲染不一樣問題

面試題

如何用一個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;		
複製程式碼

css動畫

動畫的原理：

• 視覺暫留作用
• 畫面逐漸變化

動畫的作用

• 愉悅感
• 引起注意
• 操作進行反饋
• 掩飾(程式在後臺載入)

動畫型別

• transition補間動畫(中間的過程瀏覽器腦補起來)
• keyframe關鍵幀動畫(也是補間動畫，但是有很多關鍵幀)
• 逐幀動畫(特殊的逐幀動畫，無法使用補間動畫)

transition

• 位置-平移(left/right/margin/transform)
• 方位-旋轉(transform)
• 大小-縮放(transform)
• 透明度(opacity)
• 其他-線性變換(transform)

深入瞭解transition動畫

transition: [動畫型別] [動畫時間]

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等

前處理器

介紹

• 基於CSS的另一種語言
• 通過工具編譯成CSS
• 新增了很多CSS不具備的特性(變數)
• 能提升CSS檔案的組織方式

less和sass的區別

• less
  • 基於node
  • 優點：用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檔案模組化

前處理器的優缺點

• 優點：提高程式碼複用率和可維護性
• 缺點：需要引入編譯過程 有學習成本

前端工程化發展起來了，前處理器的熱度有所下降

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原始檔，修改變數

CSS工程化方案

CSS工程化介紹

• 組織
• 優化
• 構建
• 維護

postCSS外掛的使用

• PostCSS本身只有解析能力
• 各種神奇的特性全靠外掛
• 目前至少有200多個外掛
  • import模組合併
  • autoprefixier自動加字首
  • cssnano壓縮程式碼
  • cssnext使用css新特性
  • precss
    • 變數
    • 條件
    • 迴圈
    • MIxin Extend
    • import
    • 屬性值引用

gulpPostCSS

postCSS支援的構建工具

• Webpack        postcss-loader
• Gulp              gulp-postcss
• Grunt            grunt-postcss
• Rollup          rollup-postcss

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)

三大框架中的css

Angular中的CSS

Angular各版本

• Angular.js(1.x)
  • 沒有樣式整合能力
• Angular(2+)
  • typeScript
  • 提供了樣式封裝能力
  • 與元件深度整合

shadowDOM

• 邏輯上是一個DOM
• 結構上存在子集集合

shadowDOM介紹

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

金三銀四，看見大家都在為了面試而努力 特開了一個前端模擬面試題，組織了面試的群友每天來群裡分享面試題，講題 急思眾議，共同進步，歡迎最近在面試或者準備面試的群友加入本群，加群格式： 工作年限-面試等級(初、中、高)-工作地點 (不在面試或者不準備面試或者不說話的勿加本群，加了也會被清理，我們的目標是留下一部分願意通過討論學習和分享提高自身能力的群友)