盒子模式之邊框?qū)傩?/h2>

一、邊框?qū)傩?/h4>

1. 什么是邊框？

• 邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條。

2. 邊框?qū)傩缘母袷?/li>

• 1. 連寫. 同時(shí)設(shè)置四條邊的邊框的屬性。

1. border:邊框的寬度 邊框的樣式 邊框的顏色；

1.2.快捷鍵：bd+

1.3. 注意點(diǎn)：
1.3.1 連寫格式中顏色屬性可以省略，省略之后默認(rèn)就是黑色
1.3.2 連寫格式中樣式不能省略，省略之后就看不到邊框了。
1.3.3 連寫格式中，寬度可以省略，省略之后還是可以看到邊框

• 2. 連寫 分別設(shè)置四條邊的邊框

border-top:邊框的寬度 邊框的樣式 邊框的顏色；
border-right:邊框的寬度 邊框的樣式 邊框的顏色；
border-left:邊框的寬度 邊框的樣式 邊框的顏色；
border-bottom:邊框的寬度 邊框的樣式 邊框的顏色；
快捷鍵：bt+ ： border-top:1px solid #000:

二、邊框?qū)傩韵?/h4>

1. 連寫 分別設(shè)置四條邊的邊框

border-width：上 右 下 左
border-style: 上 右 下 左
border-color:上 右 下 左

注意點(diǎn)：

這三個(gè)屬性的取值是按照順時(shí)針來(lái)賦值，也就是按照上右下左來(lái)賦值。
這三個(gè)屬性的取值省略時(shí)的規(guī)律：
1.1 上 右 下 左（省略左） > 上 右 下>左邊的取值和右邊的一樣
1.2 上 右 > 左邊的取值和右邊一樣，下面的取值和上面的一樣
1.3 上>右邊，左邊， 和下，和上邊的一樣。

2. 不是連寫（方向+要素）

可以分別寫上右下左的屬性。

三、什么是內(nèi)邊距

1. 什么是內(nèi)邊距？

• 邊框和內(nèi)容之間的距離就是內(nèi)邊距。

2. 格式
   2.1 非連寫

padding-top:
padding-right::
padding-bottom:
padding-left:

2.2 連寫的方式：
padding： 上 右 下 左

3. 注意點(diǎn)：

這三個(gè)屬性的取值是按照順時(shí)針來(lái)賦值，也就是按照上右下左來(lái)賦值。
這三個(gè)屬性的取值省略時(shí)的規(guī)律：
1.1 上 右 下 左（省略左） > 上 右 下>左邊的取值和右邊的一樣
1.2 上 右 > 左邊的取值和右邊一樣，下面的取值和上面的一樣
1.3 上>右邊，左邊， 和下，和上邊的一樣。
給標(biāo)簽設(shè)置內(nèi)邊距之后，標(biāo)簽占有的寬度和高度會(huì)發(fā)生變化。
內(nèi)邊距也會(huì)有背景顏色。

四、外邊距

1. 什么是外邊距？

• 標(biāo)簽和標(biāo)簽之間的距離就是外邊距

2. 格式
   2.1 非連寫

margin-top:
margin-right;
margin-bottom:
margin-right:

2.2 連寫

margin:上 右 下 左;

注意點(diǎn)：

這三個(gè)屬性的取值是按照順時(shí)針來(lái)賦值，也就是按照上右下左來(lái)賦值。
這三個(gè)屬性的取值省略時(shí)的規(guī)律：
1.1 上 右 下 左（省略左） > 上 右 下>左邊的取值和右邊的一樣
1.2 上 右 > 左邊的取值和右邊一樣，下面的取值和上面的一樣
1.3 上>右邊，左邊， 和下，和上邊的一樣。

注意點(diǎn)：

• 外邊距是沒有背景顏色的。

五、外邊距的合并現(xiàn)象

1. 什么是外邊距合并現(xiàn)象？

• 在默認(rèn)布局的垂直方向上，默認(rèn)情況下外邊距是不會(huì)疊加的，會(huì)出現(xiàn)合并現(xiàn)象，誰(shuí)的外邊距比較大，就聽誰(shuí)的。

最后編輯于 ：2018.07.28 11:22:57

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。