溫故而知我不懂的CSS

時間 2019-11-06

標籤溫故不懂 css 欄目 CSS 简体版

原文原文鏈接

❗️咱們是否想過沒有CSS對HTML標籤元素的影響，那麼咱們的標籤在瀏覽器是什麼樣形式存在的？CSS對HTML標籤元素到底產生了什麼影響？又作了什麼規則限定？來聊聊吧！！！css

CSS 做爲一門標記性語言，可是它的簡單易學，不少開發者都不知道它是一門語言，語言的東西一定具有諸多概念，可是咱們會每每忽略這些概念，確實，就算你不知道這些概念，你僅僅知道這些樣式是幹什麼的，都能寫出一張複雜的頁面，因此咱們不止要作到會用，並且要理解實質性的原理而不是隻知道這些樣式是僅僅作什麼的，因此痛定思痛，好好溫故而知新吧html

流（Normal flow）

Normal flow直譯爲正常流，可是爲何稱爲文檔流，卻是很好奇，會給人別人容易產生誤會，因此一下的介紹中，咱們都是以流的形式稱呼算法

流：「流」其實是 CSS世界中的一種基本的定位和佈局機制，能夠理解爲現實世界的一套物理規則，「流」跟現實世界的「水流」有殊途同歸的表現。瀏覽器

CSS世界

有同窗可能聽到CSS世界這個概念似懂非懂，這個概念出自**張鑫旭大佬的《CSS世界》**,個人理解是世界就是一張咱們佈局完的網頁，而如何造成這個世界就是CSS去規定的佈局

那經過這個流咱們來理解CSS的元素在這個流是怎麼佈局的,首先來看看CSS流佈局（你能夠理解爲標籤元素在流默認以什麼形式佈局的）中，咱們的HTML的<div>和<span>正好是CSS中塊級元素和內聯級元素的表明，你能夠把div理解成水，span是木塊，如圖：flex

舉個例子：動畫

style>
    .demo {
      height: 100px;
      background: lightblue;
    }
    .span1 {
      background: red;
    }
  </style>
  <body>
    <div class="demo">div</div>
    <span class="span1">span</span>
    <span class="span1">span</span>
  </body>
複製代碼

效果圖：spa

👆上述的div佔滿了一整行(沒有聲明width:100%的狀況下)，像水同樣鋪滿容器,而span則是像木頭同樣依次排列設計

因此總結一句：所謂「流」，就是CSS中引導元素排列和定位的一條看不見的「水流」，在這個流中，咱們的塊級元素和內聯級元素默認都有與其對應的排列和定位code

流是如何影響整個CSS世界的

CSS2.1 時代，咱們直接稱 CSS 爲「流的世界」真是一點兒也不爲過，整個 CSS 世界幾乎就是圍繞「流」來創建的，那麼流是如何影響整個 CSS 世界的呢？

由於 CSS 世界的基石是 HTML，因此只要讓 HTML **默認**的表現符合「流」，那麼整個 CSS 世界就能夠被「流」統治，而事實就是如此！
特殊佈局與流的破壞。若是所有都是以默認的「流」來渲染，咱們只能實現相似 W3C 那樣的文檔網頁，可是，實際的網頁是有不少複雜的佈局的，怎麼辦？能夠經過破壞「流」來實現特殊佈局。實際上，仍是和「流」打交道。
流向的改變。默認的流向是「一江春水向東流」，以及「飛流直下三千尺」。然而，這種流向咱們是能夠改變的，可讓CSS的展示更爲豐富。❗️所以，「文檔流從左往右自上而下」這種說法是不嚴謹的，你們必定要糾正過來。

什麼是流體佈局

❗️流體佈局不是什麼新技術，實際開發中咱們已經百分百使用過的，並且是必備的技巧

