盒子模型
CSS 在處理網(wǎng)頁的時候會認(rèn)為每個元素都是一個盒子，一個盒子分為以下幾個部分：
1臼隔、內(nèi)容區(qū)：content
2寥假、內(nèi)邊距：padding
3、邊框 ：border
4疗隶、外邊距：margin
image.png
內(nèi)容區(qū)
p{
width:100px;
height:100px;
}
內(nèi)邊距
內(nèi)邊距指的是元素內(nèi)容區(qū)與邊框以內(nèi)的空間 默認(rèn)情況下width和height不包含padding的大小佑笋。可以使用padding屬性來設(shè)置元素的內(nèi)邊距
例1：
padding：10px抽减，5px允青，5px，10px（設(shè)置元素的上右下左的內(nèi)邊距）
例2：
padding:10px,10px,10px
(設(shè)置上卵沉，左右颠锉，下的內(nèi)邊距)
例3：
padding：10px，10px
(設(shè)置上下史汗，左右的內(nèi)邊距)
例4：
padding：10px
（設(shè)置上下左右的內(nèi)邊距）
另外在CSS中還提供了padding-top琼掠、padding-right、padding-left停撞、padding-bottom分別制定四個方向的內(nèi)邊距
p{
padding:10px,10px,10px,10px
}
邊框
可以在元素周圍創(chuàng)建邊框瓷蛙，邊框是元素可見框的最外部 可以同border屬性來設(shè)置盒子的邊框
邊框和內(nèi)邊距一樣，默認(rèn)width和height不包括邊框的寬度 ,也能使用border-top/left/right/bottom來指定邊框
置邊框的寬度戈毒、顏色艰猬、樣式
p{
border:1px red solid
}
邊框的樣式
沒有 none； 點線 dotted埋市； 虛線 dashed冠桃； 實線 solid ；雙線 double道宅； 脊線 ridge食听；凹線 inset； 凸線 outset
外邊距
外邊距是元素邊框與周圍元素相距的空間 使用margin屬性設(shè)置外邊距
用法與內(nèi)邊距污茵，邊框類似樱报，當(dāng)將左右外邊距設(shè)置為auto時，瀏覽器會將左右外邊距設(shè)置為相等泞当，所以margin：0 迹蛤，auto可以是元素居中
display
不能為行內(nèi)元素設(shè)置width、height、margin-top和margin-bottom笤受。因為他們只適用于塊元素穷缤，這時我們可以通過修改display來修改元素的性質(zhì)。
可選值：
block 設(shè)置元素為塊元素
inline 設(shè)置元素為行內(nèi)元素
inline-block 設(shè)置元素為行內(nèi)塊元素
none （隱藏元素元素將在頁面內(nèi)完全消失）
visibility
主要適用于元素是否可見
和display的區(qū)別：使用display設(shè)置為none時 箩兽，元素徹底消失津肛，使用visibility隱藏元素，隱藏后的元素在文檔中所占的位置依然存在汗贫，不會被其他元素覆蓋
可選值
visible 可見的
hidden 隱藏的
overflow
當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度和高度時身坐，瀏覽器會讓內(nèi)容溢出盒子，
當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度和高度時落包，瀏覽器會讓內(nèi)容溢出盒子部蛇，
可選值：
visible 默認(rèn)值
scroll 添加滾動條
auto 據(jù)需要添加滾動條（比scroll更智能，能夠自行判斷）
hidden 隱藏超出盒子的內(nèi)容
