前端-干貨分享：更牛逼的CSS管理方法-層(CSS Layers)

用 CSS 最困難的部分之一是處理CSS的權重值，它可以決定到底哪條規則會最終被應用，尤其是如果你想在 Bootstrap 這樣的框架中覆蓋其已有樣式，更加顯得麻煩。不過隨著 CSS 層的引入，這一切都發生了變化。這個新功能允許您創建自己的自定義 CSS 層，這是有史以來第一次確定所有 CSS 代碼權重的層次結構。在本文中，我將剖析這對您意味著什么，它是如何工作的，以及您今天如何開始使用它。

什么是層(Layers)

創建您自己的自定義圖層是 CSS 的新功能，但圖層從一開始就存在于 CSS 中。 CSS 中有 3 個不同的層來管理所有樣式的工作方式。

瀏覽器（也稱為用戶代理）樣式 - user agent style
用戶樣式 - User Styles
作者樣式 - Author Styles

瀏覽器樣式是應用于瀏覽器的默認樣式。這就是為什么 Chrome 和 Safari 中的按鈕看起來不同的原因。在瀏覽器層中找到的樣式在瀏覽器之間是不同的，并且給每個瀏覽器一個獨特的外觀。

下一層是用戶樣式，這并不是您真正需要擔心的事情。這些通常是用戶可以編寫并注入瀏覽器的自定義樣式，但瀏覽器不再真正支持這些樣式。用戶可能會更改一些瀏覽器設置，這些設置會向該圖層添加樣式，但在大多數情況下，可以完全忽略該層。

最后，我們來到作者層。這是您最熟悉的層，因為您編寫的每一段 CSS 代碼都屬于這一層。

這些層分開的原因是因為它可以很容易地覆蓋瀏覽器樣式和用戶樣式中定義的代碼，因為層定義了自己的層次結構，完全忽略了權重的影響。

這 3 個 CSS 層是有序的（瀏覽器樣式、用戶樣式、然后是作者樣式），后面層中的每個樣式都將覆蓋前一層的任何樣式。這意味著即使瀏覽器樣式定義了一個超級特定的選擇器，例如#button.btn.super-specific，并且您的作者樣式定義了一個超級通用的選擇器，例如按鈕，您的作者樣式仍然會覆蓋瀏覽器樣式。

這實際上已經是您可能一直在使用而沒有意識到的東西。

* {
  box-sizing: border-box;
}

上面的選擇器沒有權重，因為 * 符號對權重沒有貢獻。這意味著例如使用 p 作為選擇器的 p 標簽的瀏覽器樣式在技術上比 * 選擇器更具體，權重更高。但是，這一切并不重要，因為作者樣式位于比瀏覽器樣式層晚的層中，因此您的代碼將始終覆蓋瀏覽器樣式。

理解這一點至關重要，因為使用這個新的圖層 API，您可以在作者圖層中創建自己的圖層，從而更輕松地處理特定性。

如何創建你自己的層

下面來看個例子：

很明顯，這是我們正常理解的CSS， ID設置的顏色權重更高，所以按鈕顯示為紅色。讓我們使用@layer給它們加上兩個層，看看是什么效果：

按鈕變成藍色。為什么會這樣？

我們給兩條CSS分別建立了base和utilities層，很明顯，后面創建的層的樣式覆蓋了前面層的樣式，盡管前面層的樣式有更高的權重。這就是層的默認工作原理。當然層的順序是可以指定的，

@layer utilities, base;

@layer utilities, base;

您需要做的就是編寫@layer 關鍵字，后跟以逗號分隔的層列表。這將按從左到右的順序定義所有層，其中列出的第一層到最后一層的權重是依次增加的。然后，您可以稍后使用普通的@layer 語法向每個層添加代碼，而不必擔心定義層的順序，因為它們都在這一行中定義。需要注意的是，這行代碼必須在定義任何層之前出現，所以我通常將它作為我的 CSS 文件中的第一行。如上圖，通過指定層的順序，我們讓base層應用在utilities層之后，所以按鈕又顯示為紅色。

導入層

上面這兩種方式都是導入bootstrap框架的CSS，并且把他們放在framework層中，這樣你如果想要覆蓋它已有的樣式，只需要新建一個自己的層，放置在framework層后面就行。像下面這樣。

匿名層