世界的造成須要咱們去搭建(佈局)，在流的世界中固然用流的方式去搭建（佈局）了,所謂「流體佈局」，指的是利用元素「流」的特性實現的各種佈局效果。由於「流」自己具備自適應特性，因此「流體佈局」每每都是具備自適應性的。可是，「流體佈局」並不等同於「自適應佈局」。「自適應佈局」是對凡是具備自適應特性的一類佈局的統稱，「流體佈局」要狹窄得多。例如，表格佈局也能夠設置爲100%自適應，但表格和「流」不是一路的，並不屬於「流體佈局」

好比上述這個demo就是流體佈局的一種體現

CSS 中最經常使用的魔法石，也就是最常使用的 HTML 標籤，是<div>，而<div>是典型的具備「流」特性的元素，所以，曾經風靡的「DIV+CSS 佈局」，實際上指的就是這裏的「流體佈局」。

CSS 新世界——CSS3

佈局更爲豐富

移動端的崛起，催生了 CSS3 媒介查詢以及許多響應式佈局特性的出現，如圖片元素的 srcset 屬性、CSS 的 object-fit 屬性
彈性盒子佈局（flexible box layout）終於熬出了頭
格柵佈局（grid layout）姍姍來遲

視覺表現長足進步

圓角、陰影和漸變讓元素更有質感
transform 變換讓元素有更多可能。
filter 濾鏡和混合模式讓 Web 輕鬆變成在線的 Photoshop；
animation 讓動畫變得很是簡單

盒模型

❗️假設咱們HTMl標籤元素在沒有CSS的影響下，是以什麼形式存在的，有人可能會想到以盒子形式存在的,實際則否則，HTMl標籤元素在瀏覽器中具體的存在形式是被CSS所定義的，也就是說的盒模型，就至關於出來一種MSS標記性語言（虛擬的語言）定義HTML標籤元素爲圓形模型

MDN是這樣定義的：CSS 基礎框盒模型是 CSS 規範的一個模塊，它定義了一種長方形的盒子——包括它們各自的內邊距（padding）與外邊距（margin ），並根據視覺格式化模型(算法機制)來生成元素，對其進行佈置、編排、佈局（lay out）。常被直譯爲盒子模型、盒模型或框模型。

❗️HTML標籤元素在CSS規則下是盒子形式存在，若是沒有被CSS影響，HTML標籤元素可能不是以盒子形式存在，而且，CSS世界存在流(CSS世界中的一種基本的定位和佈局機制)，在流的多個規則下，盒子就具有不一樣的規則，不一樣的規則（好比BFC、IFC、FFC、GFC）影響着盒子的排列，因此咱們把這種盒子也叫作正常流的盒子👇咱們會在CSS規則中講到

舉個例子：

.demo {
      height: 100px;
      background: lightblue;
    }
  </style>
  <body>
    <div class="demo">div</div>
  </body>
複製代碼

如👆的圖能夠看出，這個就是盒模型

盒模型分爲IE盒模型和W3C標準盒模型。咱們在👇下面會講述到，先來看看盒子是怎麼造成的吧

視覺格式化模型(visual formatting model)

❗️視覺格式化模不是一種盒模型類型，而是一種算法機制,具體能夠去看看W3C

CSS 視覺格式化模型（visual formatting model）是用來處理和在視覺媒體上顯示文檔時使用的計算規則。該模型是 CSS 的基礎概念之一

盒子的生成

MDN解釋：盒子的生成是 CSS 視覺格式化模型的一部分，用於從文檔元素生成盒子。盒子有不一樣的類型，不一樣類型的盒子的格式化方法（也叫格式化上下文）也有所不一樣。盒子的類型取決於 CSS display 屬性。

❗️咱們來理解上面👆這句話吧，盒子的生成是經過視覺格式化模型，而生成的盒子處於格式化上下文，由於有不一樣的格式化上下文,格式化上下文(formatting context) 是定義盒子環境的規則，不一樣格式化上下文(formatting context)下的盒子有不一樣的表現。也就是盒子經過視覺格式化模型出生，出生後被一種規則限制,可能有同窗對格式化上下文有點難以理解，不要緊，我也懵逼，因此接下來會在👇CSS規則章節講到

