一雏胃、盒模型
盒模型婚度，顧名思義伟葫，是HTML文檔中每個元素在渲染的時候都會被描述成一個矩形盒子，盒模型就是表示每個元素盒子所占空間大小的模型部逮。
盒模型主要有四個部分：
- margin （外邊距）
- border （邊框）
- padding （內(nèi)邊距）
- content （內(nèi)容區(qū)域）
一般來說娜汁，默認盒模型實際占用空間計算模式為：
- 水平空間大小 = margin（左右）+ border（左右）+ padding（左右）+ width
- 垂直空間大小 = margin（上下）+ border （上下）+ padding （上下）+height
因此， 一個元素的實際大小為：border + padding + width/height
在CSS中兄朋，名為box-sizing的屬性可以改變元素寬高的計算方式掐禁。
box-sizing有兩個常用的取值：
- content-box
- border-box
content-box為默認值，實際寬高為上述元素實際大小的計算方式。
border-box則是一個元素設置的width和height傅事，不包含其他的缕允。
二、視覺格式化模型
元素能夠被渲染成一個又一個盒子蹭越，那么這些盒子的位置在頁面中又是如何擺放的呢障本？
在默認情況下，盒子是按照元素在HTML中的先后位置從左至右從上至下一個接著一個排列放置般又。
但此時也分為兩種情況彼绷，有的盒子呈水平排列，有的盒子卻占滿整個一行茴迁。這是因為不同的盒子寄悯，使用的是不同的格式化上下文來布局。
格式化上下文常見的有兩種：
- 塊格式化上下文（BFC）
- 行內(nèi)格式化上下文（IFC）
當元素的display值為block堕义、list-item猜旬、table、flex倦卖、grid時洒擦，它是塊級元素，每個塊級元素至少生成一個塊級盒怕膛，塊級盒參與BFC熟嫩，被渲染成完整的一個新行。
W3C對于BFC的定義是：
浮動元素和絕對定位元素褐捻，非塊極盒子的塊級容器掸茅，以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的塊級格式化上下文柠逞。
在一個塊級格式化上下文里昧狮，盒子從包含塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin來決定的板壮，兩個相鄰的塊級盒子的垂直外邊距會發(fā)生疊加逗鸣。
在塊級格式化上下文中，每一個盒子的左外邊緣會觸碰到容器的左邊緣（對于從右到左的格式來說绰精，則會觸碰到右邊緣）撒璧，即使存在浮動也是如此，除非這個盒子創(chuàng)建一個新的塊級格式化上下文笨使。
總結(jié)一下BFC的特性：
- 內(nèi)部的Box會在垂直方向沪悲，從頂部開始一個接一個地放置。
- Box垂直方向的距離由margin決定阱表。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加殿如。
- 每個元素的margin box的左邊贡珊，與包含塊border box的左邊相接觸，即使存在浮動也是如此涉馁。
- BFC的區(qū)域不會與float box疊加
- BFC就是頁面上的一個隔離的獨立容器门岔，容器里面的子元素不會影響到外面的元素，反之亦然烤送。
- 計算BFC的高度時寒随，浮動元素也參與計算。
當元素的display值為inline帮坚、inline-block妻往、inline-table、inline-flex试和、inline-grid時讯泣，它是行內(nèi)級元素，行內(nèi)級元素生成行內(nèi)級盒阅悍，參與IFC好渠，被渲染為水平排列，直到當行被占滿然后換行节视。
總結(jié)IFC的渲染規(guī)則：
- 盒子一個接一個地水平擺放拳锚，當容器寬度不夠時就會換行。
- 在水平方向上寻行，這些盒的外邊距霍掺，邊框，內(nèi)邊距所占用的空間都會被計算拌蜘，但行內(nèi)和的垂直border杆烁，padding，margin都會撐開行盒的高度拦坠。
- 在垂直方向上连躏，這些盒可能會以不同形式來對齊剩岳，可通過vertical-align來設置贞滨，默認對齊為baseline
- 每一行將生成一個行盒，包括該行所有的盒子拍棕，行盒的寬度是由包含塊和存在的浮動來決定
- 行盒一般左右邊都貼近其包含塊晓铆，但是會因為浮動和的存在而發(fā)生變化，浮動盒會位于包含塊邊緣與行盒邊緣之間绰播，這樣行盒的可用寬度就小于包含塊的寬度
- 當所有盒的總寬度小于行盒的寬度骄噪，那么行盒中的水平方向排版有text-align來決定
- 當所有盒的總寬度超過一個行盒時，就會形成多個行盒蠢箩，多個行盒互相之間垂直方向不能分離链蕊，不能重疊
- 當一個行內(nèi)盒超過行盒的寬度時事甜，它會被分割成多個盒，這些盒被分布在多個行盒里滔韵，如果一個行內(nèi)盒不能被分割逻谦，那么這個行內(nèi)盒將溢出這個行盒
- 行盒的高度由內(nèi)部元素中實際高度最高的元素計算出來，每個行盒的高度由于內(nèi)容不一樣陪蜻，所以高度也可能不一樣
- 在一個行盒中邦马，當他包含的內(nèi)部容器的高度小于行盒的高度的時候，內(nèi)部容器的垂直位置可由自己的vertical-align屬性來確定
- 在IFC中宴卖，是不能存在塊級元素的滋将，如果將塊級元素放入IFC，那么會被破壞成BFC症昏，而塊級元素前的元素或文本和塊級元素后的元素或文本將會各自自動產(chǎn)生一個匿名塊盒將其包圍随闽。
三、一些易混淆的概念
塊元素與塊級元素
塊級元素：塊級元素是那些視覺上會被格式化成塊狀的元素齿兔，也就是會換新行的元素橱脸。
塊元素：塊元素是display屬性值為block的元素，他應該是塊級元素的一個子集分苇。
行內(nèi)元素與行內(nèi)及元素
行內(nèi)級元素：行內(nèi)級元素是不會為自身內(nèi)容形成新的塊添诉，而讓內(nèi)容分布在多行中的元素。
行內(nèi)元素：行內(nèi)元素僅僅是display值為inline的元素医寿，是行內(nèi)及元素的一個子集栏赴。
block，inline靖秩，inline-block
block和inline這里不再贅述须眷，重點說一下inline-block：
inline-block是將元素呈現(xiàn)為inline，但元素的內(nèi)容卻又作為block呈現(xiàn)沟突，既具有block的寬高特性花颗，又具有inline的同行特性。
參考資料：
- 騰訊課堂前端NEXT課程文檔——視覺格式化模型
CSS布局詳解系列索引：
