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

時間 2019-11-16

原文原文鏈接

1、HTML基礎

html常見元素和理解

html常見元素分類css

head區元素：（不會在頁面上留下直接內容）html
- 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重要屬性vue

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進行關聯

如何理解htmlhtml5

HTML「文檔」
描述文檔的結構
有區塊和大綱

"大綱"做用node

更好的讓機器、搜索引擎、蜘蛛很好的理解結構
html的語義化

html版本react

HTML4/4.01(SGML)瀏覽器作不少的容錯和修正工做
XHTML(XML)要求很是嚴格，嚴格要求編碼習慣
HTML5(基於HTML4)

html5新增內容webpack

新增區塊標籤
- section
- article
- nav
- aside //通常不出如今大綱中，表示不重要的廣告類
表單加強
- 日期、時間、搜索
- 表單驗證
- placehold自動聚焦

html5新增語意css3

header/footer頭尾
section/article區域
nav導航
aside不重要內容
em/strong強調
i //icon

元素分類

按默認樣式分web

塊級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按鈕
便於瀏覽器保存表單
第三方庫能夠總體提取值
第三方庫能夠進行表單驗證

2、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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

1、HTML基礎

html常見元素和理解

元素分類

面試題

doctype的意義是什麼？

HTML、XHTML、HTML5的關係

HTML5有什麼變化

em和i有什麼區別

語義化的意義是什麼

哪些元素能夠自閉合

HTML和DOM的關係

property和attribute的區別

form做用

2、css基礎

選擇器

非佈局樣式

字體

行高

背景

邊框

滾動

文本折行

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

hack

css佈局

佈局簡介

一些佈局屬性

display/position

flexbox佈局

float 佈局

inline-block佈局

響應式設計和佈局

主流網站使用的佈局方式

CSS面試題

實現兩欄(三欄)佈局的方法

position:absolute/fixed有什麼區別？

display:inline-block的間隙

如何清除浮動

如何適配移動端頁面?

css效果

box-shadow

text-shadow

border-radius

background

clip-path

3D-transform

面試題

如何用一個div畫xxx

如何產生不佔空間的邊框

如何實現圓形元素(頭像)

如何實現IOS圖標的圓角

如何實現半圓、扇形等圖標

如何實現背景圖居中顯示/不重複/改變大小

如何平移放大一個元素

如何實現3D效果

css動畫

transition

keyframes動畫

逐幀動畫

CSS面試題

CSS中動畫怎麼寫，transation和animation和keyframs怎麼寫

CSS中動畫實現的方式有幾種

過渡動畫和關鍵幀動畫的區別

如何實現逐幀動畫

CSS動畫的性能

預處理器

嵌套

變量

mixin

extend

loop

import

預處理器框架

面試題

常見的CSS預處理器

預處理器做用

預處理利器的做用

預處理器的優缺點

Bootstrap

`doctype`的意義是什麼？

`HTML`、`XHTML`、`HTML5`的關係

`property`和`attribute`的區別

`form`做用

`hack`

`display/position`

`inline-block`佈局

`position:absolute/fixed`有什麼區別？

`display:inline-block`的間隙

`css`效果

`3D-transform`

`transition`

`keyframes`動畫

`CSS`中動畫怎麼寫，`transation`和`animation`和`keyframs`怎麼寫

`CSS`中動畫實現的方式有幾種

`extend`

`loop`

`import`

`Bootstrap`

`Js`組件

`CSS`面試題

`Bootstrap`的優缺點

`Bootstrap`如何實現響應式佈局

如何基於`Bootstrap`定製本身的樣式

`postCSS`插件的使用

`gulpPostCSS`

`webpack`處理`css`

`css-modules`和`extract-text-plugin`

`PostCSS`能夠作什麼

`CSS modules`是作什麼的，如何使用

爲何使用`JS`來引用、加載`CSS`

三大框架中的`css`

`Angular`中的`CSS`

`Vue`中的`CSS`

`React`中的`CSS`