W3C 標準盒模型：

屬性width,height只包含內容content，不包含border和padding。

舉個例子：

<style> .demo { width: 200px; height: 100px; padding: 20px 20px; background: lightblue; border: 10px solid red; } </style>
  <body>
    <div class="demo">div</div>
  </body>
複製代碼

效果圖：

能夠看到標準盒模型中， width = 內容的寬度、height = 內容的高度，如上圖中height等於內容的高度爲100px，width等於內容的寬度爲100px

IE盒模型：

屬性width,height包含border和padding，指的是content+padding+border。

舉個例子：

.demo {
      box-sizing: border-box; /* 表明爲IE盒模型 */
      width: 200px;
      height: 100px;
      padding: 20px 20px;
      background: lightblue;
      border: 10px solid red;
    }
  </style>
  <body>
    <div class="demo">div</div>
  </body>
複製代碼

效果圖：

能夠看到，IE盒模型中，width = border + padding + 內容的寬度,height = border + padding + 內容的高度,如上圖height = border 10px*2+ padding20px*2 + 內容的高度40px=100px,width = border 10px*2 + padding 20px*2+ 內容的寬度 140px=200px

box-sizing屬性更改盒模型

❗️CSS 中的 box-sizing屬性定義了user agent應該如何計算一個元素的總寬度和總高度。

IE模型不是一無所用，開發中咱們有時候會改變padding的值，這樣會影響到整個盒子的區域面積，咱們還得手動計算改width或者height，這樣顯然影響效率，這時候IE盒模型的做用就來了，咱們只要按照設計師給的盒子固定區域，寫死，給我寫死就行！！！,咱們將盒子轉化爲IE盒模型，咱們無論怎麼改變padding或者border，區域面積永遠固定在哪裏

box-sizing:content-box /*（標準盒模型）*/
box-sizing:border-box /*（IE盒模型）*/
複製代碼

在ie8+瀏覽器中使用哪一個盒模型能夠由box-sizing(CSS新增的屬性)控制，默認值爲content-box，即標準盒模型；若是將box-sizing設爲border-box則用的是IE盒模型。若是在ie6,7,8中DOCTYPE缺失會觸發IE模式。在當前W3C標準中盒模型是能夠經過box-sizing自由的進行切換的

CSS流的規則

「流」之因此影響了整個 CSS 世界，就是由於影響了 CSS 世界的基石 HTML。那具體是如何影響的呢？

❗️❗️❗️什麼是格式化上下文（Fatting context）

前面咱們反覆講到的格式化上下文究竟是什麼東東？查閱了W3C獲得的是這句話:Boxes in the normal flow belong to a formatting context意思是正常流的盒子屬於格式化上下文，前面咱們講到不一樣格式化上下文(formatting context)下的盒子有不一樣的表現，咱們知道正常流的盒子屬於格式化上下文，那麼格式化上下文就是制定規則的區域，那麼你們想一想，想到規則會想起CSS的誰？也就是流, 在個人理解裏:。FC就是咱們的流，它是頁面中的一塊渲染區域，有一套渲染規則(如何理解塊級格式化上下文BFC(block formatting context)?),那麼流中具備不一樣的規則，好比BFC、IFC、FFC、GFC,下面咱們逐個擊破它們吧

BFC與塊級元素

IFC與內聯級元素

❗️在講塊級元素和內聯元素以前，咱們會這樣想塊級元素：老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示,內聯元素：和相鄰的內聯元素在同一行，的確能夠這樣理解，可是有沒有想過就是這些元素爲何會具有這些屬性？與其說具有這些屬性，倒不如說HTML標籤元素被不一樣的規則所影響，致使擁有不一樣的屬性

HTML 常見的標籤有<div>、<p>、<li>和<table>以及<span>、<img>、<strong> 和<em>等。雖然標籤種類繁多，但一般咱們就把它們分爲兩類：塊級元素（block-level element）和內聯元素（inline element）。