我們是否想過沒有css對html標簽元素的影響，那么我們的標簽在瀏覽器是什么樣形式存在的？CSS對HTML標簽元素到底產生了什么影響？又做了什么規則限定？來聊聊吧！！！
CSS 作為一門標記性語言，但是它的簡單易學，很多開發者都不知道它是一門語言，語言的東西必定具備諸多概念，但是我們會往往忽略這些概念，確實，就算你不知道這些概念，你僅僅知道這些樣式是干什么的，都能寫出一張復雜的頁面，所以我們不止要做到會用，而且要理解實質性的原理而不是只知道這些樣式是僅僅做什么的，所以痛定思痛，好好溫故而知新吧
流（Normal flow）
Normal flow直譯為正常流，但是為什么稱為文檔流，倒是很好奇，會給人別人容易產生誤會，所以一下的介紹中，我們都是以流的形式稱呼
流：“流”實際上是 CSS世界中的一種基本的定位和布局機制，可以理解為現實世界的一套物理規則，“流”跟現實世界的“水流”有異曲同工的表現。
CSS世界
有同學可能聽到CSS世界這個概念似懂非懂，這個概念出自**張鑫旭大佬的《CSS世界》**,我的理解是世界就是一張我們布局完的網頁，而如何形成這個世界就是CSS去規定的
那通過這個流我們來理解CSS的元素在這個流是怎么布局的,首先來看看CSS流布局（你可以理解為標簽元素在流默認以什么形式布局的）中，我們的HTML的<div>和<span>正好是CSS中塊級元素和內聯級元素的代表，你可以把div理解成水，span是木塊，如圖：
舉個例子：
舉個例子：
效果圖：
上述的div占滿了一整行(沒有聲明width:100%的情況下)，像水一樣鋪滿容器,而span則是像木頭一樣依次排列
所以總結一句：所謂“流”，就是CSS中引導元素排列和定位的一條看不見的“水流”，在這個流中，我們的塊級元素和內聯級元素默認都有與其對應的排列和定位
流是如何影響整個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,下面我們逐個擊破它們吧
塊級元素和內聯級元素
在講塊級元素和內聯元素之前，我們會這樣想塊級元素：總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示,內聯元素：和相鄰的內聯元素在同一行，的確可以這樣理解，但是有沒有想過就是這些元素為什么會具備這些屬性？與其說具備這些屬性，倒不如說HTML標簽元素被不同的規則所影響，導致擁有不同的屬性
HTML 常見的標簽有<div>、<p>、<li>和<table>以及<span>、<img>、<strong> 和<em>等。雖然標簽種類繁多，但通常我們就把它們分為兩類：塊級元素（block-level element）和內聯元素（inline element）。
多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JAVAScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴
