盒模型
- HTML中，萬物皆是盒模型
- 只要HTML中的標籤，你都可以通過設置盒模型相關的內容，對這個元素產生影響
盒模型的組成
- 月餅 content ：width；height
- 填充物 padding：內邊距
- 月餅盒 border：邊框
- 月餅盒外 margin：外邊距
content
- width
- height
背景
- 設置背景顏色：background-color 顏色的寫法
- 1、英文
- 2、#ffffff
- 3、rgb()
- 4、rgba()
- 設置背景圖片：background-image url()
- 設置背景重複方式：background-repeat
- 1、repeat（重複）
- 2、repeat-x
- 3、repeat-y
- 4、no-repeat
- 設置背景定位：background-position：如果設置了一個數值，另外一個數值默認是center
- 背景的複合寫法：background
- 書寫順序：
- 1、顏色
- 2、圖片
- 3、定位
- 4、重複方式
- 背景隨着頁面的滾動：background-attachment，會造成偏移
- scroll：滾動，默認值
- fixed：固定的
- 設置背景圖片尺寸：background-size： CSS 3 的屬性，可以設置背景圖片的大小
padding
- 用於控制 盒子內容 和 盒子邊框 之間的位置
- 內邊距
- padding-top
- padding-right
- padding-bottom
- padding-left
- 複合寫法
- 如果四個值，分別對應：上、下、左、右
- 如果三個值，分別對應：上、左右、下
- 如果兩個值，分別對應：上下、左右
- 如果一個值，四周都相同
border
- 邊框
- border
- 書寫順序
- 寬度
- 樣式
- 顏色
- 樣式
- solid：實線
- double：如果寬度爲1px，無效果
- dotted：點狀線，在大部分瀏覽器顯示爲實線
- dashed：虛線，在大部分瀏覽器顯示爲實線
- border-width
- border-color
- border-style
- border-radius：CSS3的屬性
margin
- 外邊距
- 專門用於控制盒子和盒子之間的一個位置
- 可以設置負數
- margin有兩種特殊情況：
- 如果兩個元素是兄弟關係：第一個元素的 margin-bottom 和第二個元素的 margin-top 會產生疊壓(去絕對值最大值)
- 如果兩個元素是父子關係：子級第一個元素的margin-top會傳遞給父級
- 解決方案：
- 給父級設置邊框
- 給父級設置 overflow：hidden
- 給父級設置 padding 注意盒子的大小
盒模型的實際大小
橫向：border-left + padding-left + width + padding-right + border-right
縱向：border-top + padding-top + height + padding-bottom + border-bottom