整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
篇文章圍繞了 CSS 的核心知識點和項目中常見的需求來展開。雖然行文偏長，但較基礎(chǔ)，適合初級中級前端閱讀，閱讀的時候請適當跳過已經(jīng)掌握的部分。
這篇文章斷斷續(xù)續(xù)寫了比較久，也參考了許多優(yōu)秀的文章，但或許文章里還是存在不好或不對的地方，請多多指教，可以評論里直接提出來哈。
小tip：后續(xù)內(nèi)容更精彩哦。
CSS 的核心功能是將 CSS 屬性設(shè)定為特定的值。一個屬性與值的鍵值對被稱為聲明（declaration）。
css復制代碼color: red;
而如果將一個或者多個聲明用 {} 包裹起來后，那就組成了一個聲明塊（declaration block）。
css復制代碼{
color: red;
text-align: center;
}
聲明塊如果需要作用到對應的 HTML 元素，那還需要加上選擇器。選擇器和聲明塊組成了CSS 規(guī)則集（CSS ruleset），常簡稱為 CSS 規(guī)則。
css復制代碼span {
color: red;
text-align: center;
}
規(guī)則集中最后一條聲明可以省略分號，但是并不建議這么做，因為容易出錯。
CSS 中的注釋：
css復制代碼/* 單行注釋 */
/*
多行
注釋
*/
在 CSS 文件中，除了注釋、CSS 規(guī)則集以及 @規(guī)則 外，定義的一些別的東西都將被瀏覽器忽略。
CSS 規(guī)則是樣式表的主體，通常樣式表會包括大量的規(guī)則列表。但有時候也需要在樣式表中包括其他的一些信息，比如字符集，導入其它的外部樣式表，字體等，這些需要專門的語句表示。
而 @規(guī)則 就是這樣的語句。CSS 里包含了以下 @規(guī)則：
除了以上這幾個之外，下面還將對幾個比較生澀的 @規(guī)則 進行介紹。
@charset 用于定義樣式表使用的字符集。它必須是樣式表中的第一個元素。如果有多個 @charset 被聲明，只有第一個會被使用，而且不能在HTML元素或HTML頁面的 <style> 元素內(nèi)使用。
注意：值必須是雙引號包裹，且和
css復制代碼@charset "UTF-8";
平時寫樣式文件都沒寫 @charset 規(guī)則，那這個 CSS 文件到底是用的什么字符編碼的呢？
某個樣式表文件到底用的是什么字符編碼，瀏覽器有一套識別順序（優(yōu)先級由高到低）：
@import 用于告訴 CSS 引擎引入一個外部樣式表。
link 和 @import 都能導入一個樣式文件，它們有什么區(qū)別嘛？
@supports 用于查詢特定的 CSS 是否生效，可以結(jié)合 not、and 和 or 操作符進行后續(xù)的操作。
css復制代碼/* 如果支持自定義屬性，則把 body 顏色設(shè)置為變量 varName 指定的顏色 */
@supports (--foo: green) {
body {
color: var(--varName);
}
}
層疊樣式表，這里的層疊怎么理解呢？其實它是 CSS 中的核心特性之一，用于合并來自多個源的屬性值的算法。比如說針對某個 HTML 標簽，有許多的 CSS 聲明都能作用到的時候，那最后誰應該起作用呢？層疊性說的大概就是這個。
針對不同源的樣式，將按照如下的順序進行層疊，越往下優(yōu)先級越高：
理解層疊性的時候需要結(jié)合 CSS 選擇器的優(yōu)先級以及繼承性來理解。比如針對同一個選擇器，定義在后面的聲明會覆蓋前面的；作者定義的樣式會比默認繼承的樣式優(yōu)先級更高。
CSS 選擇器無疑是其核心之一，對于基礎(chǔ)選擇器以及一些常用偽類必須掌握。下面列出了常用的選擇器。 想要獲取更多選擇器的用法可以看 MDN CSS Selectors。
屬性選擇器
條件偽類
行為偽類
狀態(tài)偽類
結(jié)構(gòu)偽類
優(yōu)先級就是分配給指定的 CSS 聲明的一個權(quán)重，它由匹配的選擇器中的每一種選擇器類型的數(shù)值決定。為了記憶，可以把權(quán)重分成如下幾個等級，數(shù)值越大的權(quán)重越高：
可以看到內(nèi)聯(lián)樣式（通過元素中 style 屬性定義的樣式）的優(yōu)先級大于任何選擇器；而給屬性值加上 !important 又可以把優(yōu)先級提至最高，就是因為它的優(yōu)先級最高，所以需要謹慎使用它，以下有些使用注意事項：
在 CSS 中有一個很重要的特性就是子元素會繼承父元素對應屬性計算后的值。比如頁面根元素 html 的文本顏色默認是黑色的，頁面中的所有其他元素都將繼承這個顏色，當申明了如下樣式后，H1 文本將變成橙色。
css復制代碼body {
color: orange;
}
h1 {
color: inherit;
}
設(shè)想一下，如果 CSS 中不存在繼承性，那么我們就需要為不同文本的標簽都設(shè)置一下 color，這樣一來的后果就是 CSS 的文件大小就會無限增大。
CSS 屬性很多，但并不是所有的屬性默認都是能繼承父元素對應屬性的，那哪些屬性存在默認繼承的行為呢？一定是那些不會影響到頁面布局的屬性，可以分為如下幾類：
對于其他默認不繼承的屬性也可以通過以下幾個屬性值來控制繼承行為：
在 CSS 的世界中，會把內(nèi)容按照從左到右、從上到下的順序進行排列顯示。正常情況下會把頁面分割成一行一行的顯示，而每行又可能由多列組成，所以從視覺上看起來就是從上到下從左到右，而這就是 CSS 中的流式布局，又叫文檔流。文檔流就像水一樣，能夠自適應所在的容器，一般它有如下幾個特性：
如何脫離文檔流呢？
脫流文檔流指節(jié)點脫流正常文檔流后，在正常文檔流中的其他節(jié)點將忽略該節(jié)點并填補其原先空間。文檔一旦脫流，計算其父節(jié)點高度時不會將其高度納入，脫流節(jié)點不占據(jù)空間。有兩種方式可以讓元素脫離文檔流：浮動和定位。
在 CSS 中任何元素都可以看成是一個盒子，而一個盒子是由 4 部分組成的：內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。
盒模型有 2 種：標準盒模型和 IE 盒模型，本別是由 W3C 和 IExplore 制定的標準。
如果給某個元素設(shè)置如下樣式：
css復制代碼.box {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #eee;
margin: 10px;
}
標準盒模型認為：盒子的實際尺寸=內(nèi)容（設(shè)置的寬/高） + 內(nèi)邊距 + 邊框
所以 .box 元素內(nèi)容的寬度就為 200px，而實際的寬度則是 width + padding-left + padding-right + border-left-width + border-right-width=200 + 10 + 10 + 1 + 1=222。
IE 盒模型認為：盒子的實際尺寸=設(shè)置的寬/高=內(nèi)容 + 內(nèi)邊距 + 邊框
.box 元素所占用的實際寬度為 200px，而內(nèi)容的真實寬度則是 width - padding-left - padding-right - border-left-width - border-right-width=200 - 10 - 10 - 1 - 1=178。
現(xiàn)在高版本的瀏覽器基本上默認都是使用標準盒模型，而像 IE6 這種老古董才是默認使用 IE 盒模型的。
在 CSS3 中新增了一個屬性 box-sizing，允許開發(fā)者來指定盒子使用什么標準，它有 2 個值：
視覺格式化模型（Visual formatting model）是用來處理和在視覺媒體上顯示文檔時使用的計算規(guī)則。CSS 中一切皆盒子，而視覺格式化模型簡單來理解就是規(guī)定這些盒子應該怎么樣放置到頁面中去，這個模型在計算的時候會依賴到很多的因素，比如：盒子尺寸、盒子類型、定位方案（是浮動還是定位）、兄弟元素或者子元素以及一些別的因素。
從上圖中可以看到視覺格式化模型涉及到的內(nèi)容很多，有興趣深入研究的可以結(jié)合上圖看這個 W3C 的文檔 Visual formatting model。所以這里就簡單介紹下盒子類型。
盒子類型由 display 決定，同時給一個元素設(shè)置 display 后，將會決定這個盒子的 2 個顯示類型（display type）：
對外顯示方面，盒子類型可以分成 2 類：block-level box（塊級盒子） 和 inline-level box（行內(nèi)級盒子）。
依據(jù)上圖可以列出都有哪些塊級和行內(nèi)級盒子：
所有塊級盒子都會參與 BFC，呈現(xiàn)垂直排列；而所有行內(nèi)級盒子都參會 IFC，呈現(xiàn)水平排列。
除此之外，block、inline 和 inline-block 還有什么更具體的區(qū)別呢？
block
inline
inline-block
對內(nèi)方面，其實就是把元素當成了容器，里面包裹著文本或者其他子元素。container box 的類型依據(jù) display 的值不同，分為 4 種：
值得一提的是如果把 img 這種替換元素（replaced element）申明為 block 是不會產(chǎn)生 container box 的，因為替換元素比如 img 設(shè)計的初衷就僅僅是通過 src 把內(nèi)容替換成圖片，完全沒考慮過會把它當成容器。
參考：
格式化上下文（Formatting Context）是 CSS2.1 規(guī)范中的一個概念，大概說的是頁面中的一塊渲染區(qū)域，規(guī)定了渲染區(qū)域內(nèi)部的子元素是如何排版以及相互作用的。
不同類型的盒子有不同格式化上下文，大概有這 4 類：
其中 BFC 和 IFC 在 CSS 中扮演著非常重要的角色，因為它們直接影響了網(wǎng)頁布局，所以需要深入理解其原理。
塊格式化上下文，它是一個獨立的渲染區(qū)域，只有塊級盒子參與，它規(guī)定了內(nèi)部的塊級盒子如何布局，并且與這個區(qū)域外部毫不相干。
BFC 渲染規(guī)則
如何創(chuàng)建 BFC？
BFC 應用場景
1、 自適應兩欄布局
應用原理：BFC 的區(qū)域不會和浮動區(qū)域重疊，所以就可以把側(cè)邊欄固定寬度且左浮動，而對右側(cè)內(nèi)容觸發(fā) BFC，使得它的寬度自適應該行剩余寬度。
html復制代碼<div class="layout">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
css復制代碼.aside {
float: left;
width: 100px;
}
.main {
<!-- 觸發(fā) BFC -->
overflow: auto;
}
2、清除內(nèi)部浮動
浮動造成的問題就是父元素高度坍塌，所以清除浮動需要解決的問題就是讓父元素的高度恢復正常。而用 BFC 清除浮動的原理就是：計算 BFC 的高度時，浮動元素也參與計算。只要觸發(fā)父元素的 BFC 即可。
css復制代碼.parent {
overflow: hidden;
}
3、 防止垂直 margin 合并
BFC 渲染原理之一：同一個 BFC 下的垂直 margin 會發(fā)生合并。所以如果讓 2 個元素不在同一個 BFC 中即可阻止垂直 margin 合并。那如何讓 2 個相鄰的兄弟元素不在同一個 BFC 中呢？可以給其中一個元素外面包裹一層，然后觸發(fā)其包裹層的 BFC，這樣一來 2 個元素就不會在同一個 BFC 中了。
html復制代碼<div class="layout">
<div class="a">a</div>
<div class="contain-b">
<div class="b">b</div>
</div>
</div>
css復制代碼.demo3 .a,
.demo3 .b {
border: 1px solid #999;
margin: 10px;
}
.contain-b {
overflow: hidden;
}
針對以上 3 個 示例 ，可以結(jié)合這個 BFC 應用示例 配合觀看更佳。
參考：CSS 原理 - Formatting Context
IFC 的形成條件非常簡單，塊級元素中僅包含內(nèi)聯(lián)級別元素，需要注意的是當IFC中有塊級元素插入時，會產(chǎn)生兩個匿名塊將父元素分割開來，產(chǎn)生兩個 IFC。
IFC 渲染規(guī)則
針對如上的 IFC 渲染規(guī)則，你是不是可以分析下下面這段代碼的 IFC 環(huán)境是怎么樣的呢？
html復制代碼<p>It can get <strong>very complicated</storng> once you start looking into it.</p>
對應上面這樣一串 HTML 分析如下：
參考：Inline formatting contexts
IFC 應用場景
偷個懶，demo 和圖我就不做了。
在電腦顯示屏幕上的顯示的頁面其實是一個三維的空間，水平方向是 X 軸，豎直方向是 Y 軸，而屏幕到眼睛的方向可以看成是 Z 軸。眾 HTML 元素依據(jù)自己定義的屬性的優(yōu)先級在 Z 軸上按照一定的順序排開，而這其實就是層疊上下文所要描述的東西。
我們對層疊上下文的第一印象可能要來源于 z-index，認為它的值越大，距離屏幕觀察者就越近，那么層疊等級就越高，事實確實是這樣的，但層疊上下文的內(nèi)容遠非僅僅如此：
在看層疊等級和層疊順序之前，我們先來看下如何產(chǎn)生一個層疊上下文，特定的 HTML 元素或者 CSS 屬性產(chǎn)生層疊上下文，MDN 中給出了這么一個列表，符合以下任一條件的元素都會產(chǎn)生層疊上下文：
層疊等級
層疊等級指節(jié)點在三維空間 Z 軸上的上下順序。它分兩種情況：
普通節(jié)點的層疊等級優(yōu)先由其所在的層疊上下文決定，層疊等級的比較只有在當前層疊上下文中才有意義，脫離當前層疊上下文的比較就變得無意義了。
層疊順序
在同一個層疊上下文中如果有多個元素，那么他們之間的層疊順序是怎么樣的呢？
以下這個列表越往下層疊優(yōu)先級越高，視覺上的效果就是越容易被用戶看到（不會被其他元素覆蓋）：
如何比較兩個元素的層疊等級？
參考：徹底搞懂CSS層疊上下文、層疊等級、層疊順序、z-index
CSS 的聲明是由屬性和值組成的，而值的類型有許多種：
而還有些值是需要帶單位的，比如 width: 100px，這里的 px 就是表示長度的單位，長度單位除了 px 外，比較常用的還有 em、rem、vw/vh 等。那他們有什么區(qū)別呢？又應該在什么時候使用它們呢？
屏幕分辨率是指在屏幕的橫縱方向上的像素點數(shù)量，比如分辨率 1920×1080 意味著水平方向含有 1920 個像素數(shù)，垂直方向含有 1080 個像素數(shù)。
而 px 表示的是 CSS 中的像素，在 CSS 中它是絕對的長度單位，也是最基礎(chǔ)的單位，其他長度單位會自動被瀏覽器換算成 px。但是對于設(shè)備而言，它其實又是相對的長度單位，比如寬高都為 2px，在正常的屏幕下，其實就是 4 個像素點，而在設(shè)備像素比(devicePixelRatio) 為 2 的 Retina 屏幕下，它就有 16 個像素點。所以屏幕尺寸一致的情況下，屏幕分辨率越高，顯示效果就越細膩。
講到這里，還有一些相關(guān)的概念需要理清下：
設(shè)備像素（Device pixels）
設(shè)備屏幕的物理像素，表示的是屏幕的橫縱有多少像素點；和屏幕分辨率是差不多的意思。
設(shè)備像素比（DPR）
設(shè)備像素比表示 1 個 CSS 像素等于幾個物理像素。
計算公式：DPR=物理像素數(shù) / 邏輯像素數(shù)；
在瀏覽器中可以通過 window.devicePixelRatio 來獲取當前屏幕的 DPR。
像素密度（DPI/PPI）
像素密度也叫顯示密度或者屏幕密度，縮寫為 DPI(Dots Per Inch) 或者 PPI(Pixel Per Inch)。從技術(shù)角度說，PPI 只存在于計算機顯示領(lǐng)域，而 DPI 只出現(xiàn)于打印或印刷領(lǐng)域。
計算公式：像素密度=屏幕對角線的像素尺寸 / 物理尺寸
比如，對于分辨率為 750 * 1334 的 iPhone 6 來說，它的像素密度為：
js復制代碼Math.sqrt(750 * 750 + 1334 * 1334) / 4.7=326ppi
設(shè)備獨立像素（DIP）
DIP 是特別針對 Android設(shè)備而衍生出來的，原因是安卓屏幕的尺寸繁多，因此為了顯示能盡量和設(shè)備無關(guān)，而提出的這個概念。它是基于屏幕密度而計算的，認為當屏幕密度是 160 的時候，px=DIP。
計算公式：dip=px * 160 / dpi
em 是 CSS 中的相對長度單位中的一個。居然是相對的，那它到底是相對的誰呢？它有 2 層意思：
我們都知道每個瀏覽器都會給 HTML 根元素 html 設(shè)置一個默認的 font-size，而這個值通常是 16px。這也就是為什么 1em=16px 的原因所在了。
em 在計算的時候是會層層計算的，比如：
html復制代碼<div>
<p></p>
</div>
css復制代碼div { font-size: 2em; }
p { font-size: 2em; }
對于如上一個結(jié)構(gòu)的 HTML，由于根元素 html 的字體大小是 16px，所以 p 標簽最終計算出來后的字體大小會是 16 * 2 * 2=64px
rem(root em) 和 em 一樣，也是一個相對長度單位，不過 rem 相對的是 HTML 的根元素 html。
rem 由于是基于 html 的 font-size 來計算，所以通常用于自適應網(wǎng)站或者 H5 中。
比如在做 H5 的時候，前端通常會讓 UI 給 750px 寬的設(shè)計圖，而在開發(fā)的時候可以基于 iPhone X 的尺寸 375px * 812px 來寫頁面，這樣一來的話，就可以用下面的 JS 依據(jù)當前頁面的視口寬度自動計算出根元素 html 的基準 font-size 是多少。
js復制代碼(function (doc, win) {
var docEl=doc.documentElement,
resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize',
psdWidth=750, // 設(shè)計圖寬度
recalc=function () {
var clientWidth=docEl.clientWidth;
if ( !clientWidth ) return;
if ( clientWidth >=640 ) {
docEl.style.fontSize=200 * ( 640 / psdWidth ) + 'px';
} else {
docEl.style.fontSize=200 * ( clientWidth / psdWidth ) + 'px';
}
};
if ( !doc.addEventListener ) return;
// 綁定事件的時候最好配合防抖函數(shù)
win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
doc.addEventListener( 'DOMContentLoaded', recalc, false );
function debounce(func, wait) {
var timeout;
return function () {
var context=this;
var args=arguments;
clearTimeout(timeout)
timeout=setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
})(document, window);
比如當視口是 375px 的時候，經(jīng)過計算 html 的 font-size 會是 100px，這樣有什么好處呢？好處就是方便寫樣式，比如從設(shè)計圖量出來的 header 高度是 50px 的，那我們寫樣式的時候就可以直接寫：
css復制代碼header {
height: 0.5rem;
}
每個從設(shè)計圖量出來的尺寸只要除于 100 即可得到當前元素的 rem 值，都不用經(jīng)過計算，非常方便。偷偷告訴你，如果你把上面那串計算 html 標簽 font-size 的 JS 代碼中的 200 替換成 2，那在計算 rem 的時候就不需要除于 100 了，從設(shè)計圖量出多大 px，就直接寫多少個 rem。
vw 和 vh 分別是相對于屏幕視口寬度和高度而言的長度單位：
在 JS 中 100vw=window.innerWidth，100vh=window.innerHeight。
vw/vh 的出現(xiàn)使得多了一種寫自適應布局的方案，開發(fā)者不再局限于 rem 了。
相對視口的單位，除了 vw/vh 外，還有 vmin 和 vmax：
CSS 中用于表示顏色的值種類繁多，足夠構(gòu)成一個體系，所以這里就專門拿出一個小節(jié)來講解它。
根據(jù) CSS 顏色草案 中提到的顏色值類型，大概可以把它們分為這幾類：
顏色關(guān)鍵字（color keywords）是不區(qū)分大小寫的標識符，它表示一個具體的顏色，比如 white（白），黑（black）等；
可接受的關(guān)鍵字列表在CSS的演變過程中發(fā)生了改變：
如下這張圖是 16 個基礎(chǔ)色，又叫 VGA 顏色。截止到目前為止 CSS 顏色關(guān)鍵字總共有 146 個，這里可以查看 完整的色彩關(guān)鍵字列表。
需要注意的是如果聲明的時候的顏色關(guān)鍵字是錯誤的，瀏覽器會忽略它。
transparent 關(guān)鍵字表示一個完全透明的顏色，即該顏色看上去將是背景色。從技術(shù)上說，它是帶有 alpha 通道為最小值的黑色，是 rgba(0,0,0,0) 的簡寫。
透明關(guān)鍵字有什么應用場景呢？
實現(xiàn)三角形
下面這個圖是用 4 條邊框填充的正方形，看懂了它你大概就知道該如何用 CSS 寫三角形了。
css復制代碼div {
border-top-color: #ffc107;
border-right-color: #00bcd4;
border-bottom-color: #e26b6b;
border-left-color: #cc7cda;
border-width: 50px;
border-style: solid;
}
用 transparent 實現(xiàn)三角形的原理：
看下示例：
增大點擊區(qū)域
常常在移動端的時候點擊的按鈕的區(qū)域特別小，但是由于現(xiàn)實效果又不太好把它做大，所以常用的一個手段就是通過透明的邊框來增大按鈕的點擊區(qū)域：
css復制代碼.btn {
border: 5px solid transparent;
}
currentColor 會取當前元素繼承父級元素的文本顏色值或聲明的文本顏色值，即 computed 后的 color 值。
比如，對于如下 CSS，該元素的邊框顏色會是 red：
css復制代碼.btn {
color: red;
border: 1px solid currentColor;
}
RGB[A] 顏色是由 R(red)-G(green)-B(blue)-A(alpha) 組成的色彩空間。
在 CSS 中，它有兩種表示形式：
十六進制符號
RGB 中的每種顏色的值范圍是 00~ff，值越大表示顏色越深。所以一個顏色正常是 6 個十六進制字符加上 # 組成，比如紅色就是 #ff0000。
如果 RGB 顏色需要加上不透明度，那就需要加上 alpha 通道的值，它的范圍也是 00~ff，比如一個帶不透明度為 67% 的紅色可以這樣寫 #ff0000aa。
使用十六進制符號表示顏色的時候，都是用 2 個十六進制表示一個顏色，如果這 2 個字符相同，還可以縮減成只寫 1 個，比如，紅色 #f00；帶 67% 不透明度的紅色 #f00a。
函數(shù)符
當 RGB 用函數(shù)表示的時候，每個值的范圍是 0~255 或者 0%~100%，所以紅色是 rgb(255, 0, 0)， 或者 rgb(100%, 0, 0)。
如果需要使用函數(shù)來表示帶不透明度的顏色值，值的范圍是 0~1 及其之間的小數(shù)或者 0%~100%，比如帶 67% 不透明度的紅色是 rgba(255, 0, 0, 0.67) 或者 rgba(100%, 0%, 0%, 67%)
需要注意的是 RGB 這 3 個顏色值需要保持一致的寫法，要嘛用數(shù)字要嘛用百分比，而不透明度的值的可以不用和 RGB 保持一致寫法。比如 rgb(100%, 0, 0) 這個寫法是無效的；而 rgb(100%, 0%, 0%, 0.67) 是有效的。
在第 4 代 CSS 顏色標準中，新增了一種新的函數(shù)寫法，即可以把 RGB 中值的分隔逗號改成空格，而把 RGB 和 alpha 中的逗號改成 /，比如帶 67% 不透明度的紅色可以這樣寫 rgba(255 0 0 / 0.67)。另外還把 rgba 的寫法合并到 rgb 函數(shù)中了，即 rgb 可以直接寫帶不透明度的顏色。
HSL[A] 顏色是由色相(hue)-飽和度(saturation)-亮度(lightness)-不透明度組成的顏色體系。
寫法上可以參考 RGB 的寫法，只是參數(shù)的值不一樣。
給一個按鈕設(shè)置不透明度為 67% 的紅色的 color 的寫法，以下全部寫法效果一致：
css復制代碼button {
color: #ff0000aa;
color: #f00a;
color: rgba(255, 0, 0, 0.67);
color: rgb(100% 0% 0% / 67%);
color: hsla(0, 100%, 50%, 67%);
color: hsl(0deg 100% 50% / 67%);
}
小提示：在 Chrome DevTools 中可以按住 shift + 鼠標左鍵可以切換顏色的表示方式。
媒體查詢是指針對不同的設(shè)備、特定的設(shè)備特征或者參數(shù)進行定制化的修改網(wǎng)站的樣式。
你可以通過給 <link> 加上 media 屬性來指定該樣式文件只能對什么設(shè)備生效，不指定的話默認是 all，即對所有設(shè)備都生效：
html復制代碼<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />
都支持哪些設(shè)備類型？
需要注意的是：通過 media 指定的 資源盡管不匹配它的設(shè)備類型，但是瀏覽器依然會加載它。
除了通過 <link> 讓指定設(shè)備生效外，還可以通過 @media 讓 CSS 規(guī)則在特定的條件下才能生效。響應式頁面就是使用了 @media 才讓一個頁面能夠同時適配 PC、Pad 和手機端。
css復制代碼@media (min-width: 1000px) {}
媒體查詢支持邏輯操作符：
媒體查詢還支持眾多的媒體特性，使得它可以寫出很復雜的查詢條件：
css復制代碼/* 用戶設(shè)備的最小高度為680px或為縱向模式的屏幕設(shè)備 */
@media (min-height: 680px), screen and (orientation: portrait) {}
之前我們通常是在預處理器里才可以使用變量，而現(xiàn)在 CSS 里也支持了變量的用法。通過自定義屬性就可以在想要使用的地方引用它。
自定義屬性也和普通屬性一樣具有級聯(lián)性，申明在 :root 下的時候，在全文檔范圍內(nèi)可用，而如果是在某個元素下申明自定義屬性，則只能在它及它的子元素下才可以使用。
自定義屬性必須通過 --x 的格式申明，比如：--theme-color: red; 使用自定義屬性的時候，需要用 var 函數(shù)。比如：
css復制代碼<!-- 定義自定義屬性 -->
:root {
--theme-color: red;
}
<!-- 使用變量 -->
h1 {
color: var(--theme-color);
}
上圖這個是使用 CSS 自定義屬性配合 JS 實現(xiàn)的動態(tài)調(diào)整元素的 box-shadow，具體可以看這個 codepen demo。
Retina 顯示屏比普通的屏幕有著更高的分辨率，所以在移動端的 1px 邊框就會看起來比較粗，為了美觀通常需要把這個線條細化處理。這里有篇文章列舉了 7 中方案可以參考一下：7種方法解決移動端Retina屏幕1px邊框問題
而這里附上最后一種通過偽類和 transform 實現(xiàn)的相對完美的解決方案：
只設(shè)置單條底部邊框：
css復制代碼.scale-1px-bottom {
position: relative;
border:none;
}
.scale-1px-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
同時設(shè)置 4 條邊框：
css復制代碼.scale-1px {
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
什么是浮動：浮動元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素。
為什么要清楚浮動，它造成了什么問題？
因為浮動元素會脫離正常的文檔流，并不會占據(jù)文檔流的位置，所以如果一個父元素下面都是浮動元素，那么這個父元素就無法被浮動元素所撐開，這樣一來父元素就丟失了高度，這就是所謂的浮動造成的父元素高度坍塌問題。
父元素高度一旦坍塌將對后面的元素布局造成影響，為了解決這個問題，所以需要清除浮動，讓父元素恢復高度，那該如何做呢？
這里介紹兩種方法：通過 BFC 來清除、通過 clear 來清除。
前面介紹 BFC 的時候提到過，計算 BFC 高度的時候浮動子元素的高度也將計算在內(nèi)，利用這條規(guī)則就可以清楚浮動。
假設(shè)一個父元素 parent 內(nèi)部只有 2 個子元素 child，且它們都是左浮動的，這個時候 parent 如果沒有設(shè)置高度的話，因為浮動造成了高度坍塌，所以 parent 的高度會是 0，此時只要給 parent 創(chuàng)造一個 BFC，那它的高度就能恢復了。
而產(chǎn)生 BFC 的方式很多，我們可以給父元素設(shè)置overflow: auto 來簡單的實現(xiàn) BFC 清除浮動，但是為了兼容 IE 最好用 overflow: hidden。
css復制代碼.parent {
overflow: hidden;
}
通過 overflow: hidden 來清除浮動并不完美，當元素有陰影或存在下拉菜單的時候會被截斷，所以該方法使用比較局限。
我先把結(jié)論貼出來：
css復制代碼.clearfix {
zoom: 1;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
這種寫法的核心原理就是通過 ::after 偽元素為在父元素的最后一個子元素后面生成一個內(nèi)容為空的塊級元素，然后通過 clear 將這個偽元素移動到所有它之前的浮動元素的后面，畫個圖來理解一下。
可以結(jié)合這個 codepen demo 一起理解上圖的 clear 清楚浮動原理。
上面這個 demo 或者圖里為了展示需要所以給偽元素的內(nèi)容設(shè)置為了 ::after，實際使用的時候需要設(shè)置為空字符串，讓它的高度為 0，從而父元素的高度都是由實際的子元素撐開。
該方式基本上是現(xiàn)在人人都在用的清除浮動的方案，非常通用。
參考：CSS中的浮動和清除浮動，梳理一下
針對同一個類型的 HTML 標簽，不同的瀏覽器往往有不同的表現(xiàn)，所以在網(wǎng)站制作的時候，開發(fā)者通常都是需要將這些瀏覽器的默認樣式清除，讓網(wǎng)頁在不同的瀏覽器上能夠保持一致。
針對清除瀏覽器默認樣式這件事，在很早之前 CSS 大師 Eric A. Meyer 就干過。它就是寫一堆通用的樣式用來重置瀏覽器默認樣式，這些樣式通常會放到一個命名為 reset.css 文件中。比如大師的 reset.css 是這么寫的：
css復制代碼html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
他的這份 reset.css 據(jù)說是被使用最廣泛的重設(shè)樣式的方案了。
除了 reset.css 外，后來又出現(xiàn)了 Normalize.css 。關(guān)于 Normalize.css, 其作者 necolas 專門寫了一篇文章介紹了它，并談到了它和 reset.css 的區(qū)別。這個是他寫那篇文章的翻譯版：讓我們談一談 Normalize.css。
文章介紹到：Normalize.css 只是一個很小的CSS文件，但它在默認的 HTML 元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的 CSS reset，Normalize.css 是一種現(xiàn)代的、為 HTML5 準備的優(yōu)質(zhì)替代方案，現(xiàn)在已經(jīng)有很多知名的框架和網(wǎng)站在使用它了。
Normalize.css 的具體樣式可以看這里 Normalize.css
區(qū)別于 reset.css，Normalize.css 有如下特點：
默認：字符太長溢出了容器
字符超出部分換行
字符超出位置使用連字符
單行文本超出省略
多行文本超出省略
查看以上這些方案的示例： codepen demo
有意思的是剛好前兩天看到 chokcoco 針對文本溢出也寫了一篇文章，主要突出的是對整塊的文本溢出處理。啥叫整塊文本？比如，下面這種技術(shù)標簽就是屬于整塊文本：
另外他還對 iOS/Safari 做了兼容處理，感興趣的可以去閱讀下：CSS 整塊文本溢出省略特性探究。
讓元素在父元素中呈現(xiàn)出水平垂直居中的形態(tài)，無非就 2 種情況：
以下列到的所有水平垂直居中方案這里寫了個 codepen demo，配合示例閱讀效果更佳。
水平居中
此類元素需要水平居中，則父級元素必須是塊級元素(block level)，且父級元素上需要這樣設(shè)置樣式：
css復制代碼.parent {
text-align: center;
}
垂直居中
方法一：通過設(shè)置上下內(nèi)間距一致達到垂直居中的效果：
css復制代碼.single-line {
padding-top: 10px;
padding-bottom: 10px;
}
方法二：通過設(shè)置 height 和 line-height 一致達到垂直居中：
css復制代碼.single-line {
height: 100px;
line-height: 100px;
}
方法一：absolute + 負 margin
方法二：absolute + margin auto
方法三：absolute + calc
這里列了 6 種方法，參考了顏海鏡 寫的文章 ，其中的兩種 line-height 和 writing-mode 方案看后讓我驚呼：還有這種操作？學到了學到了。
方法一：absolute + transform
方法二：line-height + vertical-align
方法三：writing-mode
方法四：table-cell
方法五：flex
方法六：grid
針對以下這些方案寫了幾個示例： codepen demo
方法一：float + overflow（BFC 原理）
方法二：float + margin
方法三：flex
方法四：grid
針對以下這些方案寫了幾個示例： codepen demo
方法一：圣杯布局
方法二：雙飛翼布局
方法三：float + overflow（BFC 原理）
方法四：flex
方法五：grid
結(jié)合示例閱讀更佳：codepen demo
方法一：padding + 負margin
方法二：設(shè)置父級背景圖片
列了 4 種方法，都是基于如下的 HTML 和 CSS 的，結(jié)合示例閱讀效果更佳：codepen demo
html復制代碼<div class="layout">
<header></header>
<main>
<div class="inner"></div>
</main>
<footer></footer>
</div>
css復制代碼html,
body,
.layout {
height: 100%;
}
body {
margin: 0;
}
header,
footer {
height: 50px;
}
main {
overflow-y: auto;
}
方法一：calc
方法二：absolute
方法三：flex
方法四：grid
這是我斷斷續(xù)續(xù)寫了 2 周完成的文章，算是自己對 CSS 的一個總結(jié)，雖然寫得很長，但不足以覆蓋所有 CSS 的知識，比如動畫和一些 CSS3 的新特性就完全沒涉及，因為這要寫下來估計得有大幾萬字（其實就是懶 ）。
碼字作圖不易，如果喜歡或者對你有絲毫幫助的話，幫忙點個 哈，點贊就是我的動力。同時也希望自己能堅持認真的寫下去，因為在總結(jié)提升自己的同時如果也能幫助更多的前端er，那將會讓我感覺很開心。
作者：大海我來了
鏈接：https://juejin.cn/post/6941206439624966152
前端安全攻防的意義主要體現(xiàn)在以下幾個方面：
綜上所述，前端安全攻防的意義非常重要，必須要引起開發(fā)者的足夠重視與關(guān)注，從前端層面保障用戶和業(yè)務的安全。
前端安全攻防的范疇主要包括 JavaScript、CSS、HTML 等前端代碼，以及網(wǎng)絡(luò)通信協(xié)議和構(gòu)建過程等多個層面。攻擊手段目前主要涵蓋 XSS、CSRF、Clickjacking 等方式。攻防流程主要包括：安全評估、漏洞挖掘、修復漏洞和安全培訓等環(huán)節(jié)。
具體而言，前端安全攻防的流程包括以下步驟：
綜上所述，前端安全攻防是一個協(xié)作的攻防流程，需要多個部門協(xié)作完成攻防任務，保障系統(tǒng)和用戶的安全。
XSS攻擊（Cross-Site Scripting攻擊）是一種利用Web應用程序中存在的漏洞，向客戶端注入惡意代碼，使之在用戶的瀏覽器上執(zhí)行的攻擊方式。
XSS攻擊主要是利用Web應用程序沒有對用戶輸入的數(shù)據(jù)進行充分的過濾和驗證，使攻擊者得以在頁面上注入惡意代碼，從而在用戶訪問Web應用程序時，植入惡意代碼實現(xiàn)攻擊。
XSS攻擊可以分為三個主要的類型：反射型 XSS、存儲型 XSS、DOM-based XSS。
具體的分類如下：
綜上所述，XSS攻擊是通過對Web應用程序的注入攻擊達到攻擊效果的一種方式，攻擊者主要通過利用Web應用程序未能充分過濾和驗證用戶的輸入，將惡意代碼注入目標頁面進行攻擊，對于開發(fā)者來說需要注重應用中用戶輸入數(shù)據(jù)的過濾和驗證，防范XSS攻擊。
預防和防御 XSS 攻擊的方法包括以下幾個方面：
綜上所述，對于開發(fā)人員來說，需要注意加強對XSS攻擊的防范，提高自身編碼水平，對用戶輸入的數(shù)據(jù)進行充分過濾和驗證，使用CSP配置， 安全編碼等措施加強代碼安全性。另外也需要注意與用戶的安全教育，提高用戶信息安全意識，避免被攻擊者利用和誤導。
CSRF攻擊（Cross-Site Request Forgery 攻擊）是一種利用用戶在已登錄的Web應用程序中的身份識別信息，通過從受害用戶處獲取的Cookie，偽造發(fā)起跨站請求的攻擊方式。
攻擊者通過構(gòu)造一個包含攻擊代碼的惡意鏈接，誘導用戶點擊，從而在用戶不知情的情況下將惡意代碼提交到目標網(wǎng)站，引發(fā)一系列滲透攻擊和數(shù)據(jù)竊取。
CSRF攻擊可以分為兩種類型：GET型和POST型。
具體而言
綜上所述，CSRF攻擊利用用戶的登錄狀態(tài)偽造請求，從而越過了目標網(wǎng)站對用戶權(quán)限的防護。
為了有效防御CSRF攻擊，業(yè)界提出了以下幾種預防和防御的策略：
綜上所述，防御和預防CSRF攻擊需要綜合考慮多個方面，包括后端措施和前端措施，如在代碼實現(xiàn)中增加Token驗證、Referer驗證、使用雙重 Cookies、登錄跨站點確認等措施，結(jié)合用戶的安全教育，加強安全意識，提高應對CSRF攻擊能力。
預防和防御 CSRF 攻擊主要包括以下幾點：
綜上所述，預防和防御CSRF攻擊需要在多個方面上下功夫。開發(fā)人員需要在代碼實現(xiàn)過程中增加Token驗證、Referer驗證、設(shè)置SameSite屬性、雙重驗證等措施，同時在用戶使用過程中，需要加強安全意識，比如不向陌生人泄露賬號信息等，從而避免攻擊者利用CSRF攻擊，保障用戶的安全和數(shù)據(jù)的保密性。
客戶端JavaScript安全主要包括以下幾個方面：
綜上所述，客戶端JavaScript安全是Web應用開發(fā)中必須要非常注重的一個方面，主要需要開發(fā)人員從多個方面思考和考慮，包括充分過濾和驗證用戶的輸入數(shù)據(jù)，使用 HTTPS 加密數(shù)據(jù)傳輸，使用 JavaScript 混淆工具等方式來保護前端代碼安全，同時也要針對用戶加強安全教育，提高其安全意識和預防風險的能力。
服務器端JavaScript安全主要包括以下幾個方面：
綜上所述，服務器端JavaScript安全是Web應用安全的重要環(huán)節(jié)之一，在服務端代碼的開發(fā)過程中必須要注重安全，充分考慮并控制代碼執(zhí)行的權(quán)限，防止注入攻擊和拒絕服務攻擊，使用合適的加密算法進行數(shù)據(jù)保護以及進行定期檢測測試，保證服務器端代碼的安全性和穩(wěn)定性。
JavaScript 代碼審計是一種從代碼層面來分析、檢查和評估應用程序的安全性的方法，對于 Web 應用的開發(fā)和維護非常必要，可以有效地發(fā)現(xiàn)潛在的安全風險和漏洞，避免因漏洞造成的數(shù)據(jù)泄露、拒絕服務等安全問題。
在 JavaScript 代碼審計的過程中，需要注意以下幾個方面：
綜上所述，JavaScript 代碼審計是一項非常重要的安全工作，主要圍繞輸入過濾、數(shù)據(jù)流和控制流、客戶端和服務器端的安全性、框架和庫的安全問題以及多種手段的結(jié)合等方面來進行。只有從多個維度和角度進行審計，才能發(fā)現(xiàn)更多的潛在漏洞和安全風險，從而提高應用程序的安全性和穩(wěn)定性。
CSS 注入攻擊是一種利用CSS樣式表的漏洞來進行攻擊的方式。攻擊者利用惡意 CSS 代碼，將樣式表中的一些屬性值改變，使網(wǎng)頁顯示出不正常的樣式。
CSS注入攻擊的危害主要包括以下幾點：
下面是一些防范 CSS 注入攻擊的方法：
綜上所述，開發(fā)者需要重視 CSS 注入攻擊的預防和防御，并采取相應的措施，以避免安全事件的發(fā)生和用戶數(shù)據(jù)的泄露，從而保障網(wǎng)站的安全性和穩(wěn)定性。
HTML 注入攻擊是一種利用HTML頁面的漏洞，往網(wǎng)站中插入惡意 HTML 代碼，從而導致用戶隱私數(shù)據(jù)被竊取的攻擊方式。
常見的 HTML 注入攻擊主要包括以下幾種：
防止 HTML 注入攻擊需要采取以下措施：
綜上所述，為了防止 HTML 注入攻擊，需要重視輸入數(shù)據(jù)校驗和過濾、限制 HTML 標記、對表單數(shù)據(jù)進行處理和防范 XSS 攻擊等方面，從多個角度對 HTML 注入攻擊進行預防和防御。
安全框架（Security Framework）是用來保證應用程序安全性的軟件框架，也稱之為安全開發(fā)框架（Secure Development Framework）。
主要包含以下幾個方面的功能：
安全框架的優(yōu)點有以下幾點：
總之，安全框架是一種提高應用程序安全性的有效手段，能夠保護用戶的隱私數(shù)據(jù)、避免安全漏洞和攻擊等，從而避免因安全問題引起的業(yè)務風險和數(shù)據(jù)泄露等事件。
常見的安全框架有：
以上是一些常見的安全框架，各有特點和應用場景，可以根據(jù)不同項目的需求和特點選擇合適的安全框架。同時，為了防止安全漏洞和攻擊，開發(fā)人員應該始終保持警惕，采取最佳實踐和標準來處理敏感數(shù)據(jù)和用戶隱私信息。
HTTPS是通過加密通道實現(xiàn)HTTP協(xié)議通信的協(xié)議，通過使用加密技術(shù)確保數(shù)據(jù)在客戶端和服務器之間傳輸時不被竊取、篡改或偽造。HTTPS的意義有以下幾點：
綜上所述，使用HTTPS安全傳輸協(xié)議可以保護用戶的隱私、防止網(wǎng)絡(luò)攻擊和黑客攻擊，同時增強了用戶對網(wǎng)站的信任感，提高了網(wǎng)站的安全性和品牌聲譽。目前，許多網(wǎng)站和應用程序因為安全問題加密了它們的通信協(xié)議，所以使用HTTPS協(xié)議已經(jīng)成為了 Web 安全的最佳實踐。
HTTPS（Hypertext Transfer Protocol Secure）是通過加密通道實現(xiàn)HTTP協(xié)議通信的協(xié)議，工作原理如下：
綜上所述，HTTPS的加密技術(shù)主要是基于公鑰和對稱密鑰機制實現(xiàn)。首先在握手階段通過公鑰加密方法協(xié)商生成會話密鑰，然后使用會話密鑰來對數(shù)據(jù)進行加密和解密，保證了網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)安全性。
HTTP劫持攻擊（HTTP Hijacking）是指黑客截獲了用戶的HTTP請求，并在用戶不知情的情況下修改了HTTP請求或返回的結(jié)果。攻擊者可以讀取和修改HTTP報文中的內(nèi)容，篡改HTTP請求的參數(shù)，獲取用戶敏感信息等。HTTP協(xié)議采用明文傳輸方式，容易被黑客進行竊聽和篡改，因此容易受到HTTP劫持攻擊。
HTTPS劫持攻擊（HTTPS Hijacking）是指黑客通過欺騙或者偽造證書等方式，將HTTPS報文的加密通信解密，篡改或修改用戶的HTTPS請求或響應信息的一種攻擊方式。HTTPS采用的是加密傳輸方式，提高了數(shù)據(jù)的安全性，但只要攻擊者掌握合法的證書，即可欺騙受害者，使其誤認為通信雙方是正確的，而進行對話，同時，黑客則可以在通信過程中篡改或竊取受害者的信息。
在HTTP劫持攻擊中，攻擊者可以直接讀取和修改HTTP報文中的內(nèi)容，而在HTTPS劫持攻擊中，攻擊者需要解密HTTPS加密通信才能對通信進行攻擊，難度更大，但一旦攻擊成功，造成的影響也會更加具有破壞性。
為避免HTTP劫持攻擊和HTTPS劫持攻擊，我們應該使用安全的通信協(xié)議，如HTTPS協(xié)議，以確保通信過程的安全和機密性。此外，了解安全威脅和冷靜應對攻擊也是非常重要的。
為了預防和防御HTTP劫持攻擊或HTTPS劫持攻擊，我們可以采取以下措施：
綜上所述，能夠預防和防御HTTP劫持攻擊和HTTPS劫持攻擊需要采取多重措施，包括使用加密通信協(xié)議、加強安全意識培訓、設(shè)置訪問控制、使用安全DNS服務等。但是有一點我們需要明白，完全的安全是不存在的，只能不斷提升安全性，減少被攻擊概率。
同源策略（Same-Origin Policy）是一種安全機制，主要用于控制Web瀏覽器如何訪問來自不同源（即不同協(xié)議、主機名或端口）的網(wǎng)站資源。同源策略的作用是限制某個文檔或者腳本，僅在與其來源相同的環(huán)境中執(zhí)行，從而防止惡意代碼通過跨站點腳本攻擊（XSS攻擊）等方式竊取用戶的敏感數(shù)據(jù)或者執(zhí)行惡意操作。
同源策略要求在同一個域名、端口和協(xié)議下的網(wǎng)頁腳本才能相互訪問，而不同源的網(wǎng)頁腳本之間是相互隔離的。同源策略可以防止惡意網(wǎng)站將各種資源注入到其它網(wǎng)站并獲取數(shù)據(jù)，從而保護用戶的安全和隱私。
比如，對于JavaScript腳本而言，如果一個頁面中加載了另一個來自不同源的網(wǎng)站的腳本，即使這個腳本是來自于一個已經(jīng)標記為危險的站點，也不能直接訪問頁面的DOM（文檔對象模型），從而避免了XSS攻擊。
同源策略雖然提高了Web應用程序的安全性，但也帶來了一些限制，為了實現(xiàn)跨域的交互，需要使用一些跨域技術(shù)，如JSONP、CORS等實現(xiàn)跨域消息傳遞。
總之，同源策略可以防止Web應用程序中的安全漏洞，避免惡意網(wǎng)站竊取用戶的敏感信息并限制對互聯(lián)網(wǎng)信息資源的訪問。
繞過同源策略的攻擊技術(shù)主要有以下幾種：
請注意這些都是用于學術(shù)和研究目的，嚴禁用于不道德和違法用途。
前端安全攻防可以從以下幾個方面進行總結(jié)：
1. XSS 攻擊
跨站腳本攻擊（XSS）是指攻擊者通過注入惡意腳本，在受害者的瀏覽器中運行，以獲取受害者敏感信息或?qū)崿F(xiàn)其他攻擊行為。前端防御 XSS 攻擊可采取如下措施：
2. CSRF 攻擊
跨站請求偽造（CSRF）是指攻擊者發(fā)起偽造請求，利用受害者的權(quán)限完成某些操作，例如轉(zhuǎn)賬、修改密碼等。前端防御 CSRF 攻擊可采取如下措施：
3. 點擊劫持攻擊
點擊劫持（Clickjacking）是利用透明 iframe 將可點擊的目標偽裝成看似無關(guān)的按鈕或鏈接，使受害者在不知情的情況下執(zhí)行了一些惡意操作。前端防御點擊劫持攻擊可采取如下措施：
最后，需要強調(diào)的是，前端安全防御不能僅僅局限于前端，還需要結(jié)合后端、數(shù)據(jù)庫等其他方面進行綜合防御，從而確保整個 web 應用系統(tǒng)的安全。
在實際項目中，為了預防和處理安全問題，可以采取以下措施：
總之，針對安全問題，項目需要采取多種措施綜合防范和處理，確保系統(tǒng)的安全性。同時，需要時刻關(guān)注最新的安全問題和漏洞，并采取相應的措施予以解決。
做項目的過程中，使用正則表達式來匹配一段文本中的特定種類字符，是比較常用的一種方式，下面是對常用的正則匹配做了一個歸納整理。
1、匹配中文:[\u4e00-\u9fa5]
2、英文字母:[a-zA-Z]
3、數(shù)字:[0-9]
4、匹配中文，英文字母和數(shù)字及下劃線：^[\u4e00-\u9fa5_a-zA-Z0-9]+$
同時判斷輸入長度：
[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}
5、
(?!_) 不能以_開頭
(?!.*?_$) 不能以_結(jié)尾
[a-zA-Z0-9_\u4e00-\u9fa5]+ 至少一個漢字、數(shù)字、字母、下劃線
$ 與字符串結(jié)束的地方匹配
6、只含有漢字、數(shù)字、字母、下劃線，下劃線位置不限：
^[a-zA-Z0-9_\u4e00-\u9fa5]+$
7、由數(shù)字、26個英文字母或者下劃線組成的字符串
^\w+$
8、2~4個漢字
"^[\u4E00-\u9FA5]{2,4}$";
9、最長不得超過7個漢字，或14個字節(jié)(數(shù)字，字母和下劃線)正則表達式
^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
10、匹配雙字節(jié)字符(包括漢字在內(nèi))：[^x00-xff]
評注：可以用來計算字符串的長度（一個雙字節(jié)字符長度計2，ASCII字符計1）
11、匹配空白行的正則表達式：ns*r
評注：可以用來刪除空白行
12、匹配HTML標記的正則表達式：<(S*?)[^>]*>.*?|<.*? />
評注：網(wǎng)上流傳的版本太糟糕，上面這個也僅僅能匹配部分，對于復雜的嵌套標記依舊無能為力
13、匹配首尾空白字符的正則表達式：^s*|s*$
評注：可以用來刪除行首行尾的空白字符(包括空格、制表符、換頁符等等)，非常有用的表達式
14、匹配Email地址的正則表達式：^[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$
評注：表單驗證時很實用
15、手機號：^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$
16、身份證：(^\d{15}$)|(^\d{17}([0-9]|X|x)$)
17、匹配網(wǎng)址URL的正則表達式：[a-zA-z]+://[^s]*
評注：網(wǎng)上流傳的版本功能很有限，上面這個基本可以滿足需求
18、匹配帳號是否合法(字母開頭，允許5-16字節(jié)，允許字母數(shù)字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
評注：表單驗證時很實用
19、匹配國內(nèi)電話號碼：d{3}-d{8}|d{4}-d{7}
評注：匹配形式如 0511-4405222 或 021-87888822
20、匹配騰訊QQ號：[1-9][0-9]{4,}
評注：騰訊QQ號從10000開始
21、匹配中國郵政編碼：[1-9]d{5}(?!d)
評注：中國郵政編碼為6位數(shù)字
22、匹配身份證：d{15}|d{18}
評注：中國的身份證為15位或18位
23、匹配ip地址：d+.d+.d+.d+
評注：提取ip地址時有用
24、匹配特定數(shù)字：
^[1-9]d*$ //匹配正整數(shù)
^-[1-9]d*$ //匹配負整數(shù)
^-?[1-9]d*$ //匹配整數(shù)
^[1-9]d*|0$ //匹配非負整數(shù)（正整數(shù) + 0）
^-[1-9]d*|0$ //匹配非正整數(shù)（負整數(shù) + 0）
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮點數(shù)
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配負浮點數(shù)
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮點數(shù)
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非負浮點數(shù)（正浮點數(shù) + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮點數(shù)（負浮點數(shù) + 0）
評注：處理大量數(shù)據(jù)時有用，具體應用時注意修正
25、匹配特定字符串：
^[A-Za-z]+$ //匹配由26個英文字母組成的字符串
^[A-Z]+$ //匹配由26個英文字母的大寫組成的字符串
^[a-z]+$ //匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$ //匹配由數(shù)字和26個英文字母組成的字符串
^w+$ //匹配由數(shù)字、26個英文字母或者下劃線組成的字符串
26、
在使用RegularExpressionValidator驗證控件時的驗證功能及其驗證表達式介紹如下:
只能輸入數(shù)字：“^[0-9]*$”
只能輸入n位的數(shù)字：“^d{n}$”
只能輸入至少n位數(shù)字：“^d{n,}$”
只能輸入m-n位的數(shù)字：“^d{m,n}$”
只能輸入零和非零開頭的數(shù)字：“^(0|[1-9][0-9]*)$”
只能輸入有兩位小數(shù)的正實數(shù)：“^[0-9]+(.[0-9]{2})?$”
只能輸入有1-3位小數(shù)的正實數(shù)：“^[0-9]+(.[0-9]{1,3})?$”
只能輸入非零的正整數(shù)：“^+?[1-9][0-9]*$”
只能輸入非零的負整數(shù)：“^-[1-9][0-9]*$”
只能輸入長度為3的字符：“^.{3}$”
只能輸入由26個英文字母組成的字符串：“^[A-Za-z]+$”
只能輸入由26個大寫英文字母組成的字符串：“^[A-Z]+$”
只能輸入由26個小寫英文字母組成的字符串：“^[a-z]+$”
只能輸入由數(shù)字和26個英文字母組成的字符串：“^[A-Za-z0-9]+$”
只能輸入由數(shù)字、26個英文字母或者下劃線組成的字符串：“^w+$”
驗證用戶密碼:“^[a-zA-Z]w{5,17}$”正確格式為：以字母開頭，長度在6-18之間，
只能包含字符、數(shù)字和下劃線。
驗證是否含有^%&',;=?$"等字符：“[^%&',;=?$x22]+”
只能輸入漢字：“^[u4e00-u9fa5],{0,}$”
驗證Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
驗證InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
驗證身份證號（15位或18位數(shù)字）：“^d{15}|d{}18$”
驗證一年的12個月：“^(0?[1-9]|1[0-2])$”正確格式為：“01”-“09”和“1”“12”
驗證一個月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正確格式為：“01”“09”和“1”“31”。
匹配中文字符的正則表達式： [u4e00-u9fa5]
匹配雙字節(jié)字符(包括漢字在內(nèi))：[^x00-xff]
匹配空行的正則表達式：n[s| ]*r
匹配HTML標記的正則表達式：/<(.*)>.*|<(.*) />/
匹配首尾空格的正則表達式：(^s*)|(s*$)
匹配Email地址的正則表達式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配網(wǎng)址URL的正則表達式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
