CSS盒模型

box model

• Margin

• Border

• Padding

• Content

width

指定content box 的寬度         
百分數相對於父容器(包含塊)的content box的寬度     
只有包含塊的高度不依賴該元素時，百分比寬度才生效

padding

• 內邊距

margin

• 外邊距

• 相鄰的兩個盒子margin，會發生摺疊

• margin能夠爲負值

box-sizing

• 改變盒模型計算方式

• content-box

• border-box //更符合

overflow

• 溢出控制

• 取值：visible hidden scroll auto

• 初始值：visible

視覺格式化模型

視口(Viewport)

瀏覽器的可視區域

塊級元素(block-level)

會被格式化塊狀元素
例如p,div,section等
將display設置爲block，list-item, table    使元素變爲塊級元素

行級元素(inline-level)

盒子的生成

• 每個塊級元素生成一個主塊級盒(principal block-level box)用它來包含子級盒

• 每個行級元素生成一個行級盒，行級盒分佈於多行

Box Model-revisited

• 行級盒 margin-top, margin-bottm, padding-top不會產生效果

• 行級盒 padding-bottom不會影響佈局

塊級盒子的子盒子的生成

• 塊級盒子能夠包含多個子塊級盒子

• 也能夠包含多個行級盒子

• 不在行級元素裏面的文字，會生成匿名行級盒好比,<p>Some <em>text</em></p>中的some

• 塊級盒子中不能同時包含塊級和行級盒子。遇到這種狀況，會生成匿名塊級盒來包含行級盒。好比<div><h1>標題</h1><span>2017-1-10</span></div>

行級盒子的子盒子生成

• 行級盒子內能夠包含行級盒子

• 行級盒子包含塊級盒子時，會被塊級拆成兩個行級盒子，這兩個盒子又分別被匿名k塊級盒包含 <span>aaaa<h2>22222</h2><strong>tttttt</strong></span>

display屬性

• block 生成塊級盒

• inline 生成行級盒

• inline-block 生成行級盒，爲其內容生成塊級盒

• none 在排版時將元素忽略

visibility

• 控制元素展現

• 取值：visible hidden collapse

• 初始值：visible

• 排版時會佔用位置

Generated Content //多產生盒子，用來存放指定的內容

控制元素
::before 和 ::after
content //須要插入的內容

常規流

• 除了根元素，浮動元素和絕對定位元素外，其餘元素都在常規流以內

• 而根元素，浮動和絕對定位元素會脫離常規流

• 常規流中的盒子，屬於處於塊級格式化上下文，或行級格式化上下文

塊級格式化上下文(Block Formatting Context)

• 盒子在容器(包含塊)內從上到下一個接一個的放置

• 兩個兄弟盒子之間的距離由margin屬性決定

• 同一個BFC內垂直margin會合並

• 盒子的左外邊緣挨着容器(包含塊)的左邊

BFC特性

• BFC內的浮動不會影響到BFC外部的元素

• BFC的高度會包含其內的浮動元素

• BFC不會和浮動元素重疊

• BFC能夠經過 overflow：hidden 浮動框 絕對定位框 非塊級的塊容器(inline-block) 等方法建立

行級格式上下文(lnline Formatting Context)

• 盒子一個接一個水平放置

• 盒之間的水平margin，border和padding都有效

• 同一行的盒子所在的矩形區叫行盒(line box)

• 當一個行盒放不下上下文內全部盒子時，會被分到多個垂直摺疊的行盒內
  行盒內的水平分佈由 text-align 決定

• 若是一個行級塊沒法分割(單詞, inline-block)，該元素會被做爲一個總體被決定放在哪個行盒

浮動(float)

• 浮動元素從常規流中脫離，被漂浮在容器(包含塊)的左邊或者右邊

• 浮動盒會一直漂到其外邊緣捱到容器邊緣或另外的浮動盒

• 浮動元素不會影響其後面的流內塊元素

• 可是浮動元素後面的行級盒子會變短以避開浮動元素

clear

指定元素哪一邊不能與以前的浮動框相鄰
取值：left right both

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}