匿名層不常用，但它寫在后面可以覆蓋其他層的樣式，像下面可以把按鈕設為橙色。

不在層里的樣式

不在層里的樣式會有更高的權重，下面這個列表會讓你看得更清楚覆蓋是怎么發生的

層還可以重疊設置，不過很少用。具體的用法可以查閱相關文檔。

瀏覽器支持

自從IE死了以后，所有主流瀏覽器都已支持這一特性。大家請放心使用。

今天我們一起來了解下HTML，

首先HTmL包含三層結構，分別是結構層，表現層，行為層。

結構層：html => 網頁上有什么，比如說文字啊、按鈕啊、圖片啊等等。

表現層：css => 顯示成什么樣子，比如說文字的大小啊，位置啊，顏色啊等等。

行為層：JavaScript => 具體怎么操作，比如說點擊按鈕讓圖片放大縮小等等。

===============================

在了解了html的三層結構之后，我們來學習如何寫html。html不是編程語言，它是一套標簽。最簡單的html文本是下圖1這個樣子。我們可以在電腦桌面上新建一個記事本文件，然后把后綴名改一下（.txt=>.html），把這段標簽代碼粘貼到html文件里，這樣一個空白的網頁就做成了。如果需要在網頁上添加內容，我們只需要在第10行的位置添加各種各樣的標簽即可。比如我在圖二添加了一個按鈕標簽和一段文字標簽，雙擊html文件，頁面上就從左到右，從上到下顯示對應的內容。是不是很簡單。我們日常瀏覽的網頁都是這樣一個標簽一個標簽畫上去的。

我給大家總結了一張圖，基本上覆蓋了工作中常用的知識點。同時分享幾個小技巧。

1.最簡單的網頁寫成什么樣子，也就是html模板不需要記憶，下圖也說了，去百度下載一個VSCode軟件（類似于記事本，是現在主流的前端代碼編輯器），用它打開我們的html文件，輸入英文嘆號回車就自動生成了，學編程不要死記硬背。

2.控件的標簽不需要記憶，直接百度html XXX標簽，例如：百度搜“html按鈕標簽”，他就會告訴我們是<button>，用的時間長了自然就記住了。是不是省力。

3.標簽的屬性很重要，可以不去記他的寫法，因為寫可以百度，重要的是你需要記住標簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因為工作中，有的時候會遇到這樣一種情況，明明設置一個屬性可以完成的功能，我們不知道，花費了大力氣用css和js去實現，結果還存在著特定場合的bug，讓人很無奈。

4.對于html還有兩個標簽<canvas>和<svg>，他們是用來繪圖的，做特殊效果的。我們可以先跳過，等框架啥的都學完了，有興趣，學習一下。

5.給大家推薦一個小白學習html的網站，w3cschool，圖里不明白的可以去上邊學學練練。

6.如果覺得一個人學習前端有難度，我建了一個小白前端學習交流群，可以私聊我，大家在群里多多交流，我會經常給大家答疑，組織大家練習，一起做小項目。有方向，少走彎路。

NS

域名系統：是把主機域名解析為IP地址的系統，
域名命名

域名由字母、數字、下劃線組成
下劃線不能開頭結束

例題

由解析器和域名服務組成

DNS名字空間：

屬于分層命名系統，
方法為層次樹狀結構主機三級域名 2 1

域名服務器

運行模式為C/S模式，即客戶機/服務器模式

（1）按域名空間層次：根，頂級，權限，本地

（2）按作用：主，輔，緩存，轉發域名服務器

資源記錄：

資源記錄

AOS：定義了主域名server，文件傳輸server和管理員的地址等....

域名解析：

域名解析

正向解析：域名到IP地址
方向解析：PTR，IP地址到域名

域名解析有兩種方式

遞歸與迭代

遞歸查詢：只發出一次，本地到上級，直到查詢成功
迭代查詢：可以發多條，上級返回其他域服務器地址，本地域把這個地址給用戶，用戶在進行查詢
域名解析DNS通知：一種安全機制，只有被通知的輔助服務器才能進行區域復制，防止非法授權是一種推進機制，輔助服務器能及時更新區域的信息

DNSA服務器

