我們是否想過(guò)沒(méi)有css對(duì)html標(biāo)簽元素的影響，那么我們的標(biāo)簽在瀏覽器是什么樣形式存在的？CSS對(duì)HTML標(biāo)簽元素到底產(chǎn)生了什么影響？又做了什么規(guī)則限定？來(lái)聊聊吧！！！
CSS 作為一門標(biāo)記性語(yǔ)言，但是它的簡(jiǎn)單易學(xué)，很多開(kāi)發(fā)者都不知道它是一門語(yǔ)言，語(yǔ)言的東西必定具備諸多概念，但是我們會(huì)往往忽略這些概念，確實(shí)，就算你不知道這些概念，你僅僅知道這些樣式是干什么的，都能寫出一張復(fù)雜的頁(yè)面，所以我們不止要做到會(huì)用，而且要理解實(shí)質(zhì)性的原理而不是只知道這些樣式是僅僅做什么的，所以痛定思痛，好好溫故而知新吧
流（Normal flow）
Normal flow直譯為正常流，但是為什么稱為文檔流，倒是很好奇，會(huì)給人別人容易產(chǎn)生誤會(huì)，所以一下的介紹中，我們都是以流的形式稱呼
流：“流”實(shí)際上是 CSS世界中的一種基本的定位和布局機(jī)制，可以理解為現(xiàn)實(shí)世界的一套物理規(guī)則，“流”跟現(xiàn)實(shí)世界的“水流”有異曲同工的表現(xiàn)。
CSS世界
有同學(xué)可能聽(tīng)到CSS世界這個(gè)概念似懂非懂，這個(gè)概念出自**張?chǎng)涡翊罄械摹禖SS世界》**,我的理解是世界就是一張我們布局完的網(wǎng)頁(yè)，而如何形成這個(gè)世界就是CSS去規(guī)定的
那通過(guò)這個(gè)流我們來(lái)理解CSS的元素在這個(gè)流是怎么布局的,首先來(lái)看看CSS流布局（你可以理解為標(biāo)簽元素在流默認(rèn)以什么形式布局的）中，我們的HTML的<div>和<span>正好是CSS中塊級(jí)元素和內(nèi)聯(lián)級(jí)元素的代表，你可以把div理解成水，span是木塊，如圖：
舉個(gè)例子：
舉個(gè)例子：
效果圖：
上述的div占滿了一整行(沒(méi)有聲明width:100%的情況下)，像水一樣鋪滿容器,而span則是像木頭一樣依次排列
所以總結(jié)一句：所謂“流”，就是CSS中引導(dǎo)元素排列和定位的一條看不見(jiàn)的“水流”，在這個(gè)流中，我們的塊級(jí)元素和內(nèi)聯(lián)級(jí)元素默認(rèn)都有與其對(duì)應(yīng)的排列和定位
流是如何影響整個(gè)CSS世界的
CSS2.1 時(shí)代，我們直接稱 CSS 為“流的世界”真是一點(diǎn)兒也不為過(guò)，整個(gè) CSS 世界幾乎就是圍繞“流”來(lái)建立的，那么流是如何影響整個(gè) CSS 世界的呢？
- 因?yàn)?CSS 世界的基石是 HTML，所以只要讓 HTML **默認(rèn)**的表現(xiàn)符合“流”，那么整個(gè) CSS 世界就可以被“流”統(tǒng)治，而事實(shí)就是如此！
- 特殊布局與流的破壞。如果全部都是以默認(rèn)的“流”來(lái)渲染，我們只能實(shí)現(xiàn)類似 W3C 那樣的文檔網(wǎng)頁(yè)，但是，實(shí)際的網(wǎng)頁(yè)是有很多復(fù)雜的布局的，怎么辦？可以通過(guò)破壞“流”來(lái)實(shí)現(xiàn)特殊布局。實(shí)際上，還是和“流”打交道。
- 流向的改變。默認(rèn)的流向是“一江春水向東流”，以及“飛流直下三千尺”。然而，這 種流向我們是可以改變的，可以讓CSS的展現(xiàn)更為豐富。??因此，“文檔流從左往右自上而下”這種說(shuō)法是不嚴(yán)謹(jǐn)?shù)?，大家一定要糾正過(guò)來(lái)。
什么是流體布局
??流體布局不是什么新技術(shù)，實(shí)際開(kāi)發(fā)中我們已經(jīng)百分百使用過(guò)的，而且是必備的技巧
世界的形成需要我們?nèi)ゴ罱?布局)，在流的世界中當(dāng)然用流的方式去搭建（布局）了,所謂“流體布局”，指的是利用元素“流”的特性實(shí)現(xiàn)的各類布局效果。因?yàn)?ldquo;流”本身具有自適應(yīng)特性，所以“流體布局”往往都是具有自適應(yīng)性的。但是，“流體布局”并不等同于 “自適應(yīng)布局”。“自適應(yīng)布局”是對(duì)凡是具有自適應(yīng)特性的一類布局的統(tǒng)稱，“流體布局”要狹窄得多。例如，表格布局也可以設(shè)置為100%自適應(yīng)，但表格和“流”不是一路的，并不屬于“流體布局”
比如上述這個(gè)demo就是流體布局的一種體現(xiàn)
CSS 中最常用的魔法石，也就是最常使用的 HTML 標(biāo)簽，是<div>，而<div>是典型的 具有“流”特性的元素，因此，曾經(jīng)風(fēng)靡的“DIV+CSS 布局”，實(shí)際上指的就是這里的“流體 布局”。
CSS 新世界——CSS3
布局更為豐富
- 移動(dòng)端的崛起，催生了 CSS3 媒介查詢以及許多響應(yīng)式布局特性的出現(xiàn)，如圖片元素 的 srcset 屬性、CSS 的 object-fit 屬性
- 彈性盒子布局（flexible box layout）終于熬出了頭
- 格柵布局（grid layout）姍姍來(lái)遲
視覺(jué)表現(xiàn)長(zhǎng)足進(jìn)步
- 圓角、陰影和漸變讓元素更有質(zhì)感
- transform 變換讓元素有更多可能。
- filter 濾鏡和混合模式讓 Web 輕松變成在線的 Photoshop；
- animation 讓動(dòng)畫變得非常簡(jiǎn)單
盒模型
??假設(shè)我們HTMl標(biāo)簽元素在沒(méi)有CSS的影響下，是以什么形式存在的，有人可能會(huì)想到以盒子形式存在的,實(shí)際則不然，HTMl標(biāo)簽元素在瀏覽器中具體的存在形式是被CSS所定義的，也就是說(shuō)的盒模型，就相當(dāng)于出來(lái)一種MSS標(biāo)記性語(yǔ)言（虛擬的語(yǔ)言）定義HTML標(biāo)簽元素為圓形模型
MDN是這樣定義的：CSS 基礎(chǔ)框盒模型是 CSS 規(guī)范的一個(gè)模塊，它定義了一種長(zhǎng)方形的盒子——包括它們各自的內(nèi)邊距（padding）與外邊距（margin ），并根據(jù)視覺(jué)格式化模型(算法機(jī)制)來(lái)生成元素，對(duì)其進(jìn)行布置、編排、布局（lay out）。常被直譯為盒子模型、盒模型或框模型。
??HTML標(biāo)簽元素在CSS規(guī)則下是盒子形式存在，如果沒(méi)有被CSS影響，HTML標(biāo)簽元素可能不是以盒子形式存在，并且，CSS世界存在流(CSS世界中的一種基本的定位和布局機(jī)制)，在流的多個(gè)規(guī)則下，盒子就具備不同的規(guī)則，不同的規(guī)則（比如BFC、IFC、FFC、GFC）影響著盒子的排列，所以我們把這種盒子也叫做正常流的盒子我們會(huì)在CSS規(guī)則中講到
舉個(gè)例子：
.demo {
height: 100px;
background: lightblue;
}
</style>
<body>
<div class="demo">div</div>
</body>
如的圖可以看出，這個(gè)就是盒模型
盒模型分為IE盒模型和W3C標(biāo)準(zhǔn)盒模型。我們?cè)谙旅鏁?huì)講述到，先來(lái)看看盒子是怎么形成的吧
視覺(jué)格式化模型(visual formatting model)
??視覺(jué)格式化模不是一種盒模型類型，而是一種算法機(jī)制,具體可以去看看W3C
CSS 視覺(jué)格式化模型（visual formatting model）是用來(lái)處理和在視覺(jué)媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則。該模型是 CSS 的基礎(chǔ)概念之一
盒子的生成
MDN解釋：盒子的生成是 CSS 視覺(jué)格式化模型的一部分，用于從文檔元素生成盒子。盒子有不同的類型，不同類型的盒子的格式化方法（也叫格式化上下文）也有所不同。盒子的類型取決于 CSS display 屬性。
??我們來(lái)理解上面這句話吧，盒子的生成是通過(guò)視覺(jué)格式化模型，而生成的盒子處于格式化上下文，因?yàn)橛胁煌母袷交舷挛?格式化上下文(formatting context) 是定義 盒子環(huán)境 的規(guī)則，不同 格式化上下文(formatting context)下的盒子有不同的表現(xiàn)。也就是盒子通過(guò)視覺(jué)格式化模型出生，出生后被一種規(guī)則限制,可能有同學(xué)對(duì)格式化上下文有點(diǎn)難以理解，沒(méi)關(guān)系，我也懵逼，所以接下來(lái)會(huì)在CSS規(guī)則章節(jié)講到
W3C 標(biāo)準(zhǔn)盒模型：
屬性width,height只包含內(nèi)容content，不包含border和padding。
舉個(gè)例子：
<style>
.demo {
width: 200px;
height: 100px;
padding: 20px 20px;
background: lightblue;
border: 10px solid red;
}
</style>
<body>
<div class="demo">div</div>
</body>
效果圖：
可以看到標(biāo)準(zhǔn)盒模型中， width = 內(nèi)容的寬度、height = 內(nèi)容的高度，如上圖中height等于內(nèi)容的高度為100px，width等于內(nèi)容的寬度為100px
IE盒模型：
屬性width,height包含border和padding，指的是content+padding+border。
舉個(gè)例子：
.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 + 內(nèi)容的寬度,height = border + padding + 內(nèi)容的高度,如上圖height = border 10px*2+ padding20px*2 + 內(nèi)容的高度40px=100px,width = border 10px*2 + padding 20px*2+ 內(nèi)容的寬度 140px=200px
box-sizing屬性更改盒模型
??CSS 中的 box-sizing屬性定義了user agent應(yīng)該如何計(jì)算一個(gè)元素的總寬度和總高度。
IE模型不是一無(wú)所用，開(kāi)發(fā)中我們有時(shí)候會(huì)改變padding的值，這樣會(huì)影響到整個(gè)盒子的區(qū)域面積，我們還得手動(dòng)計(jì)算改width或者h(yuǎn)eight，這樣顯然影響效率，這時(shí)候IE盒模型的作用就來(lái)了，我們只要按照設(shè)計(jì)師給的盒子固定區(qū)域，寫死，給我寫死就行?。?！,我們將盒子轉(zhuǎn)化為IE盒模型，我們不管怎么改變padding或者border，區(qū)域面積永遠(yuǎn)固定在哪里
box-sizing:content-box /*（標(biāo)準(zhǔn)盒模型）*/
box-sizing:border-box /*（IE盒模型）*/
在ie8+瀏覽器中使用哪個(gè)盒模型可以由box-sizing(CSS新增的屬性)控制，默認(rèn)值為content-box，即標(biāo)準(zhǔn)盒模型；如果將box-sizing設(shè)為border-box則用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失會(huì)觸發(fā)IE模式。在當(dāng)前W3C標(biāo)準(zhǔn)中盒模型是可以通過(guò)box-sizing自由的進(jìn)行切換的
CSS流的規(guī)則
“流”之所以影響了整個(gè) CSS 世界，就是因?yàn)橛绊懥?CSS 世界的基石 HTML。那具體是如何影響的呢？
什么是格式化上下文（Fatting context）
前面我們反復(fù)講到的格式化上下文到底是什么東東？查閱了W3C得到的是這句話:Boxes in the normal flow belong to a formatting context意思是正常流的盒子屬于格式化上下文，前面我們講到不同 格式化上下文(formatting context)下的盒子有不同的表現(xiàn)，我們知道正常流的盒子屬于格式化上下文，那么格式化上下文就是制定規(guī)則的區(qū)域，那么大家想想，想到規(guī)則會(huì)想起CSS的誰(shuí)？也就是流, 在我的理解里:。FC就是我們的流，它是頁(yè)面中的一塊渲染區(qū)域，有一套渲染規(guī)則如何理解塊級(jí)格式化上下文BFC(block formatting context)?,那么流中具有不同的規(guī)則，比如BFC、IFC、FFC、GFC,下面我們逐個(gè)擊破它們吧
塊級(jí)元素和內(nèi)聯(lián)級(jí)元素
在講塊級(jí)元素和內(nèi)聯(lián)元素之前，我們會(huì)這樣想塊級(jí)元素：總是獨(dú)占一行，表現(xiàn)為另起一行開(kāi)始，而且其后的元素也必須另起一行顯示,內(nèi)聯(lián)元素：和相鄰的內(nèi)聯(lián)元素在同一行，的確可以這樣理解，但是有沒(méi)有想過(guò)就是這些元素為什么會(huì)具備這些屬性？與其說(shuō)具備這些屬性，倒不如說(shuō)HTML標(biāo)簽元素被不同的規(guī)則所影響，導(dǎo)致?lián)碛胁煌膶傩?/p>
HTML 常見(jiàn)的標(biāo)簽有<div>、<p>、<li>和<table>以及<span>、<img>、<strong> 和<em>等。雖然標(biāo)簽種類繁多，但通常我們就把它們分為兩類：塊級(jí)元素（block-level element）和內(nèi)聯(lián)元素（inline element）。
多年開(kāi)發(fā)老碼農(nóng)福利贈(zèng)送：網(wǎng)頁(yè)制作，網(wǎng)站開(kāi)發(fā)，web前端開(kāi)發(fā)，從最零基礎(chǔ)開(kāi)始的的HTML+CSS+JAVAScript。jQuery，Vue、React、Ajax，node，angular框架等到移動(dòng)端小程序項(xiàng)目實(shí)戰(zhàn)【視頻＋工具＋電子書＋系統(tǒng)路線圖】都有整理，需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領(lǐng)取地址，送給每一位對(duì)編程感興趣的小伙伴
