盒子模型

CSS 在處理網(wǎng)頁(yè)的時(shí)候會(huì)認(rèn)為每個(gè)元素都是一個(gè)盒子，一個(gè)盒子分為以下幾個(gè)部分：
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ū)與邊框以?xún)?nèi)的空間 默認(rèn)情況下width和height不包含padding的大小?？梢允褂胮adding屬性來(lái)設(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分別制定四個(gè)方向的內(nèi)邊距

p{
   padding:10px,10px,10px,10px
}

邊框

可以在元素周?chē)鷦?chuàng)建邊框，邊框是元素可見(jiàn)框的最外部 可以同border屬性來(lái)設(shè)置盒子的邊框
邊框和內(nèi)邊距一樣，默認(rèn)width和height不包括邊框的寬度 ,也能使用border-top/left/right/bottom來(lái)指定邊框

置邊框的寬度、顏色、樣式

p{
    border:1px red solid
}

邊框的樣式
沒(méi)有 none； 點(diǎn)線(xiàn) dotted； 虛線(xiàn) dashed； 實(shí)線(xiàn) solid ；雙線(xiàn) double； 脊線(xiàn) ridge；凹線(xiàn) inset； 凸線(xiàn) outset

外邊距

外邊距是元素邊框與周?chē)叵嗑嗟目臻g 使用margin屬性設(shè)置外邊距

用法與內(nèi)邊距，邊框類(lèi)似，當(dāng)將左右外邊距設(shè)置為auto時(shí)，瀏覽器會(huì)將左右外邊距設(shè)置為相等，所以margin：0 ，auto可以是元素居中

display

不能為行內(nèi)元素設(shè)置width、height、margin-top和margin-bottom。因?yàn)樗麄冎贿m用于塊元素，這時(shí)我們可以通過(guò)修改display來(lái)修改元素的性質(zhì)。

可選值：

block 設(shè)置元素為塊元素
inline 設(shè)置元素為行內(nèi)元素
inline-block 設(shè)置元素為行內(nèi)塊元素
none （隱藏元素元素將在頁(yè)面內(nèi)完全消失）

visibility

主要適用于元素是否可見(jiàn)

和display的區(qū)別：使用display設(shè)置為none時(shí) ，元素徹底消失，使用visibility隱藏元素，隱藏后的元素在文檔中所占的位置依然存在，不會(huì)被其他元素覆蓋

可選值
visible 可見(jiàn)的
hidden 隱藏的

overflow

當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度和高度時(shí)，瀏覽器會(huì)讓內(nèi)容溢出盒子，

當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度和高度時(shí)，瀏覽器會(huì)讓內(nèi)容溢出盒子，

可選值：
visible 默認(rèn)值
scroll 添加滾動(dòng)條
auto 據(jù)需要添加滾動(dòng)條（比scroll更智能，能夠自行判斷）
hidden 隱藏超出盒子的內(nèi)容