CSS3 box-sizing 屬性分為content-box和border-box

content-box：在該盒屬性下，對元素設定的width和height會被應用到元素內容框，在內容框寬高之外繪制元素的內邊距和邊框。

border-box：在該盒屬性下，對元素設定的width和height會被應用到元素邊框盒，為元素設置的的任何padding和border都將在已設定的width和height內進行繪制。 通過從已設定的寬高分別減去padding和border得到內容框的寬高。

display:block：block元素會獨占一行，默認情況下寬度會自動填滿父級元素的寬度；可以手動設置width和height屬性，也可設置padding和margin屬性。

display:inline：inline元素在有多個的情況會自動排列填滿一行後換行，寬度是由元素內容決定，設置width、height屬性無效，設置豎直方向的padding、margin屬性無效。

display:inline-block：inline-block元素是借鑒了以上兩種元素的特性，在有多個該元素的情況時會保持同行排列，同時也可以對其中每一個元素設置寬高、間距屬性。

文檔流：文檔內元素的流動方向，即內聯元素從左到右，塊級元素獨占一行從上到下。

div 塊級元素的高度：是根據內部文檔流元素的總和來決定的。

關於塊級元素的height屬性，一般情況下不建議手動設置，不易修改元素內容，易產生頁面顯示誤差。

通常該通過對該元素的padding元素來實現頁面需求，設置padding可防止元素內容改變時造成元素的height改變。

span行內元素的特殊情況：行內字體size比較大時，可能會出現設置的line-height與瀏覽器顯示的元素高度不一致的bug情況！【暫時未能解決，可能是要將line-height屬性放在font屬性後方能確保無誤】

word-break:break-all ：任意中日韓字、字母之間可換行。

word-break:break-word ：只能在單詞或字之間換行。

列表左右雙列布局：可通過對dt dd設置浮動，然後在對其width設置百分比屬性，從而可實現左右兩列五五分或者其他比例的雙列布局

在元素浮動並且設置了width：100%的情況下，設置橫向padding會導致元素寬度超出body寬度。這種情況我們可以通過給該元素增加一個父元素，對父元素單獨設置橫向padding。

清除浮動：

css設置
.clearfix::after{
content: "";
display: block;
clear: both;
}

background-size：cover

background-position：center center

max-height 屬性用來設置給定元素的最大高度。如果height 屬性設置的高度比該屬性設置的高度還大，則height 屬性會失效。

min-height、max-height、height 優先級：同時出現時max和min誰大誰優先（height已失效）；只有當height小於max-height時，height優先。

文字對齊是由基線對齊，而不是中線對齊。

每一種字體存在其自帶的建議行高，在未對字體設置行高的情況時瀏覽器會默認采用字體建議行高。

【關於字體度量的詳細講解可參考此文：《深入理解 CSS：字體度量、line-height 和 vertical-align》——方應杭】

相對定位（relative）：相對定位的元素是在文檔流中的正常位置偏移給定的值，而且不會影響其他元素的偏移。

絕對定位（absolute、fixed）：絕對定位的元素脫離了文檔流，而且不占據空間，相對於最近的非 static 祖先元素定位。

固定定位（fixed）：元素的包含塊為 viewport 視口，在沒有滾動條時和absolute沒有差異，在有滾動條的情況下，fixed定位不會隨滾動條移動而移動。例：fixed應用在頁面邊緣固定的小廣告。

粘性定位（sticky）：可看作相對定位和固定定位兩種特性合於一體的定位。元素先按照普通文檔流定位，然後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。而後，元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。舉個例子，將閾值設定為top:0 ，這個值表示當元素距離頁面視口（Viewport，也就是fixed定位的參照）頂部距離大於 0px 時，元素以 relative 定位表現，而當元素距離頁面視口小於 0px 時，元素表現為 fixed 定位，也就會固定在頂部。

字體默認像素大小16px

inherit 繼承 優先級：設置顏色>設置繼承顏色>瀏覽器默認顏色>body默認繼承顏色

頁面調試小技巧：給需要調試的元素添加border屬性{border：1px solid red}

【CSS基礎筆記】——盒模型、塊級元素、行內元素、浮動、對齊、定位