整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 代碼約定
很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。
在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。
而針對于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫，可以使用以下代碼：
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風(fēng)格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個(gè)段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個(gè)段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個(gè)元素都要添加關(guān)閉標(biāo)簽。
不推薦:
<section>
<p>這是一個(gè)段落。
<p>這是一個(gè)段落。
</section>
推薦:
<section>
<p>這是一個(gè)段落。</p>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：
我們可以這么寫：
<meta charset="utf-8">
也可以這么寫：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面，使用這種風(fēng)格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時(shí)使用大小寫是非常不好的習(xí)慣。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5 屬性值可以不用引號。
屬性值我們推薦使用引號:
如果屬性值含有空格需要使用引號。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號易于閱讀。
以下實(shí)例屬性值包含空格，沒有使用引號，所以不能起作用:
<table class=table striped>
以下使用了雙引號，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時(shí)，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸，在加載時(shí)可以預(yù)留指定空間，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器，左右滾動(dòng)代碼是不方便的。
每行代碼盡量少于 80 個(gè)字符。
空行和縮進(jìn)
不要無緣無故添加空行。
為每個(gè)邏輯功能塊添加空行，這樣更易于閱讀。
縮進(jìn)使用兩個(gè)空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進(jìn)。
不必要的空行和縮進(jìn):
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想,
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。</p>
</body>
表格實(shí)例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表實(shí)例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。
以下 HTML5 文檔是正確的:
實(shí)例:
<!DOCTYPE html>
<head>
<title>頁面標(biāo)題</title>
</head>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文檔的根元素，用于描述頁面的語言：
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會(huì)崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。
省略 <head>?
在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。
默認(rèn)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。
實(shí)例
<!DOCTYPE html>
<html>
<title>頁面標(biāo)題</title>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
</body>
</html>
嘗試一下 ?
| 現(xiàn)在省略 head 標(biāo)簽還不推薦使用。 |
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁面的主題:
<title>菜鳥教程</title>
標(biāo)題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫：
<!--
這是一個(gè)較長評論。 這是 一個(gè)較長評論。這是一個(gè)較長評論。
這是 一個(gè)較長評論 這是一個(gè)較長評論。 這是 一個(gè)較長評論。
-->
長評論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個(gè)空格來縮進(jìn)。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號。
只有屬性值包含空格時(shí)才使用引號。
右花括號放在新的一行。
每行最多 80 個(gè)字符。
| 在逗號和分號后添加空格是常用的一個(gè)規(guī)則。 |
在 HTML 中載入 JavaScript
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。
以下兩個(gè) JavaScript 語句會(huì)輸出不同結(jié)果:
實(shí)例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
訪問 JavaScript 代碼規(guī)范。
使用小寫文件名
大多 Web 服務(wù)器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。
其他 Web 服務(wù)器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫的文件名。
文件擴(kuò)展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來處理。
區(qū)別在于：
.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。
在 Unix 系統(tǒng)中后綴沒有特別限制，一般用 .html。
技術(shù)上區(qū)別
如果一個(gè) URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。
不管怎樣，HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
)通過創(chuàng)建WebSite程序,創(chuàng)建網(wǎng)頁
通過VS菜單欄的"文件"->"新建"->"新建網(wǎng)站"->"ASP.NET空網(wǎng)站"
創(chuàng)建web空網(wǎng)站
在右側(cè)的"解決方案"窗口的空網(wǎng)站上右擊選擇"添加"->"html"起個(gè)名字
創(chuàng)建網(wǎng)頁
2)通過創(chuàng)建WebApplication程序創(chuàng)建網(wǎng)頁
通過VS菜單欄的"文件"->"新建"->"項(xiàng)目"->"新建項(xiàng)目"->"ASP.NET空Web應(yīng)用程序"
創(chuàng)建空web程序
創(chuàng)建好空web程序之后,添加網(wǎng)頁方式如上一個(gè)圖"創(chuàng)建網(wǎng)頁"所示基本差不多不再截圖
3)在指定瀏覽器中查看編輯好的網(wǎng)頁
3.1為WebApplication程序設(shè)置指定瀏覽器
設(shè)置瀏覽器
如上圖所示,點(diǎn)擊此圖標(biāo)即可在瀏覽器中查看編輯后的效果;通過此圖標(biāo)的右側(cè)小三角形查看電腦上都有上面瀏覽器,,前面打?qū)吹乇硎井?dāng)前打開的瀏覽器,如果設(shè)置其他的默認(rèn)瀏覽器,選擇"使用以下工具瀏覽"選項(xiàng),在彈出的對話框中添加,移除設(shè)置默認(rèn)瀏覽器(默不默認(rèn)個(gè)人感覺差別不大),自己手動(dòng)試試不再贅述
瀏覽器選項(xiàng)中的"Page Inspector"是VS自帶的使用IE內(nèi)核的小瀏覽器
3.2為WebSite程序指定瀏覽器
3.2.1第一種方式:WebApplication程序設(shè)置方式差不多自己測試;
3.2.2第二種方式:在右側(cè)WebSite上右擊選擇"瀏覽方式",在此窗口中設(shè)置默認(rèn)等操作
兩種程序第一次點(diǎn)擊瀏覽圖標(biāo)查看網(wǎng)頁時(shí)都會(huì)打開一個(gè)VS自帶小型的服務(wù)器(IIS)
使用VS創(chuàng)建網(wǎng)頁便于下面的JavaScript(簡稱js)語言的講解
1.CSS選擇器的優(yōu)先級
選擇器 | 格式 | 權(quán)重 |
!important | 覆蓋頁面內(nèi)任何位置定義的元素樣式 | |
內(nèi)聯(lián)樣式 | style="color:red;" | 1000 |
id選擇器 | #id | 0100 |
類選擇器 | .className | 0010 |
屬性選擇器 | a[ref=“url”] | 0010 |
偽類選擇器 | p:last-child | 0010 |
偽元素選擇器 | p:after | 0001 |
標(biāo)簽選擇器 | div | 0001 |
相鄰兄弟選擇器 | h1+p | 0 |
子選擇器 | ul > li | 0 |
后代選擇器 | li a | 0 |
通配符選擇器 | * | 0 |
標(biāo)簽選擇器、偽元素選擇器：1
類選擇器、偽類選擇器、屬性選擇器：10
id 選擇器：100
內(nèi)聯(lián)樣式：1000
!important聲明的樣式的優(yōu)先級最高；
注意事項(xiàng)：
如果優(yōu)先級相同，則最后出現(xiàn)的樣式生效；
繼承得到的樣式的優(yōu)先級最低；
通用選擇器（*）、子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個(gè)等級中，所以它們的權(quán)值都為 0
樣式表的來源不同時(shí)，優(yōu)先級順序?yàn)椋簝?nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認(rèn)樣式。
一般來說選擇器越具體，優(yōu)先級越高
2.display的屬性值及其作用
屬性值 | 作用 |
none | 元素不顯示，并且會(huì)從文檔流中移除 |
block | 塊類型，默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示 |
inline | 行內(nèi)元素類型，默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示 |
inline-block | 默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示 |
list-item | 像塊類型元素一樣顯示，并添加樣式列表標(biāo)記 |
table | 此元素會(huì)作為塊級表格來顯示 |
inherit | 規(guī)定應(yīng)該從父元素繼承display屬性的值 |
3.display的block、inline和inline-block的區(qū)別
（1）block： 會(huì)獨(dú)占一行，多個(gè)元素會(huì)另起一行，可以設(shè)置width、height、margin和padding屬性；
（2）inline： 元素不會(huì)獨(dú)占一行，設(shè)置width、height屬性無效。但可以設(shè)置水平方向的margin和padding屬性，不能設(shè)置垂直方向的padding和margin；
（3）inline-block： 將對象設(shè)置為inline對象，但對象的內(nèi)容作為block對象呈現(xiàn)，之后的內(nèi)聯(lián)對象會(huì)被排列在同一行內(nèi)。
對于行內(nèi)元素和塊級元素，其特點(diǎn)如下：
（1）行內(nèi)元素
（2）塊級元素
4.隱藏元素的方法有哪些
display: none：渲染樹不會(huì)包含該渲染對象，因此該元素不會(huì)在頁面中占據(jù)位置，也不會(huì)響應(yīng)綁定的監(jiān)聽事件。
visibility: hidden：元素在頁面中仍占據(jù)空間，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件。
opacity: 0：將元素的透明度設(shè)置為 0，以此來實(shí)現(xiàn)元素的隱藏。元素在頁面中仍然占據(jù)空間，并且能夠響應(yīng)元素綁定的監(jiān)聽事件。
z-index: 負(fù)值：來使其他元素遮蓋住該元素，以此來實(shí)現(xiàn)隱藏。
clip/clip-path ：使用元素裁剪的方法來實(shí)現(xiàn)元素的隱藏，這種方法下，元素仍在頁面中占據(jù)位置，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件。
transform: scale(0,0)：將元素縮放為 0，來實(shí)現(xiàn)元素的隱藏。這種方法下，元素仍在頁面中占據(jù)位置，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件
5.transition和animation的區(qū)別
transition是過度屬性，強(qiáng)調(diào)過度，它的實(shí)現(xiàn)需要觸發(fā)一個(gè)事件（比如鼠標(biāo)移動(dòng)上去，焦點(diǎn)，點(diǎn)擊等）才執(zhí)行動(dòng)畫。它類似于flash的補(bǔ)間動(dòng)畫，設(shè)置一個(gè)開始關(guān)鍵幀，一個(gè)結(jié)束關(guān)鍵幀。
animation是動(dòng)畫屬性，它的實(shí)現(xiàn)不需要觸發(fā)事件，設(shè)定好時(shí)間之后可以自己執(zhí)行，且可以循環(huán)一個(gè)動(dòng)畫。它也類似于flash的補(bǔ)間動(dòng)畫，但是它可以設(shè)置多個(gè)關(guān)鍵幀（用@keyframe定義）完成動(dòng)畫
6.偽元素和偽類的區(qū)別和作用
偽元素：在內(nèi)容元素的前后插入額外的元素或樣式，但是這些元素實(shí)際上并不在文檔中生成。它們只在外部顯示可見，但不會(huì)在文檔的源代碼中找到它們，因此，稱為“偽”元素
div:before {content:"第一章：";}
div:after {content:"Hot!";}偽類：將特殊的效果添加到特定選擇器上,它是已有元素上添加類別的，不會(huì)產(chǎn)生新的元素
a:hover {color: #FF00FF}
p:first-child {color: red}偽類是通過在元素選擇器上加?偽類改變元素狀態(tài)，?偽元素通過對元素的操作進(jìn)?對元素的改變。
7.CSS3中有哪些常用新特性
新增各種CSS選擇器 （: not(.a)：所有 class 不是“a”的節(jié)點(diǎn)）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影 （Shadow）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉(zhuǎn) （transform）
8.對line-height 的理解及其賦值方式
概念：
line-height 指一行文本的高度，包含了字間距，實(shí)際上是下一行基線到上一行基線距離；
如果一個(gè)標(biāo)簽沒有定義 height 屬性，那么其最終表現(xiàn)的高度由 line-height 決定；
一個(gè)容器沒有設(shè)置高度，那么撐開容器高度的是 line-height，而不是容器內(nèi)的文本內(nèi)容；把 line-height 值設(shè)置為 height 一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中；
line-height 和 height 都能撐開一個(gè)高度；
賦值方式：
帶單位：px 是固定值，而 em 會(huì)參考父元素 font-size 值計(jì)算自身的行高
純數(shù)字：此數(shù)字會(huì)與當(dāng)前的字體大小(font-size)相乘來設(shè)置行間,相當(dāng)于倍數(shù)
百分比：與元素自身的字體大小(font-size)有關(guān)，計(jì)算值是給定的百分比值乘以元素計(jì)算出的字體大小
注意：
body {
line-height: 200%;
font-size: 30px;
}
p {
font-size: 16px;
}這時(shí)候p標(biāo)簽的line-height為60px，因?yàn)閎ody的line-height=200% * 30px = 60px。再p標(biāo)簽直接繼承body的line-height，而不是16*200%的32px
9.CSS 優(yōu)化和提高性能的方法有哪些
加載性能：
（1）css壓縮：將寫好的css進(jìn)行打包壓縮，可以減小文件體積
（2）減少使用@import，建議使用link，因?yàn)楹笳咴陧撁婕虞d時(shí)一起加載，前者是等待頁面加載完成之后再進(jìn)行加載。
選擇器性能：
（1）關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）。CSS選擇符是從右到左進(jìn)行匹配的。當(dāng)使用后代選擇器的時(shí)候，瀏覽器會(huì)遍歷所有子元素來確定是否是指定的元素等等；
（2）如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹配它們了）。
（3）避免使用通配規(guī)則，如*{}計(jì)算次數(shù)驚人，只對需要用到的元素進(jìn)行選擇。
（4）盡量少的去對標(biāo)簽進(jìn)行選擇，用class作為選擇器。
（5）盡量少的去使用后代選擇器，降低選擇器的權(quán)重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關(guān)聯(lián)每一個(gè)標(biāo)簽元素。
（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復(fù)指定規(guī)則。
渲染性能：
（1）慎重使用高性能屬性：浮動(dòng)、定位。
（2）盡量減少頁面重排、重繪。
（3）去除空規(guī)則：｛｝。空規(guī)則的產(chǎn)生原因一般來說是為了預(yù)留樣式。去除這些空規(guī)則無疑能減少css文檔體積。
（4）屬性值為0時(shí)，不加單位。
（5）屬性值為浮動(dòng)小數(shù)0.**，可以省略小數(shù)點(diǎn)之前的0。
（6）標(biāo)準(zhǔn)化各種瀏覽器前綴：帶瀏覽器前綴的在前。標(biāo)準(zhǔn)屬性在后。
（7）不使用@import前綴，它會(huì)影響css的加載速度。
（8）選擇器優(yōu)化嵌套，盡量避免層級過深。
（9）css雪碧圖，同一頁面相近部分的小圖標(biāo)，方便使用，減少頁面的請求次數(shù)，但是同時(shí)圖片本身會(huì)變大，使用時(shí)，優(yōu)劣考慮清楚，再使用。
（10）正確使用display的屬性，由于display的作用，某些樣式組合會(huì)無效，徒增樣式體積的同時(shí)也影響解析性能。
（11）不濫用web字體。對于中文網(wǎng)站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時(shí)會(huì)阻塞頁面渲染損傷性能。
可維護(hù)性、健壯性：
（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進(jìn)行使用，提高css的可維護(hù)性。
（2）樣式與內(nèi)容分離：將css代碼定義到外部css中。
10.CSS預(yù)處理器/后處理器是什么？為什么要使用它們
預(yù)處理器， 如：less，sass，用來預(yù)編譯sass或者less，增加了css代碼的復(fù)用性。層級，mixin， 變量，循環(huán)， 函數(shù)等對編寫以及開發(fā)UI組件都極為方便。
后處理器， 如： postCss，通常是在完成的樣式表中根據(jù)css規(guī)范處理css，讓其更加有效。目前最常做的是給css屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問題。
css預(yù)處理器為css增加一些編程特性，無需考慮瀏覽器的兼容問題，可以在CSS中使用變量，簡單的邏輯程序，函數(shù)等在編程語言中的一些基本的性能，可以讓css更加的簡潔，增加適應(yīng)性以及可讀性，可維護(hù)性等。
其它c(diǎn)ss預(yù)處理器語言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。
使用原因：
11.::before 和 :after 的雙冒號和單冒號有什么區(qū)別
冒號(:)用于CSS3偽類
雙冒號(::)用于CSS3偽元素。
::before就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于dom之中，只存在在頁面之中。
注意： :before 和 :after 這兩個(gè)偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before、::after
12.單行、多行文本溢出隱藏
單行文本溢出
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出用省略號顯示
white-space: nowrap; // 規(guī)定段落中的文本不進(jìn)行換行多行文本溢出
overflow: hidden; // 溢出隱藏
text-overflow: ellipsis; // 溢出用省略號顯示
display:-webkit-box; // 作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3; // 顯示的行數(shù)注意：由于上面的三個(gè)屬性都是 CSS3 的屬性，沒有瀏覽器可以兼容，所以要在前面加一個(gè)-webkit- 來兼容一部分瀏覽器
12.對 CSS 工程化的理解
CSS 工程化是為了解決以下問題：
以下三個(gè)方向都是時(shí)下比較流行的、普適性非常好的 CSS 工程化實(shí)踐：
基于這三個(gè)方向，可以衍生出一些具有典型意義的子問題，這里我們逐個(gè)來看：
（1）預(yù)處理器：為什么要用預(yù)處理器？它的出現(xiàn)是為了解決什么問題？
預(yù)處理器，其實(shí)就是 CSS 世界的“輪子”。預(yù)處理器支持我們寫一種類似 CSS、但實(shí)際并不是 CSS 的語言，然后把它編譯成 CSS 代碼：
那為什么寫 CSS 代碼寫得好好的，偏偏要轉(zhuǎn)去寫“類 CSS”呢？這就和本來用 JS 也可以實(shí)現(xiàn)所有功能，但最后卻寫 React 的 jsx 或者 Vue 的模板語法一樣——為了爽！要想知道有了預(yù)處理器有多爽，首先要知道的是傳統(tǒng) CSS 有多不爽。隨著前端業(yè)務(wù)復(fù)雜度的提高，前端工程中對 CSS 提出了以下的訴求：
這三點(diǎn)是傳統(tǒng) CSS 所做不到的，也正是預(yù)處理器所解決掉的問題。預(yù)處理器普遍會(huì)具備這樣的特性：
（2）Webpack 能處理 CSS 嗎？如何實(shí)現(xiàn)？ Webpack 能處理 CSS 嗎：
如何用 Webpack 實(shí)現(xiàn)對 CSS 的處理：
在實(shí)際使用中，css-loader 的執(zhí)行順序一定要安排在 style-loader 的前面。因?yàn)橹挥型瓿闪司幾g過程，才可以對 css 代碼進(jìn)行插入；若提前插入了未編譯的代碼，那么 webpack 是無法理解這坨東西的，它會(huì)無情報(bào)錯(cuò)。
13.如何判斷元素是否到達(dá)可視區(qū)域
window.innerHeight 是瀏覽器可視區(qū)的高度；
document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動(dòng)的過的距離；
imgs.offsetTop 是元素頂部距離文檔頂部的高度（包括滾動(dòng)條的距離）；
內(nèi)容達(dá)到顯示區(qū)域的：img.offsetTop < window.innerHeight + document.body.scrollTop;
14.z-index屬性在什么情況下會(huì)失效
通常 z-index 的使用是在有兩個(gè)重疊的標(biāo)簽，在一定的情況下控制其中一個(gè)在另一個(gè)的上方或者下方出現(xiàn)。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。
z-index屬性在下列情況下會(huì)失效：
15.px、em、rem的區(qū)別及使用場景
三者的區(qū)別：
px是固定的像素，一旦設(shè)置了就無法因?yàn)檫m應(yīng)頁面大小而改變。
em和rem相對于px更具有靈活性，他們是相對長度單位，其長度不是固定的，更適用于響應(yīng)式布局。
em是相對于其父元素來設(shè)置字體大小，這樣就會(huì)存在一個(gè)問題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小。而rem是相對于根元素，這樣就意味著，只需要在根元素確定一個(gè)參考值。
使用場景：
對于只需要適配少部分移動(dòng)設(shè)備，且分辨率對頁面影響不大的，使用px即可 。
對于需要適配各種移動(dòng)設(shè)備，使用rem，例如需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。
16.對Flex布局的理解及其使用場景
Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱"項(xiàng)目"。容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），項(xiàng)目默認(rèn)沿水平主軸排列。
以下6個(gè)屬性設(shè)置在容器上：
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。
justify-content屬性定義了項(xiàng)目在主軸上的對齊方式。
align-items屬性定義項(xiàng)目在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
以下6個(gè)屬性設(shè)置在項(xiàng)目上：
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認(rèn)值為0 1 auto。
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
簡單來說： flex布局是CSS3新增的一種布局方式，可以通過將一個(gè)元素的display屬性值設(shè)置為flex從而使它成為一個(gè)flex容器，它的所有子元素都會(huì)成為它的項(xiàng)目。一個(gè)容器默認(rèn)有兩條軸：一個(gè)是水平的主軸，一個(gè)是與主軸垂直的交叉軸。可以使用flex-direction來指定主軸的方向。可以使用justify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規(guī)定當(dāng)一行排列不下時(shí)的換行方式。對于容器中的項(xiàng)目，可以使用order屬性來指定項(xiàng)目的排列順序，還可以使用flex-grow來指定當(dāng)排列空間有剩余的時(shí)候，項(xiàng)目的放大比例，還可以使用flex-shrink來指定當(dāng)排列空間不足時(shí)，項(xiàng)目的縮小比例
17.各種圖形的繪制
（1）三角1
div {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}（2）三角2
div {
width: 0;
height: 0;
border-left: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}（3）扇形
div{
border: 100px solid transparent;
width: 0;
heigt: 0;
border-radius: 100px;
border-top-color: red;
}18.設(shè)置小于12px的字體
在谷歌下css設(shè)置字體大小為12px及以下時(shí)，顯示都是一樣大小，都是默認(rèn)12px。
解決辦法：
使用Webkit的內(nèi)核的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit-text-size-adjust:none;字體大小就不受限制了。
使用css3的transform縮放屬性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收縮的是整個(gè)元素的大小，這時(shí)候，如果是內(nèi)聯(lián)元素，必須要將內(nèi)聯(lián)元素轉(zhuǎn)換成塊元素，可以使用display：block/inline-block
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
