主頁 > 企業開發 > [書籍精讀]《CSS世界》精讀筆記分享

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

2020-09-14 22:07:23 企業開發

寫在前面

  • 書籍介紹：本書從前端開發人員的需求出發，以“流”為線索，從結構、內容到美化裝飾等方面，全面且深入地講解前端開發人員必須了解和掌握的大量的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=https://www.cnblogs.com/yzsunlei/p/"#">回傳頂部；“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圖示的；兩個需要關注的東西，一個是字體，另一個是字符，而這兩個東西就是字體圖示技術的本質所在；字體圖示技術就是使用類似的原理實作的，即把通常的字符映射成為另外的圖示形狀；

    寫在后面

    • pdf書籍、筆記思維導圖、隨書代碼打包下載地址：https://pan.baidu.com/s/1B9N5zFObIq4NU4QpSM5dZQ(提取碼：lp46)
    • 紙質書京東購買地址：https://u.jd.com/u8b3mt（推薦使用紙質書來學習）

    轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39124.html

    標籤：Html/Css

    上一篇：2.CSS3選擇器

    下一篇：jQuery——超鏈接提示

    標籤雲
    其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

    熱門瀏覽
    • IEEE1588PTP在數字化變電站時鐘同步方面的應用

      IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

      uj5u.com 2020-09-10 03:51:52 more
    • HTTP request smuggling CL.TE

      CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

      uj5u.com 2020-09-10 03:52:11 more
    • 網路滲透資料大全單——漏洞庫篇

      網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

      uj5u.com 2020-09-10 03:52:15 more
    • 京準講述NTP時鐘服務器應用及原理

      京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

      uj5u.com 2020-09-10 03:52:25 more
    • 利用北斗衛星系統設計NTP網路時間服務器

      利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

      uj5u.com 2020-09-10 03:52:35 more
    • 詳細解讀電力系統各種對時方式

      詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

      uj5u.com 2020-09-10 03:52:45 more
    • 如何保證外包團隊接入企業內網安全

      不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

      uj5u.com 2020-09-10 03:52:57 more
    • PHP漏洞之【整型數字型SQL注入】

      0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

      uj5u.com 2020-09-10 03:55:40 more
    • [GXYCTF2019]禁止套娃

      git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

      uj5u.com 2020-09-10 03:56:07 more
    • 等保2.0實施流程

      流程 結論 ......

      uj5u.com 2020-09-10 03:56:16 more
    最新发布
    • 使用Django Rest framework搭建Blog

      在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

      uj5u.com 2023-04-20 08:17:54 more
    • 記錄-new Date() 我忍你很久了！

      這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

      uj5u.com 2023-04-20 08:17:47 more
    • 使用Vue.js實作文字跑馬燈效果

      實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

      uj5u.com 2023-04-20 08:12:31 more
    • JavaScript 運算子

      JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

      uj5u.com 2023-04-20 08:02:25 more
    • CSS—相對單位rem

      一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

      uj5u.com 2023-04-20 08:02:21 more
    • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

      好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

      uj5u.com 2023-04-20 08:01:50 more
    • 如何在 vue3 中使用 jsx/tsx?

      我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

      uj5u.com 2023-04-20 08:01:37 more
    • 【Vue2.x原始碼系列06】計算屬性computed原理

      本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

      uj5u.com 2023-04-20 08:01:31 more
    • http1.1與http2.0

      一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

      uj5u.com 2023-04-20 08:01:10 more
    • http1.1與http2.0

      一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

      uj5u.com 2023-04-20 08:00:32 more

    Copyright © 2010-2020 有解無憂