盒子的水平布局（橫向布局）
- margin-left 左外邊距
- border-left 左邊框
- padding-left 左內邊距
- width 內容區寬度
- padding-right 右內邊距
- border-right 右邊框
- margin-right 右外邊距
一個子元素在其父元素中，必須滿足以下的等式
左外邊距 + 左邊框 + 左內邊距 + 寬度 + 右內邊距 + 右邊框 + 右外邊距
盒子的垂直方向布局
默認情況下父元素的高度被內容區撐開，子元素是在父元素的內容區內排列的，如果子元素的高度超過父元素的高度，子元素就會從父元素中溢出。
使用 overflow 屬性來處理溢出的子元素
1、overflow 屬性處理溢出的子元素
屬性值：
visible：默認值，子元素會從父元素中溢出，在父元素外部的位置顯示。
hidden：隱藏，溢出的內容會被裁剪不會出現。
scroll：滾動，生成兩個滾動條，通過滾動條來查看完整的內容
auto：自動，根據需要自動生成滾動條。
2、overflow-x: 指定是否要剪輯的左/右邊緣的內容
overflow-y：指定是否要剪輯頂部/底部邊緣的內容
屬性值：
visible：可見，不剪裁內容，可能會顯示在內容框之外
hidden：剪裁內容，不滾動
scroll：剪裁內容，有滾動條
auto：自動
no-display：不顯示，如果內容不適合內容框，則刪除整個框。
no-content：如果內容不適合內容框，則隱藏整個內容。
3、overflow-wrap：用來說明當一個不能被分開的字符串太長而不能填充其包裹盒子時，為防止其溢出，瀏覽器是否允許這樣的單詞中斷換行。
對過長的單詞進行換行是將 空格 作為單詞之間的分割進行換行
屬性值：
normal：默認值，表示在正常單詞結尾處換行
break-word：表示如果行內沒有多余的地方容納該單詞到結尾，則那些正常的不能被分割的單詞會被強制分割換行。
anywhere：任何地方，為了防止溢出，如果行中間沒有其他可以接受的斷點，則可以在任何點上斷開本來無法斷開的字符串（如長字符或URL）在斷點處沒有插入連字符。在計算最小內容內在大小時，考慮了考慮了斷字引入的軟包機會。
4、overflow-block：設置內容溢出塊開始和塊結束邊時顯示的內容
屬性值：
visible：內容不會被剪切，並且可能在填充框的塊開始和塊結束邊緣之外呈現。
hidden：如果有必要，內容將被裁剪以適合填充框中的塊尺寸。沒有提供滾動條。
scroll：如果有必要，內容將被裁剪以適合填充框的塊尺寸。瀏覽器顯示滾動條，無論是否實際剪切了任何內容。（這可以防止在內容更改時滾動條出現或消失。）打印機可能仍會打印溢出的內容。
auto：取決於用戶代理。如果內容適合填充框，則其外觀與相同visible，但仍會建立新的塊格式上下文。如果內容溢出，桌面瀏覽器會提供滾動條。
5、overflow-anchor：溢出錨點CSS屬性提供了一種退出瀏覽器滾動錨定行為的行為的方式，該行為會調整滾動位置以最大程度減少內容的偏移
屬性值：
auto：自動，調整滾動位置時，該元素將成為潛在的錨點。
none：該元素將不會被選作為潛在的錨點。