[書籍精讀]《CSS世界》精讀筆記分享

来源:https://www.cnblogs.com/yzsunlei/archive/2020/05/17/12907750.html
-Advertisement-
Play Games

寫在前面 書籍介紹：本書從前端開發人員的需求出發，以“流”為線索，從結構、內容到美化裝飾等方面，全面且深入地講解前端開發人員必須瞭解和掌握的大量的CSS知識點。同時，作者結合多年的從業經驗，通過大量的實戰案例，詳盡解析CSS的相關知識與常見問題。 我的簡評：《CSS世界》這本書顛覆了我對前端CSS的 ...


寫在前面

  • 書籍介紹：本書從前端開發人員的需求出發，以“流”為線索，從結構、內容到美化裝飾等方面，全面且深入地講解前端開發人員必須瞭解和掌握的大量的CSS知識點。同時，作者結合多年的從業經驗，通過大量的實戰案例，詳盡解析CSS的相關知識與常見問題。
  • 我的簡評：《CSS世界》這本書顛覆了我對前端CSS的很多認知，說是在的，這本書讀起來很燒腦，建議有一定CSS基礎後再閱讀。
  • ！！福利：文末有pdf書籍、筆記思維導圖、隨書代碼打包下載地址哦!閱讀[書籍精讀系列]所有文章，請移步：推薦收藏-JavaScript書籍精讀筆記系列導航

第一章 概述

1.1.CSS世界的“世界觀”

  • 將抽象的CSS直接和具體的現實世界相對應，更加易於理解
  • 以完整的體系來學習CSS要比單純關註屬性值理解得更加深刻，可以培養從巨集觀層面認識與理解CSS的習慣
  • 方便我們記憶，枯燥的代碼總是過目就忘，鮮活的角色總是印象深刻

1.2.世界都是創造出來的

  • CSS世界的誕生就是為圖文信息展示服務的

