盒子模型：margin，boder，padding，content
content
- min-width：底線寬度
- max-width：最大寬度，看瀏覽器
- min-height：底線高度
- max-height：最大高度
預設寬度：當沒有給 width 屬性時候
內容區=父的content-自身的左右margin-自身左右border-自身左右padding
總寬度=父的content-自身的左右margin
盒子的內邊距 padding
- 左側內邊距：
padding-left:20px - 右側內邊距：
padding-right:20px - 上內邊距：
padding-top - 底邊內邊距：
padding-bottom - 複合屬性
padding: 10px 20px 30px(上邊距 左右邊距 下邊距)padding: 10px 20px 30px 40px(上邊距 右邊距 下邊距 左邊距)padding: 10px 20px(上邊距 下邊距)
ps：行內元素的行下內邊距可能不會完美設定，可能與塊元素會重疊
盒子的邊框 broder
預設邊框的寬度是 3
- 左邊框寬度：
border-left-width同理 右上下 - 右邊框顏色：
border-right-color同理 左上下 - 上樣式：
border-right-style同理 左右下 - 三個屬性相同方向的複合：
broder-left: 10px soild red同理 上下左右
盒子的外邊距 margin
margin-left，margin-right，margin-top``margin-bottom，複合margin- 子元素的 margin，是從父元素的 content 開始算
- **上、左 margin 會影響自身位置，下、右 margin **會影響兄弟位置
- 行內元素設定上下margin是無效的
- 對於塊內元素，左右margin 值均是 auto，效果上水平居中
- margin 值可以為負值
margin 的塌陷問題：
給第一個兒子元素一個margin-top，之後竟然其父元素在動，子元素並沒有達到原來效果；給最後一個子元素 margin-bottom，也被父元素搶走。
解決：給父元素增加溢位文字的顯示屬性：overflow：hidden；
margin 的合併問題
相鄰上下元素的 margin 會出現合併現象，上元素的下邊距和下元素的上邊距，左右邊距不會出現合併
處理內容的溢位問題
overflow: 屬性值
- visable：顯示預設
- auto：自動顯示捲軸，內容不溢位不顯示
- scroll：不管溢位，會出現捲軸
- hiden：隱藏
overflow-x 和 overflow-y 不建議使用，不可以一個 hiden 一個 visable