有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際内容。
頁面中的每一個标簽，都可看做是一個 “盒子”，通過盒子的視角更友善的進行布局
浏覽器在渲染（顯示）網頁時，會将網頁中的元素看做是一個個的矩形區域，我們也形象的稱之為盒子
CSS 中規定每個盒子分别由：内容區域（content）、内邊距區域（padding）、邊框區域（border）、外邊距區域（margin ）構成，這就是 盒子模型 。
作用：利用 width 和 height 屬性預設設定是盒子 内容區域 的大小
屬性：width / height
常見取值：數字+px
作用：給設定邊框粗細、邊框樣式、邊框顔色效果
常見屬性：
屬性連寫
單個取值的連寫，取值之間以空格隔開
如：<code>border : 10px solid red;</code>
單方向設定：
屬性名：border - 方位名詞
屬性值：屬性的連寫
作用：設定 邊框 與 内容區域 之間的距離
常見取值：
<code>padding:10px;</code>
距離屬性取值數可有一個到四個，遵循從上開始指派，然後順時針指派，如果設定指派的，看對面的原則
屬性名：padding - 方位名詞
屬性值：數字 + px
作用：設定邊框以外，盒子與盒子之間的距離
<code>margin:10px;</code>
可使目前盒子往設定的方位移動
屬性名：margin - 方位名詞
設定width和height是内容的寬高，設定border和padding會撐大盒子
盒子寬度/高度 = 邊框 + padding + 内容寬度/高度
浏覽器會預設給部分标簽設定預設的margin和padding，但一般在項目開始前需要先清除這些标簽預設的
margin和padding，
水準布局 的盒子，左右的margin正常，互不影響
垂直布局 的 塊級元素，上下的margin會合并
互相嵌套 的 塊級元素，子元素的 margin-top 會作用在父元素上，導緻父元素一起往下移動
解決
給父元素設定border-top 或者 padding-top（分隔父子元素的margin-top）
給父元素設定<code>overflow：hidden</code>
轉換成行内塊元素
設定浮動
給行内元素設定margin和padding時無效