1.3.CSS完勝SVG的武器-流

  • 現在看來，SVG顯然要比Flash優秀很多，SVG開發、標準，和CSS和JavaScript都能很方便地進行交互
  • SVG的強項是圖形，其文字內容的呈現實在不敢恭維
  • 何為“流”：“流”實際上是CSS世界中德一種基本的定位和佈局機制；CSS世界構建的基石是HTML，而HTML最具代表的兩個基石和正好是CSS世界中塊級元素和內聯級元素的代表；所謂“流”，就是CSS世界中引導元素排列和定位的一條看不見的“水流”；
  • 流是如何影響整個CSS世界的：1.擒賊先擒王；2.特殊佈局與流的破壞；3.流向的改變
  • 什麼是流體佈局：所謂“流體佈局”，指的是利用元素“流”的特性實現的各類佈局效果；“流體佈局”並不等同於“自適應佈局”；“自適應佈局”是對凡是具有自適應特性的一類佈局的統稱；
  • table自己的世界：比CSS還要老；“流”的特性對
    並不適用；
  • 人們對互聯網的需求也在變化：1.佈局更為豐富。移動端的崛起、彈性盒子佈局、柵格佈局；2.視覺表現長足進度。圓角、陰影和漸變、transform變換、filter濾鏡和混合模式、animation動畫；

    • 第二章 需提前瞭解的術語和概念

    2.1.務必瞭解的CSS世界的專業術語

    • 屬性
    • 值：常見的整數值，數字值外，還有字元串值、位置值等類型。在CSS3中，還有角度值、頻率值、時間值等類型
    • 關鍵字
    • 變數：CSS3中的currentColor就是變數
    • 長度單位：%不是長度單位
    • 功能符：值以函數的形式指定（就是被括弧括起來的那種），主要用來表示顏色（rgba和hsla）、背景圖片地址(url)，元素屬性值、計算(calc)和過渡效果等。
    • 屬性值
    • 聲明
    • 聲明塊
    • 規則或規則集
    • 選擇器：選擇器是用來瞄準目標元素的東西
    • 關係選擇器：關係選擇器是指根據與其他元素的關係選擇元素的選擇器
    • @規則：關係選擇器是指根據與其他元素的關係選擇元素的選擇器

    2.2.瞭解CSS世界中的“未定義行為”

    • 在現實世界中，有法律來約束我們的行為，如果越界，就稱為違法
    • 在CSS世界里，有Web標準來約束元素的行為，如果越界，就稱為bug
    • 像這種規範顧及不到的細枝末節的實現，就稱為“未定義行為”

    第三章 流、元素與基本尺寸

    • 通常我們把HTML標簽分為兩類：塊級元素和內聯元素

    3.1.塊級元素

    • 需要註意的是，塊級元素和display為block的元素不是一個概念
    • <table>元素預設的display值是table，但是他們均是塊級元素
    • 塊級元素的基本特征，也就是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示
    • IE瀏覽器不支持偽元素的display值為list-item
    • 為什麼list-item元素會出現項目符號：很多看似“理所當然”的現象背後，實際上可能有一整套的體系支撐；塊級盒子就負責結構，內聯盒子就負責內容；之所以list-item元素會出現項目符號是因為生成了一個附加的盒子，學名“標記盒子”，專門用來放圓點、數字這些項目符號；
    • display：inline-table的盒子是怎樣組成的：外面是內聯盒子，裡面是table盒子。得到的就是一個可以和文字在一行中顯示的表格
    • width/height作用在哪個盒子上：是內在盒子，也就是“容器盒子”

    3.2.width/height作用的具體細節

    • 深藏不露的width：auto：width的預設值是auto。它至少包含了一下4種不同的寬度表現（1.充分利用可用空間、2.收縮與包裹、3.收縮到最小、4.超出容器限制）；所謂流動性，並不是看上去的寬度100；格式化寬度具有完全的流體性，也就是margin、border、padding和content內容區域同樣會自動分配水平（和垂直）空間；
    • width值作用的細節：內在盒子是由很多部分構成的，盒子的構成和地球的構成驚人的類似；內在盒子又被分成了4個盒子，分別content box、padding box、border box和margin box；margin的背景永遠是透明的，因此不可能作為background-clip或background-origin屬性值出現；或許是因為CSS2.1是面向內容（圖文信息）設計的，所以，width設計成了直接作用在content box上；
    • CSS流體佈局下的寬度分離原則：所謂“寬度分離原則”，就是CSS中的width屬性不與影響寬度的padding/border屬性共存；width、padding、border混用的時候，任何修改我們都需要實時去計算，在width應該設置多大才能和之前占用的寬度一樣，而後面width分離的實現，我們沒有任何計算；可能的挑戰，過深的嵌套是會增加頁面渲染和維護成本的
    • 改變width/height作用細節的box-sizing：box-sizing的作用，改變了width作用的盒子。預設情況下，width是作用在content box上的，box-sizing的作用就是可以把width作用的盒子變成其他幾個；為何box-sizing不支持margin-box，最大的原因是本身就沒有價值。box-sizing就是改變尺寸作用規則的。margin只有在width為auto的時候可以改變元素的尺寸；為何box-sizing不支持margin-box，最大的原因是本身就沒有價值。box-sizing就是改變尺寸作用規則的。margin只有在width為auto的時候可以改變元素的尺寸；經驗：在CSS世界中，唯一離不開box-sizing：border-box的就是原生普通文本框input和文本域textarea的100%自適應父容器寬度；box-sizing被髮明出來最大的初衷應該是解決替換元素寬度自適應問題
    • 相對簡單而單純的height：auto：CSS的預設流是水平方向，寬度是稀缺的。高度是無限的。
    • 關於height:100%：對於height屬性，如果父元素height為auto，只要子元素在文檔流中，其百分比值完全就被忽略了；對於普通文檔流中的元素，百分比高度值要想起作用，其父級必須有一個可以生效的高度值；絕對定位的寬高百分比計算是相對於padding box的，非絕對定位元素則是相對於content box計算的；

    3.3.css min-width/max-width和min-height/max-height

    • 為流體而生的min-width/max-width：在CSS世界中，min-width/max-width出現的場景一定是自適應佈局或者流體佈局中
    • 與眾不同的初始值：width/height的預設值是auto，而min-width/max-width和min-height/max-height的初始值則要複雜些；max-width和max-height的初始值是none，min-width和min-height的初始值是？雖然MDN和W3C維基的文檔上都顯示min-width/min-height的初始值是0，根據分析和測試，所有瀏覽器中德min-width/min-height的初始值都是auto；min-height/min-height的初始值是auto，max-width/max-height的初始值是none；
    • 超越!important，超越最大：1.超越!important：指的是max-width會覆蓋width，而且這種覆蓋不是普通的覆蓋，是超級覆蓋；2.超越最大：設置最小寬度比最大寬度要大，min-width活下來，max-width被忽略；
    • 任意高度元素的展開收起動畫技術

    3.4.內聯元素

    • 從作用上來講，塊級負責結構，內聯負責內容
    • 哪些元素是內聯元素：1.從定義看：內聯元素的內聯特指外在盒子，和display為inline的元素不是一個概念。inline-block和inline-table都是內聯元素；2.從表現看：內聯元素的典型特征就是可以和文字在一行顯示。實際上，浮動元素和後面的文字並不在一行顯示，浮動元素已經在文檔流之外
    • 內聯世界深入的基礎-內聯盒模型：1.內容區域：指一種圍繞文字看不見的盒子，其大小僅受字元本身特性控制，本質上一個字元盒子；2.內聯盒子：不會讓內容成塊顯示，而是排成一行。這裡的內聯盒子實際指的是元素的外在盒子，用來決定元素是內聯還是塊級；3.行框盒子：每一行就是一個行框盒子，每個行框盒子又是一個一個內聯盒子；4.包含盒子：此盒子由一行一行的行框盒子組成；
    • 幽靈空白節點：在HTML5文檔聲明中，內聯元素的所有解析和渲染表現就如同每個行框盒子的前面有一個“空白節點”一樣。這個“空白節點”永遠透明，不占據任何寬度，看不見也無法通過腳本獲取，就好像幽靈一樣，但又確實存在，表現如同文本節點一樣

    第四章 盒尺寸四大家族

    4.1.深入理解content

    • content與替換元素：通過修改某個屬性值呈現的內容就可以被替換的元素就稱為“替換元素”；還有以下一些特性（1.內容的外觀不受頁面上的CSS的影響；2.有自己的尺寸；3.在很多CSS屬性上有自己的一套表現規則）；替換元素的預設display值：所有的替換元素都是內聯水平元素，也就是替換元素和替換元素、替換元素和文字都是可以在一行顯示的；input按鈕和button按鈕的區別：當按鈕文字足夠多的時候，input按鈕不會自動換行，button按鈕則會；
    • content內容生成技術：content屬性幾乎都是用在::before/::after這兩個偽元素中；1.content輔助元素生成；2.content字元內容生成；3.content圖片生成；4.瞭解content開啟閉合符號生成；5.content attr屬性值內容生成；6.深入理解content計數器；7.content內容生成的混合特性

    4.2.溫和的padding屬性

    • padding與元素的尺寸：在使用padding進行頁面開發時候很少會出現意想不到的情況；CSS中還有很多其他場景或屬性會出現這種不影響其他元素佈局而是出現層疊效果的現象。如relative元素的定位、盒陰影box-shadow以及outline等；內聯元素padding有用，對我們實際CSS開發的幫助；
    • padding的百分比值：其一，和margin屬性不同，padding屬性是不支持負值的；其二，padding支持百分比值；padding百分比值無論是水平方向還是垂直方向均是相對於寬度計算的；輕鬆實現自適應的等比例矩形效果；內聯元素的垂直padding會讓“幽靈空白節點”顯現，也就是規範中的“struct”出現；
    • 標簽元素內置的padding：1.ol/ul列表內置padding-left，但單位是px不是em；2.很多表單元素都內置padding，如input、textarea、button、select、radio等；3.button按鈕元素的padding最難控制的
    • padding與圖形繪製：實現大隊長的“三道杠”分類圖標效果；實現雙層圓點效果；

    4.3.激進的margin屬性

    • margin與元素尺寸以及相關佈局：1.元素尺寸的相關概念；2.margin與元素的內部尺寸；3.margin與元素的外部尺寸；使用margin負值實現等高佈局的優勢在於相容性足夠，IE6瀏覽器支持，且支持任意個分欄等高佈局；table-cell的優點時天然等高，不足在於IE8及以上版本瀏覽器才支持；內聯元素垂直方向的margin是沒有任何影響的，既不會影響外部尺寸，也不會影響內部尺寸；
    • margin的百分比值：和padding屬性一樣，margin的百分比值無論時水平方向還是垂直方向都是相對寬度計算的；由於margin合併的存在，垂直方嚮往往需要雙倍尺寸才能和padding表現一致；
    • 正確看待CSS世界里的margin：1.什麼是margin合併；2.margin合併的3種場景；3.margin合併的計算規則；4.margin合併的意義；
    • 深入理解CSS中的margin: auto
    • margin無效情形解析：因為width設置而閑置，而margin：auto就是為了填充這個閑置的尺寸而設計的；想讓某個塊狀元素右對齊，腦子裡不要就一個float：right，很多時候margin-left：auto才是最佳的實踐；觸發margin：auto計算有一個前提條件，就是width或height為auto時，元素是具有對應方向的自動填充特性的；讓水平垂直居中的方法：絕對定位元素的margin：auto居中；
    • margin無效情形解析：1.display計算值inline的非替換元素的垂直margin無效；2.表格中的tr或td元素設置display計算值是table-cell或table-row的元素的margin都無效的；3.margin合併的時候，修改margin值可能是沒有效果的；4.絕對定位元素非定位方位的margin值無效；5.定高容器的子元素margin-bottom或者寬度定死的子元素的margin-right的定位“失效”；6.鞭長莫及導致的margin無效；7.內聯特性導致的margin無效；

    4.4.功勛卓越的border屬性

    • 為什麼border-width不支持百分比值：所謂邊框，是不會因為設備大就按比例變大的。所以沒有需要使用百分比值的場景；outline、box-shadow、text-shadow等，都是不支持百分比值得，原因與此類似；為什麼border屬性預設寬度大小是medium，也就是3px，因為border-style：double至少3px才有效果；
    • 瞭解各種border-style類型：IE下的虛點是個圓；dotted類型邊框天然就是一個圓，那我們要想在IE8下實現圓角效果就輕鬆多了；當邊框為3px時，才開始有雙線邊框的表現，包括retina屏幕也是如此，因為邊框寬度是沒有半像素的概念的；
    • border-color和color：border-color預設顏色就是color色值。具有類似特性的CSS屬性還有outline、box-shadow和text-shadow；上傳圖片時，往往後面會跟著一個帶有加號的框框，這種簡單的圖形最適合三三兩兩的CSS代碼繪製了；
    • border與透明邊框：1.右下方background定位的技巧：background是相對左上角定位的，使用transparent邊框表示，background-position的位置計算預設是不會把border-width計算在內的；2.優雅的增加點擊區域大小：可以使用padding或者透明border增加元素的點擊區域大小；3.三角等圖形繪製：使用CSS的border屬性繪製三角形等圖形仍是性價比最高的方式；
    • border與圖形構建：border屬性可以輕鬆實現相容性非常好的三角圖形效果，其底層原因受inset/outset等看上去沒有實用價值的border-style屬性影響；把兩個不同傾斜角度的三角效果疊加，則可以實現更加刁鑽的尖角效果；
    • border等高佈局技術：margin+padding可以實現等高佈局，同樣，border屬性也可以實現等高佈局；此方法與用margin+padding實現的等高佈局相比更加穩健，不會出現錨點定位帶來的問題，但同樣有局限性的；由於border不支持百分比寬度，因此適合至少一欄是定寬的佈局；等高佈局的欄目有限制；

    第五章 內聯元素與流

    5.1.字母x-CSS世界中隱匿的舉足輕重的角色

    • 字母x與CSS世界的基線：在各種內聯相關模型中，凡是涉及垂直方向的排版或者對齊的，都離不開最基本的基線；字母x的下邊緣（線）就是我們的基線；
    • 字母x與CSS中的x-height：CSS中有一個概念叫做x-height，指的是字母x的高度；vertical-align：middle並不是絕對的垂直居中對齊；
    • 字母x與CSS中的ex：我們對連IE6都老早支持的ex單位很陌生；ex是CSS中的一個相對單位，指的是小寫字母x的高度，沒錯，就是x-height；ex的價值就是在其副業上--不受字體和字型大小影響的內聯元素的垂直居中對齊效果；藉助ex單位，我們直接利用預設的baseline基線對其就可以實現圖標文字中間位置對齊；

    5.2.內聯元素的基石line-height

    • 內聯元素的高度之本-line-height：不少人會認為div高度是由裡面的文字撐開的，也就是font-size決定的，但本質上由line-height屬性全權決定的，儘管某些場景確實與font-size大小有關；通常，line-height的高度作用細節都是使用“行距”和“半行距”來解釋的；行距的作用是可以瞬間明確我們的閱讀方向，讓我們閱讀文字更輕鬆；在CSS中，“行距”分散在當前文字的上方和下方，也就是即使是第一行文字，其上方也有“行距”的，只不過這個“行距”的高度僅僅是完整“行距”高度的一半；一般業界的共識：行距=行高-em-box，轉換成CSS語言就是：行距=line-height-font-size；絕大多數的字體在內容區域中都是偏下的；雖然line-height不支持負值，但是行距可以是負值；line-height可以影響替換元素（如圖片的高度）嗎？不可以的；不是line-height把圖片占據高度變高了，而是把“幽靈空白節點”的高度變高了。在HTML5文檔模式下，每一個“行框盒子”的前面都有一個寬度為0的“幽靈空白節點”，其內聯特性表現和普通字元一模一樣；
    • 為什麼line-height可以讓內聯元素“垂直居中”：坊間說法：讓單行文字垂直居中，只要設置line-height大小和height高度一樣就可以了；兩個嚴重誤區（1.要讓單行文字垂直居中，只要line-height這一個屬性就可以，與height一點關係都沒有；2.行高控制文字垂直居中，不僅適用於單行，多行也是可以的）；多行文本或者替換元素的垂直居中實現原理和單行文本就不一樣了，需要line-height屬性的好朋友vertical-align屬性幫助才可以；line-height與多行文字垂直居中實現的原理；
    • 深入line-height的各類屬性值：line-height的預設值是normal，還支持數值、百分比值以及長度值；normal實際上是一個和fontfamily有著密切關聯的變數值；不同操作系統的預設字體也不一樣，換句話說，就是不同系統不同瀏覽器的預設line-height都是有差異的；line-height應該重置為多大的值呢？是使用數值、百分比值還是長度值呢？；註意，在CSS中，計算行高的時候，行高值一定不要向下舍入，而要向上舍入；
    • 內聯元素line-height的“大值特性”：無論內聯元素line-height如何設置，最終父級元素的高度都是由數值大的那個line-height決定的，稱之為內聯元素line-height的大值特性；只要有“內聯盒子”在，就一定會有“行框盒子”，就是每一行內聯元素外麵包裹的一層看不見的盒子；

    5.3.line-height的好朋友vertical-align

    • vertical-align家族基本認識：凡是line-height起作用的地方vertical-align也一定起作用；把vertical-align屬性之分為以下4類（線類、文本類、上標下標類、數值百分比類）；從這一點來看，vertical-align：baseline等同於vertical-align：0；vertical-align的屬性值支持數值，更不知道支持負值；margin和padding是相對於寬度計算的，line-height是相對於font-size計算的，而這裡vertical-align屬性的百分比值則是相對於line-height的計算值計算的；
    • vertical-align作用的前提：vertical-align起作用是有前提條件的，是只能應用於元素以及display值為table-cell的元素；換句話說，vertical-align屬性只能作用在display計算值為inline、inline-block、inline-table或table-cell的元素上；table-cell元素設置vertical-align垂直對齊的時子元素，但是其作用並不是子元素，而是table-cell元素自身；
    • vertical-align和line-height之間的關係：當字型大小大小不一樣的兩個文字在一起的時候，彼此就會發生上下位移，如果位移距離足夠大，就會超過行高的限制，而導致出現意料之外的高度；常見的圖片底部留有間隙的問題；間隙產生的三大元凶就是“幽靈空白節點”、line-height和vertical-align屬性；要清楚該間隙，方法很多如下（1.圖片塊狀化、2.容器line-height足夠小、3.容器font-size足夠小、4.圖片設置其他vertical-align屬性值）；text-align：justify聲明可以幫助我們實現相容的列表兩端對齊效果；
    • 深入理解vertical-align線性類屬性值：總結的一套基於20px圖標對齊的處理技巧（1.圖標高度和當前行高都是20px；2.圖標標簽裡面永遠有字元；3.圖標CSS不使用overflow：hidden保證基線為裡面字元的基線，但是讓裡面潛在的字元不可見）；line-height和vertical-align：middle實現的多行文本或者圖片的垂直居中全部都是“近似垂直居中”，原因與vertical-align：middle的定義有關；vertical-align：middle可以讓內聯元素的真正意義上的垂直中心位置和字元x的交叉點對齊；
    • 深入理解vertical-align文本類屬性值：所謂“父級內容區域”指的就是在父級元素當前font-size和font-family下應有的內容區域大小；文本類屬性值為什麼會有這樣糟糕的際遇呢（1.使用場景匱乏；2.文本類垂直對齊理解成本高；3.內容區域不直觀且易變）
    • 簡單瞭解vertical-align上標下標類屬性：vertical-align上標下標類屬性值指的是sub和super兩個值，分別表示下標和上標；在HTML代碼中，兩個標簽語義就是下標和上標，分別是上標和下標；vertical-align上標下標類屬性值並不會改變當前元素的文字大小，千萬不要被HTML標簽中的和誤導，因為這兩個HTML標簽預設font-size是smaller；
    • 無處不在的vertical-align：對於內聯元素，如果大家遇到不太好理解的現象，請一定要意識到，有個“幽靈空白節點”以及無處不在的vertical-align屬性；vertical-align屬性值的理解可以說是CSS世界中的最難點；vertical-align各類屬性值不存在相互衝突的情況，雖然某個vertical-align屬性值確實影響其他元素的表現，但是這種作用並不是直接的；
    • 基於vertical-align屬性的水平垂直居中：使用純CSS實現大小不固定的彈框永遠居中的效果；相比傳統的JavaScript定位的方法的優點（1.節省了很多無謂的定位的JavaScript代碼，也不需要瀏覽器resize事件之類的處理；2.性能更改、渲染速度更快，畢竟瀏覽器內置CSS的即時渲染顯然比JavaScript的處理要更好；3.可以非常靈活控制垂直居中的比例；4.容器設置overflow：auto可以實現彈框高度超過一屏時依然能看見屏幕外的內容，傳統實現方法則比較尷尬）

    第六章 流的破壞與保護

    • CSS中有一類屬性，專門通過破壞正常的“流”來實現一些特殊的樣式表現

    6.1.魔鬼屬性float

    • float的本質與特性：很可能會對float屬性有誤解，認為float屬性就是為各種塊狀佈局而設計的，實際上不是；很簡單，一句話：浮動的本質就是為了實現文字環繞效果；一碰就碎，主要在於其缺少彈性，換句話說，就是佈局的容錯性很糟糕；浮動是魔鬼，少砌磚頭、少浮動，要更多地去挖掘CSS世界本身的“浮動性”和“自適應性”，以構建能夠適用於各種環境的高質量的網頁佈局；CSS2的設計是面向圖文展示，CSS3的設計則是為了更絢麗的視覺效果和更豐富的網頁佈局；float有意思的特性：包裹性、塊狀化並格式化上下文、破壞文檔流、沒有任何margin合併；所謂包裹性，由包裹和自適應性兩部分組成；
    • float的作用機制：float屬性有個著名的特性表現，就是會讓父元素的高度塌陷；一定要明確這一點，浮動使高度塌陷不是bug，而是標準；
    • float更深入的作用機制：為什麼IE6和IE7浮動元素會下一行顯示。規範確實約定浮動元素和內聯元素在一行顯示；兩個和float相關的術語：一是浮動錨點（float元素所在流中的一個點），二是浮動參考（浮動元素對齊參考的實體）；
    • float與流體佈局：float通過破壞正常CSS流實現CSS環繞，帶來了煩人的“高度塌陷”的問題；可以利用float破壞CSS正常流的特性，實現兩欄或多欄的自適應佈局；

    6.2.float的天然剋星clear

    • 什麼是clear屬性：CSS有一個專門用來處理float屬性帶來的高度塌陷等問題的屬性，這個屬性就是clear；解釋為清除浮動是有問題的，浮動一直還在，並沒有清除。官方對clear屬性的解釋是：元素盒子的邊不能和前面的浮動元素相鄰；考慮到float屬性要麼就left要麼就right，不可能同時存在，同時由於clear屬性對“後面的”浮動元素不聞不問；
    • 成事不足敗事有餘的clear：clear屬性只有塊級元素才有效；::after等偽元素預設都是內聯水平，藉助偽元素清除浮動影響時需要設置display屬性值；

    6.3.css世界的結界-BFC

    • BFC的定義：BFC全稱block formatting context，中文為“塊級格式化上下文”；表現原則：如果一個元素具有BFC，內部子元素再怎麼翻江倒海、翻雲覆雨，都不會影響外部的元素；BFC元素是不可能發生margin重疊的。BFC元素也可以用來清除浮動的影響；什麼時候會觸發BFC，常見情況（根元素；float的值不為none；overflow的值為auto、scroll或hidden；display的值為table-cell、table-caption和inline-block中的任何一個；position的值不為relative和static；）
    • BFC與流體佈局：BFC的結界特性最重要的用途其實不是去margin重疊或者是清除float影響，而是實現更健壯、更智能的自適應佈局；和基於純流體特性實現的兩欄或多欄自適應佈局相比，基於BFC特性的自適應佈局有如下優點：自適應內容由於封閉而更健壯，容錯性更強；自適應內容自動填滿浮動以外區域，無需關心浮動元素寬度，可以整站大規模應用；單元格有一個非常神奇的特性，就是寬度設置的再大，實際寬度也不會超過表格容器的寬度；提煉出兩套IE7及以上版本瀏覽器適配的自適應解決方案：1、藉助overflow屬性；2.融合display:table-cell和display:inline-block；這兩種基於BFC的自適應方案均支持無限嵌套，因此，多欄自適應可以通過嵌套方式實現；

    6.4.最佳結界overflow

    • 要想徹底清除浮動的影響，最適合的屬性不是clear而是overflow
    • 一般使用overflow：hidden，利用BFC的“結界”特性徹底解決浮動對外部或兄弟元素的影響
    • overflow剪裁界線border box：一個很經典的不相容問題，即Chrome瀏覽器下，如果容器可滾動（假設是垂直滾動），則padding-bottom也算在滾動尺寸之內，IE和Firfox瀏覽器忽略padding-bottom；實際項目開發的時候，要儘量避免滾動容器設置padding-bottom值，除了樣式表現不一致外，還會導致scrollHeight值不一樣；
    • 瞭解overflow-x和overflow-y：overflow-x和overflow-y分別表示單獨控制水平或垂直方向上的剪裁規則；除非overflow-x和overflow-y的屬性值都是visible，否則visible會當成auto來解析；換句話說，永遠不可能實現一個方向溢出剪裁或滾動，另一個方向內容溢出顯示的效果；
    • overflow與滾動條：HTML中有兩個標簽式預設可以產生滾動條的，一個是根元素<html>，一個是文本域<textarea>；希望實現一個表格頭固定、表格體可以滾動的效果，常見的實現方法是使用雙<table>，表格頭是一個獨立的<table>,主體是一個獨立的<table>元素，放在一個overflow:auto的<div>元素中；對齊問題的兩種解決方法（1.<table>元素使用固定的寬度值，但是距離右側留有17px的間隙；2.表格的最後一列不設定寬度(文字最好左對齊)，前面每一列都定死寬度；）
    • 依賴overflow的樣式表現：有一種效果離不開overflow:hidden聲明，即單行文字溢出點點點效果
    • overflow與錨點定位：錨點定位行為的觸發條件（1.URL地址中的錨鏈與錨點處於focus狀態；2.可focus的錨點元素處於focus狀態）；一般實現返回頂部效果都是使用這樣的HTML：<a href="#">返回頂部</a>；“focus錨點定位指的是類似鏈接或者按鈕、輸入框等可以被focus的元素被focus時發生的頁面重定位現象”；錨點定位行為的發生，本質上是通過改變容器滾動高度或者寬度來實現的；

    6.5.float的兄弟position:absolute

    • 當absolute和float同時存在的時候，float屬性是無任何效果的
    • absolute的包含塊：普通元素的百分比寬度是相對於父元素的content box寬度計算的，而絕對定位元素的寬度是相對於第一個position不為static的祖先元素計算的；內聯元素的“包含塊”是由“生成的”前後內聯盒子決定的，與裡面的內聯盒子細節沒有任何關係；跨行的相容性問題在於規範對此行為並未定義，導致瀏覽器在實現上各有差異。主要差異在於，Firefox瀏覽器的“包含塊”僅覆蓋第一行，而IE和Chrome瀏覽器“包含塊”的表現完全符合定義，由第一行開頭和最後一行結尾的內聯盒子共同決定；
    • 具有相對特性的無依賴absolute絕對定位一個絕對定位元素，沒有任何left/top/right/bottom屬性設置，並且其祖先元素全部都是非定位元素，其位置還在當前位置，不是在瀏覽器左上方；“無依賴絕對定位”的強大之處（1.各類圖標定位；2.超越常規佈局的排版；3.下拉列表的定位；4.占位符效果模擬；比較好的做法是使用
    • absolute與text-align：出人意料，text-align居然可以改變absolute元素的位置；本質上是“幽靈空白節點”和“無依賴絕對定位”共同作用的結果；設置height:0同時overflow:hidden，那豈不是裡面所有元素都被剪裁看不見啦？普通元素確實會如此，但是對於absolute絕對定位以及fixed固定定位元素，規則要更複雜；

    6.6.absolute與overflow

    • overflow對absolute元素的剪裁規則，一句話表述就是：絕對定位元素不總是被父級overflow屬性剪裁，尤其當overflow在絕對定位元素及其包含塊之間的時候
    • 換一種方法表述就是：如果overflow不是定位元素，同時絕對定位元素和overflow容器之間沒有定位元素，則overflow無法對absolute元素進行剪裁
    • 當大家遇到absolute元被剪裁或者fixed固定定位失效時，可以看看是不是transform屬性在作祟

    6.7.absolute與clip

    • clip屬性要想起作用，元素必須是絕對定位或者固定定位，也就是position屬性值必須是absolute或者fixed
    • 重新認識的clip屬性：clip剪裁非常有用，在以下兩種場景下具有不可替代的地位（1.fixed固定定位的剪裁；2.最佳可訪問性隱藏）
    • 深入瞭解clip：這些特性大家的認識都是一致的：使用clip進行剪裁的元素其clientWidth和clientHeight包括樣式計算的寬高還是原來的大小；總結一下：clip隱藏僅僅是決定了哪部分是可見的，非可見部分無法響應點擊事件等；然後，雖然視覺上隱藏，但是元素的尺寸依然是原來的尺寸，在IE瀏覽器和Firefox瀏覽器抹掉了不可見區域尺寸對佈局的影響，Chrome瀏覽器卻保留了；

    6.8.absolute的流體特性

    • 當absolute遇到left/top/right/bottom屬性：當absolu變成絕對定位元素te遇到left/top/right/bottom屬性的時候，absolute元素才真正
    • absolute的流體特性：實際上，絕對定位元素也具有類似的流體特性，當然不是預設就有的，而是在特定屬性下才具有，條件是“對立方向同時發生定位的時候”；設置了對立定位屬性的絕對定位元素的表現神似普通的元素，無論設置padding還是margin，其占據的空間一致不變，變化的就是content box的尺寸，這就是典型的流體表現特性；
    • absolute的margin：auto居中：當絕對定位元素處於流體狀態的時候，各個盒模型相關屬性的解析和普通流體元素都是一模一樣的，margin負值可以讓元素的尺寸更大，並且可以使用margin：auto讓絕對定位元素保持居中；區別在於，絕對定位元素margin：auto居中從IE8瀏覽器開始支持，而普通元素的margin：auto居中很早就支持了；如果絕對定位元素的尺寸是已知了，沒有必要使用transform，百分比transform會讓ios微信閃退，其實首推的方法就是利用絕對定位元素的流體特性和margin：auto的自動分配特性實現居中；

    6.9.position:relative才是大哥

    • relative對absolute的限制
    • relative與定位：relative的定位有兩大特性：一是相對自身，二是無侵入；當relative進行定位偏移的時候，一般情況下不會影響周圍元素的佈局；relative的定位還有另外兩點值得一提：相對定位元素的left/top/right/bottom的百分比值是相對於包含塊計算的，而不是自身；
    • relative的最小化影響原則：總結的一套更好的佈局實踐的原則，主分為兩部分；1.儘量不使用relative，如果想定位某些元素，看看能否使用“無依賴的絕對定位”；2.如果場景受限，一定要使用relative，則該relative務必最小化；

    6.10.強悍的position:fixed固定定位

    • 固定定位之所以這麼強悍，根本原因是其“包含塊”和其他元素不一樣
    • position：fixed不一樣的包含塊：position：fixed固定定位元素的“包含塊”是根元素，我們可以將其近似看成元素。換句話說，唯一可以限制固定定位元素的就是根元素
    • position：fixed的absolute模擬：有時候我們希望元素既有不跟隨滾動的固定定位效果，又能被定位元素限制和精准定位，可以使用position：absolute進行模擬。原理很簡單：頁面的滾動使用普通元素替代，此時滾動元素之外的其他元素自然就有了“固定定位”的效果
    • position：fixed與背景鎖定：蒙層彈窗，其中黑色半透明全屏覆蓋的蒙層基本上都是使用position：fixed定位實現的。缺點：蒙層無法覆蓋瀏覽器右側的滾動欄，並且滑鼠滾動的時候後面的背景內容依然可以被滾動；如果希望背景被鎖定，可以借鑒“absolute模擬fixed定位”的思路，讓頁面滾動條由內部的普通元素產生即可；移動端項目，阻止touchmove事件的預設行為可以防止滾動；桌面端項目，可以讓根元素直接overflow：hidden；

    第七章 css世界的層疊規則

    • 所謂“層疊規則”，指的是當網頁中德元素髮生層疊時的表現規則

    7.1.z-index只是css層疊規則中的一葉小舟

    • z-index屬性只有和定位元素(position不為static的元素)在一起的時候才有作用，可以使是正數也可以是負數

    7.2.理解css世界的層疊上下文和層疊水平

    • 什麼是層疊上下文：英文稱作stacking context；HTML中的一個三維概念；可以把層疊上下文理解為一種“層疊結界”，自成一個小世界；
    • 什麼是層疊水平：層疊水平，決定了同一個層疊上下文中元素在z軸上的顯示順序；所有的元素都有層疊水平，包括層疊上下文元素，也包括普通元素；千萬不要把層疊水平和CSS的z-index屬性混為一談；

    7.3.理解元素的層疊順序

    • 表示元素髮生層疊時有著特定的垂直顯示順序
    • 層疊順序規則：層疊上下文background/border》負z-index》block塊狀水平盒子》float浮動盒子》inline水平盒子》z-index:auto或看成z-index:0》正z-index
    • 一些補充說明：位於最下麵的background/border特指層疊上下文元素的邊框和背景色；inline水平盒子指的是包括inline/inline-block/inline-table元素的“層疊順序”，它們都是同等級別的；單純從層疊水平上看，實際上z-index：0和z-index：auto是可以看成是一樣的；

    7.4.務必牢記的層疊準則

    • 兩條層疊領域的黃金準則：誰大誰上；後來居上；

    7.5.深入瞭解層疊上下文

    • 層疊上下文的特性：層疊上下文的層疊水平要比普通元素高；層疊上下文可以阻斷元素的混合模式；層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制於外部的“層疊上下文”；每個層疊上下文和兄弟元素獨立。當進行層疊變化或渲染的時候，只需要考慮後代元素；每個層疊上下文是自成體系的。當元素髮生層疊的時候，整個元素被認為是在父層疊上下文的層疊順序中；
    • 層疊上下文的創建：1.根層疊上下文指的是頁面根元素，可以看成是元素；2.對於position值為relative/absolute以及Firefox/IE瀏覽器（不包括Chrome瀏覽器）下含有position：fixed聲明的定位元素，當其z-index值不是auto的時候，會創建層疊上下文；差別就在於z-index：auto所在的元素是一個普通定位元素
    • 層疊上下文與層疊順序：元素一旦成為定位元素，其z-index就會自動生效，此時其z-index就是預設的auto，也就是0級別，根據上面的層疊順序表，就會覆蓋inline或block或float元素；opacity的值不是1的時候，是具有層疊上下文的，層疊順序是z-index：auto級別，跟沒有z-index值得absolute絕對定位元素是平起平坐的；

    7.6.z-index負值深入理解

    • z-index是支持負值的
    • z-index負值元素的層級是在層疊上下文元素上面、block元素的下麵，也就是z-index雖然名為負數層級，但依然無法突破當前層疊上下文包裹的小世界
    • CSS3 transform可以讓元素具有新的層疊上下文
    • z-index負值在實際項目中的作用：1.可訪問性隱藏；2.IE8下的多背景模擬；3.定位在元素的後面；

    7.7.z-index不犯二準則

    • 準則內容：對於非浮層元素，避免設置z-index值，z-index值沒有任何道理需要超過2
    • 為什麼需要這個準則：1.定位元素一旦設置了z-index值，就從普通定位元素變成了層疊上下文元素，相互間的層疊順序就發生了根本的變化，很容易出現設置了巨大的z-index值也無法覆蓋其他元素的問題；2.避免z-index一山比一山高的樣式混亂問題；
    • 對於JavaScript驅動的浮動組件，藉助層級計數器來管理：1.總會遇到意想不到的高層級元素；2.組件的覆蓋規則具有動態性；
    • 所謂層級計數器，實際上就是一段JavaScript腳本，會遍歷所有body處於顯示狀態的子元素，並得到最大z-index值，和預設的z-index做比較

    第八章 強大的文本處理能力

    • CSS就是憑藉自身強大的文本處理和文本展示能力成為樣式佈局的標桿語言的。同時代的SVG的優勢在於圖形展示，在文本處理這一塊實在是不敢恭維

    8.1.line-height的另外一個朋友font-size

    • font-size和vertical-align的隱秘故事：line-height的部分類別屬性值是相對於font-size計算的，vertical-align百分比值屬性又是相對於line-height計算的；無論font-size如何變化，後面圖標都垂直居中對齊的例子；原理如下：內聯元素預設基線對齊，圖片的基線可以看成是圖片的下邊緣，文字內容的基線是字元x下邊緣；居中原理本質上和絕對定位元素50%定位加偏移自身1/2尺寸實現居中是一樣的，只不過這裡的偏移使用的是vertical-align百分比值；
    • 理解font-size與ex、em和rem的關係：ex是字元x的高度，顯然和font-size關係密切，font-size值越大，自然ex對應的大小也就大；但是em和字元m確實有關。em在傳統排版中指一個字模的高度(可以腦補下活字印刷的字模)，註意是字模的高度，不是字元的高度。之所以叫做em完全取決於M的字形；CSS世界的渲染是一次渲染，是不會有死迴圈的；
    • 理解font-size的關鍵字屬性值：font-size的關鍵字屬性值分為以下兩類：相對尺寸關鍵字（相對於當前元素font-size計算）、絕對尺寸關鍵字（與當前元素font-size無關，僅受瀏覽器設置的字型大小影響）；如何權衡“易於實現維護”“視覺還原”“可訪問性”三者，兩個珍藏的建議；1.即使是定寬的傳統桌面端網頁，也需要做響應式處理，尤其是針對1200像素寬度設計的網頁，但只需要響應到800像素即可，可以保證至少有1.5倍的縮放空間，如果做到這一步，那麼是否需要響應瀏覽器的字型大小設置這一點就可以忽略；2.如果因各種原因無法做到響應式處理，也沒有必要全局都使用相對單位，畢竟成本等現實問題擺在那裡，其實需要在圖文為主的重要局部區域使用可縮放的font-size處理即可；
    • font-size: 0與文本的隱藏：實際上，並不是所有小於12px的font-size都會被當作12px處理。有一個值例外，那就是0，也就是說，如果font-size：0的字型大小表現就是0，那麼文字會直接被隱藏掉，並且只能是font-size：0，哪怕設置成font-size：0.00000001px，都會當作12px處理的

    8.2.字體屬性家族的大家長font-family

    • font-family預設值由操作系統和瀏覽器共同決定
    • 字體族分為很多類：serif襯線字體、sans-serif無襯線字體、monospace等寬字體、cursive手寫字體、fantasy奇幻字體、system-ui系統UI字體
    • 瞭解襯線字體和無襯線字體：所謂襯線字體，通俗講就是筆畫開始、結束的地方有額外裝飾而且筆畫的粗細會有所不同的字體
    • 等寬字體的實踐價值：所謂等寬字體，一般是針對英文字體而言的
    • 中文字體和英文名稱
    • 一些補充說明：微軟正黑體是一款全面支持ClearType技術的TrueType無襯線字體，用於繁體中文系統；“思源黑體”和“思源宋體”是Adobe與Google合作推出的開源字體。其設計目標是可以廣泛用於多種用途的電腦字體，比如用於手機、平板或者桌面的用戶界面、網頁瀏覽或者電子書閱讀等，均包含7個字重；

    8.3.字體家族其他成員

    • 貌似粗獷、實則精細無比的font-weight：可不可以自創一個font-weight：550的寫法？不可以；實際上，所有這些數值關鍵字瀏覽器都是支持的，之所以沒有看到任何粗細的變化，是因為我們的系統裡面缺乏對應粗細的字體；
    • 具有近似姐妹花屬性值得font-style：font-style表示文字造型是斜還是正；italic是使用當前字體的斜體字體，而oblique只是單純的讓文字傾斜；之所以會專門為一個字體設計傾斜字體，就是因為單純傾斜的時候不好看；
    • 不適合國情的font-variant：font-variant是一個從IE6時代就過來的CSS屬性；在母語是英文的國家這個屬性估計都用得不多；

    8.4.font屬性

    • 作為縮寫的font屬性：如果你的CSS代碼原本就沒有line-height屬性，使用font縮寫反而是不推薦的；還有一個令人頭疼的問題，就是font縮寫必須要帶上font-family；
    • 使用關鍵字值的font屬性：font屬性除了縮寫用法，還支持關鍵字屬性值；各個關鍵字的含義若如下：（caption活動視窗標題欄使用的字體；icon包含圖標內容所使用的字體；menu菜單使用的字體；message-box消息盒裡面使用的字體）
    • font關鍵字屬性值得應用價值：希望非Windows系統下不要使用微軟雅黑字體，而是使用其系統字體；一種方法是可以試試使用非標準的-apple-system等關鍵字字體；實際上還真有標準的系統字體關鍵字，叫做system-ui；讓網頁的字體跟系統走，還有一個更加長遠的好處。隨著軟體的不斷發展，我們的操作系統的預設中文字體一定是越來越好看，如果網頁的font-family定死為某個字體，用戶就無法及時享受到新系統新字體帶來的愉悅的視覺感受；

    8.5.真正瞭解@font-face規則

    • @font face的本質是變數：@font face本質上就是一個定義字體或字體集的變數，這個變數不僅僅是簡單的自定義字體，還包括重命名、預設字體樣式設置等；@font face規則支持的CSS屬性有font-family、src、font-style、font-weight、unicode-range、font-variant、font-stretch和font-feature-settings；如果是使用系統安裝字體，則使用local()功能符，如果是使用外鏈字體，則使用url()功能符；format()功能符的作用是讓瀏覽器提前知道字體的格式，以決定是否需要載入這個字體，而不是載入完了之後再自動判斷；unicode-range的作用是可以讓特定的字元或者特定字元範圍的字元使用指定的字體；
    • @font face與字體圖標技術：從面向未來的角度講，字體圖標技術的使用會越來越邊緣化，因為和SVG圖標技術相比，其唯一的優勢就是相容一些老的IE瀏覽器；SVG圖標同樣是矢量的，同樣顏色可控，但資源占用更少，載入體驗更好，呈現效果更佳，更加符合語義，我個人是非常推崇SVG圖標的；兩個需要關註的東西，一個是字體，另一個是字元，而這兩個東西就是字體圖標技術的本質所在；字體圖標技術就是使用類似的原理實現的，即把通常的字元映射成為另外的圖標形狀；

    寫在後面


    您的分享是我們最大的動力!

    -Advertisement-
    Play Games
    更多相關文章
    • Redis學習筆記（九） AOF持久化
      除了RDB持久化功能之外，Redis還提供了AOF持久化功能。與RDB持久化通過保存資料庫中的鍵值對來記錄資料庫狀態不同，AOF持久化是通過保存Redis伺服器所執行的寫命令來記錄資料庫狀態的。 伺服器在啟動時，可以通過載入和執行AOF文件中保存的命令來還原伺服器關閉前的資料庫狀態。 AOF持久化功 ...
    • centos7下安裝MySQL 5.7.26 二進位版本（免安裝綠色版）
      MySQL 5.7.26 二進位版本安裝（免安裝綠色版） 下載地址 https://downloads.mysql.com/archives/community/ https://cdn.mysql.com/archives/mysql-5.7/mysql-5.7.26-linux-glibc2.1 ...
    • Access denied for user '-Mike'@'localhost' (using password: YES)問題解決方案
      今天使用新創建的用戶登錄mysql時被提示 Access denied for user '-Mike'@'localhost' (using password: YES) 操作步驟： 成功！！！（雖然不知道為啥） 有無野生大佬給解答一下 ...
    • Redis學習筆記（八） RDB持久化
      Redis是記憶體資料庫，它將自己的資料庫狀態存儲在記憶體裡面，所以如果不想辦法將存儲在記憶體中的資料庫狀態保存到磁碟，那麼伺服器 進程一旦退出，伺服器中的資料庫狀態也會消失不見。 為瞭解決這個問題，Redis提供了RDB持久化功能，這個功能可以將資料庫狀態保存到磁碟裡面 1、RDB文件的創建與載入 Re ...
    • Navicat15 for Mysql激活教程
      1、下載Navicat Premium Navicat15鏈接：http://www.navicat.com.cn/download/navicat-premium，選擇相應版本，這裡選擇window 64位。 2、安裝客戶端沒啥好說的，直接省略。 3、下載激活軟體， 無需斷網運行激活軟體Navic ...
    • 關於tez-ui的"All DAGs"和"Hive Queries"頁面信息為空的問題解決過程
      近段時間發現公司的HDP大數據平臺的tez-ui頁面不能用了，頁面顯示為空，導致通過hive提交的sql不能方便地查找到Yarn上對應的applicationId，只能通過beeline的屏幕輸出信息、hiveserver2的日誌、yarn的日誌等一步步去查找，非常麻煩（查找方法見上一篇博客“如何找 ...
    • (Redis基礎教程之六)如何使用Redis中的List
      1. "如何在ubuntu18.04上安裝和保護redis" 2. "如何連接到Redis資料庫" 3. "如何管理Redis資料庫和Keys" 4. "如何在Redis中管理副本和客戶端" 5. "如何在Redis中管理字元串" 6. "如何在Redis中管理list" 7. "如何在Redis中 ...
    • Redis數據類型簡介（十分鐘快速學習Redis）
      1. "如何在ubuntu18.04上安裝和保護redis" 2. "如何連接到Redis資料庫" 3. "如何管理Redis資料庫和Keys" 4. "如何在Redis中管理副本和客戶端" 5. "如何在Redis中管理字元串" 6. "如何在Redis中管理list" 7. "如何在Redis中 ...
    一周排行
      -Advertisement-
      Play Games
    • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
      移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
    • wpf ToggleButton選中效果和一個登錄界面
      前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
    • 彈幕樹洞項目功能新增篇
      項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
    • 第27篇 sqlserver2022詳細安裝步驟
      話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
    • .NET 開源高性能 MQTT 類庫
      前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
    • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
      Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
    • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
      目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
    • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
      1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
    • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
      本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
    • 第28篇 如何.net中實現高效可靠數據同步api
      通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
    所有分類