頁面佈局
- 文檔流：HTML文檔頁面中，內容像流水那樣從左向右，從上到下“流過”頁面（從左向右讀的語言）
- 替換元素：用作爲其他內容佔位符的一個元素，如 img 元素，大多數表單元素也可以被替換
- 非替換元素：元素的內容包含在文檔中，如一個段落的文本內容都放在該元素本身之內
- 塊級元素：指段落、標題、div之類，在正常文檔流中時，會在它的框之前和之後生成“換行”，所以處在正常流中的塊級元素會垂直放置
- 行內元素：元素不會在其之前和之後生成“換行”
盒模式(box model)/框模型
- CSS假定每個元素會生成一個或多個矩形框（或盒子），成爲元素框(element box)，各個元素框中心有一個內容區(content area)，內容區周圍是可選的內邊距(padding)、邊框(border)、外邊距(margin)
- 元素框描述了一個元素在文檔佈局中所佔空間的大小，因此每個元素框會影響其他元素框的位置和大小
![https://www.w3.org/TR/CSS2/images/boxdim.png]()
圖片來自https://www.w3.org/TR/CSS2/images/boxdim.png
筆記
水平格式化
- 內邊距不能爲負，邊框寬度不能爲負
- width影響的是內容區的寬度，而不是整個可見元素框，所以 padding、 border、 margin值都會加到 width、 height上
- 正常流中塊級元素框的水平部分總和就是父元素的 width，對邊距設置距離時，取auto的值會自動確定所需長度，使元素寬等於父元素的 width
- margin、width均被指定，總長度超出父元素的寬度時，會導致過分受限，（針對從左至右閱讀的語言）margin-right會被用戶代理強制性設置爲
auto。 - margin-left、margin-right設爲 auto時，會在父元素中居中。margin-left、margin-right、width均爲
auto時，margin-left、margin-right會被設爲0，width取最大值。 - 對於替換元素，width設爲 auto時，元素寬度爲內容的固有寬度，如果給一個元素設定的 width值不同於其固有寬度，則 height值也會跟着成比例的變化，除非height值自己設置了特定值。
垂直格式化
- 只有height、margin-top、margin-bottom可以設置爲 auto，padding-top、padding-bottom、border設爲 auto時，會被取爲0
- 要將元素垂直居中，可以將 margin-top、margin-bottom取 25%
- 只取了margin，其他邊距爲0時，垂直外邊距會自動合併。相鄰的外邊距，較小的那個會合並（或重疊）到較大的一箇中
- li前面的標誌可以在列表項內容外，也可以在內容內，取決於 list-style-position的值，若標誌在內部，則這個 ul/ol 就是一個塊元素
行內元素
- 行框：包含行中出現的行內框的最高點和最低點的最小框
行內框：對於非替換元素，行內框的高度爲 line-height，行內非替換元素的 padding、border、margin都不會影響行框高度，但會影響元素佈局（邊距會出現在行內元素的開始和末尾，因此會將文本推離/拉近行內元素）
對於替換元素，行內框的高度爲內容區的高度（內容區爲元素的固有高度加上所有的 padding、border、margin）。有固有高度的替換元素（如一個img）可能導致行框比正常高，但這不會改變任何元素的 line-height，只是會讓行框的高度足夠高以便恰好包含替換元素
行內元素的背景應用於內容區和所有內邊距
- 基線在各em框（也稱字符框）中位置對於不同字體是不同的
改變元素顯示
display
- inline-block:作爲替換元素被放在行中，如圖像放在文本行（設置width、height會使行高變動）
- run-in:即行、塊混合。 使塊元素成爲下一個元素的行內部分
一個元素生成 run-in框，且該框後面是一個塊級框，則該 run-in元素將成爲塊級框開始處的一個行內框
run-in元素只會從文檔中的父元素繼承屬性，而不是放在哪個元素中，就從哪裏繼承 只有當 run-in框後面是一個塊框，
run-in才起作用，否則 run-in框將變爲塊框