主域名服務器：
輔域名服務器：作為主（出現故障）的備份，獲得主的授權，定期向主詢問是否有新數據，及時更新，與主同步
緩存域名服務器：可以運行域服務器軟件，但是沒有域名數據庫，從遠程服務器每次域名服務器查詢的回答，緩存，以便下一次直接回答
轉發域名服務器：負責所有非本地域名的本地查詢，先查找緩存，然后轉發到指定域名服務器

DHCP

基本知識： DHCP服務器使用UDP的67號端口，保留68號端口用來接收內部消息
工作過程：
DHCP管理：劃分不同類別進行管理分配
DHCP報文，discover 客戶端廣播來尋找dhcp服務器， offer進行回應，帶了各種配置信息
客戶端初始化后，request ，廣播請求，用來確認配置信息，DHCP ack，這才真的獲得了相關配置
服務器，nak，拒絕客戶端請求
客戶端，decline，ip分配發生沖突，重申請，release，主動釋放io地址，inform為了獲得其他配置信息
DHCP報文（可以查看我之前發布的文章，很詳細）

www和http

www（萬維網）：可以互聯的規模巨大的資料空間，使用URL來進行定位；使用http協議來送給使用者；使用HTML協議進行文檔的展現。采用客戶機/服務器的工作模式

（1）URL：統一資源標識符，由四個部分組成，協議：//主機端口/路徑

（2）http：超文本傳輸協議，負責規定服務器和瀏覽器如何交流

（3）HTML：超文本標記語言，描述網絡文檔的一種標記語言，

http報文

（1）請求報文：客向服務

常見請求報文

（2）響應報文：服務向客

http工作過程：工作在C/S模式下，基于TCP協議，客戶端請求和連接端口需要大于1024
http1.1：web服務器往往壓力很大，1.0只是可以建立一個連接，響應過后就會釋放連接；

1.1支持持久連接，即一個TCP連接可以傳送多個http請求，但要按照先后順序依次響應

2.0：

引入二進制框架，這是HTTP 1.1所不兼容的。既然是用在瀏覽器和服務器上，那么對于用戶來講“不可見”也是可以理解的。
另一個改進是支持多個并發的HTTP請求取代此前僅支持單一請求模式。

（1）兼容1.X,同時提升web的性能，減少了網絡延遲，減少了前端的優化工作，

（2）采用了新的二進制格式，解決了多路復用（即連接共享）問題

（3）可對header進行壓縮，使用較為安全的 HPACK壓縮算法，重置連接表現較好，有一定流量控制功能，可以使用更安全的SSL

E-mail

常見電子郵件協議：俗稱電子信箱，用戶名@域名

（1）簡單郵件傳輸協議：SMTP ，

主要負責底部的郵件系統，

工作在TCP25號端口

（2）郵局協議：pop ，

目前為pop3 ，

是把郵件從郵件服務器中傳輸到本地計算機的協議，

工作在TCP110端口

（3）Internet郵件訪問協議：IMAP ，

目前為IMAP4 ，

是pop3的代替協議 ，

提供了郵件檢索和郵件處理的新功能；

支持在脫機情況下，記憶用戶在脫機情況下的操作，再次網絡連接會自動執行，

工作在TCP143端口

郵件安全：

在傳輸的是使用SMTP協議，
它沒有加密服務

PGP：

郵件加密軟件，為郵件加上數字簽名；
PGP采用了RSA和傳統加密的雜合算法，數字簽名的郵件文摘算法和加密前壓縮等手段，功能強大，加解密快而且開源（共享）

工作過程：

郵件客戶端：常見有Foxmail ，Outlook ；在閱讀時，用網頁等可能會有惡意代碼，所以讀取郵件建議使用純文本方式閱讀電子郵件

FTP

定義：

文本傳輸協議，
用于在Internet上控制文件的雙向傳輸，
FTP客戶上傳文件，
20端口建立在TCP上的數據連接，
21端口是建立在TCP之上的控制連接

工作方式

主動式：

被動式：

TFTP：

簡單文本傳輸協議，
該協議基于UDP協議 ，
一般用于交換機路由器等

SNMP

OSI定義的網絡管理：

（1）性能管理：性能檢測分析管理控制

（2）配置管理：定義識別初始化監管網絡中被管的對象，配置信息收集，和利用軟件設置參數并配置硬件設備

（3）故障管理：網絡中被管對象的檢測定位和排除

（4）安全管理：管理員身份認證，管理信息加密

（5）計費管理：記錄用戶使用網絡資源情況并核實計費

