盒子模型
- CSS 在處理網(wǎng)頁的時候會認為每個元素都是一個盒子，一個盒子分為以下幾個部分：
1、內(nèi)容區(qū)：content
2、內(nèi)邊距：padding
3、邊框 ：border
4、外邊距：margin
內(nèi)容區(qū)
內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素的文本內(nèi)容，子元素也是存在于內(nèi)容區(qū)的， 可以通過width和height兩個屬性設(shè)置內(nèi)容區(qū)的大小
但是，width和height屬性只適用于塊元素
p{
width:100px;
height:100px;
}
內(nèi)邊距
內(nèi)邊距指的是元素內(nèi)容區(qū)與邊框以內(nèi)的空間 默認情況下width和height不包含padding的大小?？梢允褂胮adding屬性來設(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)邊距一樣，默認width和height不包括邊框的寬度 ,也能使用border-top/left/right/bottom來指定邊框
設(shè)置邊框的寬度、顏色、樣式
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)容溢出盒子，
- 可以通過oxerflow來控制內(nèi)容溢出的情況
可選值：
visible 默認值
scroll 添加滾動條
auto 據(jù)需要添加滾動條（比scroll更智能，能夠自行判斷）
hidden 隱藏超出盒子的內(nèi)容