CMIS/CMIP：公共管理信息/協議，是OSI提供的網絡管理信息協議簇，CMIS提供了網絡組成部件的網絡管理資源

CMIP則是實現CMIS的協議

網絡管理系統組成：

有四要素

（1）管理站：是位于網絡系統主干或者邊緣

（2）代理：又稱為管理代理，位于被管理設備內部

（3）管理信息庫：相當于虛擬信息庫

（4）網絡管理協議：常見有SNMP ,CMIS/CMIP

代理不會向管理站發送通信請求
基本網絡管理工具

netstat：監控TCP/ip網絡的工具，可以顯示路由表、實際的網絡連接，每個設備接口的狀態信息
tracert：可以發現數據報到達目標主機經過的路由器和到達時間
winipcfg：顯示主機內部IP協議的配置，采用Windows窗口顯示
sniffer：基于被動監聽的網絡分析方式，

SNMP：簡單網絡管理協議，應用層網絡設備間通信管理協議；
SNMP基于UDP協議，是一組標準，由SNMP協議，管理信息庫，管理信息結構（SMI），
管理進程和代理之間并沒有約束數量，僅僅是依靠團體名來驗證
RMON，提供了整個子網的管理信息；SNMP管理信息庫只是包含了本地設備的管理信息
管理站與管理站通信是SNMPV2特有的

（1）NMP PDU :規定了5個重要的數據協議單元pdu ，也稱為SNMP報文，

常見snmp報文：

（2）SNMPv2接收報文和發送報文：

GET next request：提取一個或者多個數據項的下一個數據項
GET request：從代理進程處提取一個或者多個數據項
SET request：設置代理進程的一個或者多個數據項
GET response：代理進程的回答
trap：通知進程的發生，端口號為162
SNMP協議實體發送請求和應答報文的默認端口號為161

步驟：

（3）SNMPv3安全分類：

1）：主要安全威脅，修改信息和假冒

2）：次要，修改報文流，和消息泄漏

（4）SNMP輪詢監控：一定時間間隔向代理獲取管理信息，有異常時發送trap報文

優點：對代理資源要求不高

缺點：管理開銷大

基本功能：網絡性能監控，網絡差錯檢測，網絡配置

公式：支持的設備數=輪詢周期數N/單個設備輪詢時間T

管理信息庫：簡寫MIB ,指定主機和路由器等被管理設備需要保存的數據項和可以對這些數據項進行操作

所以只有在 MIB 里的對象才可以被SNMP管理目前使用的是 MIB-2

常見MIB-2信息：

SNMP MIB中被管對象的訪問方式：有只讀，讀寫，只寫，和不可訪問四種，不包括可執行

管理信息結構：

（1）即MSI ,定義了命名管理對象和定義對象類型 的通用規則，

（2）還定義了對象和對象進行編碼的規則

（3）SMI功能：1命名被管理對象；2儲存被管理對象的數據類型，編碼管理數據；3 SMI規定，所有被管對象必須在對象命名樹上

對象命名樹：

其他應用協議

Telnet：TCP/IP 終端仿真協議，

基于TCP的虛擬終端通信協議，
端口號23 ，采用C/S工作方式，
采用網絡虛擬終端（NVT）實現
客戶端和服務器之間數據傳輸，
可以實現遠程登錄，遠程管理路由器和交換機

代理服務器：處于客戶端和需要訪問網絡之間，客戶向網絡發送和接收信息均要通過代理服務器

優點：1共享IP地址；2緩存功能提高訪問速度；3信息轉發；4過濾和禁止某些通信；5提高安全，避免病毒入侵，提高網絡訪問速度

突破對某些網站的訪問

SSH：

傳統網絡服務程序，本質并不安全，
例如FTP POP Telnet

SSH目前比較可靠，即安全外科協議，專為遠程登錄會話和其他網絡安全性的協議 ，由IETE的網絡安全小組制定

優點：1防遠程登錄的信息泄露，也可以對信息進行加密；2防止DNS欺騙（ 如果可以冒充域名服務器，然后把查詢的IP地址設為攻擊者的IP地址，這樣的話，用戶上網就只能看到攻擊者的主頁，并不是黑掉了網頁，只是招搖撞騙罷了）和IP欺騙（偽裝源IP地址） ；3傳輸數據是經過壓縮的，所以可以加快傳輸速度，