學習前端第二天

html–Day02 盒模型

一、盒子模型

盒子模型是HTML是網頁中一個非常重要的知識點，也是學習HTML的基礎

（1）、border 邊框：元素邊框的樣式

單樣式:

• border-width大小
• border-style 樣式
• border-color 顏色

複合樣式:大小 類型 顏色

• border :width style color

邊框類型 ：border-style

• solid 實線
• dashed 虛線 （有兼容問題）
• dotted 點線 （有兼容問題）
• double 雙邊框

邊框類型：

• border-top 左邊框
• border-right右邊框
• border-bottom 下邊框
• border-left 左邊框

去除邊框:border:none;

=>padding會改變盒子大小

---

（2）、內邊距：內容與邊框直接的距離

單樣式:

• padding-top:頂部內距離
• padding-right:右邊內距離
• padding-bottom:底部內距離
• padding-left:左邊內距離

複合樣式：

• 四個值：padding:上 右 下 左
• 三個值：padding:上 左右 下
• 二個值：padding:上下 左右
• 一個值：padding: 四個方向相同的值；

=>padding會改變盒子大小

---

（3）、外邊距，元素距離其他元素的距離

單樣式:

• margin-top:頂部外距離
• margin-right:右邊外距離
• margin-bottom:底部外距離
• margin-left:左邊外距離

複合樣式：

• 四個值：margin:上 右 下 左
• 三個值：margin:上 左右 下
• 二個值：margin:上下 左右
• 一個值：margin: 四個方向相同的值；
• 盒子水平居中：
  
  • margin: auto || margin:top auto|| margin:top auto bottom

---

二、盒子模型計算公式

盒子寬度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border

---

三、盒子模型計算公式

1）px像素 是顯示器中大小單位
2）% 是相對父級大小的佔比;

---

四、color顏色:的多種值

• 英文（顏色英文單詞）
• 十六進制 （#00ff99）
• rgb（0-255,0-255,0-255）-三個值 r-red紅 g-green綠 b-blue藍
• rgba(0-255,0-255,0-25,0-1) 四個值 r-red紅 g-green綠 b-blue藍 a-透明度

---

五、color顏色:的多種值

width 寬度
height 高度
background 背景
border 邊框
padding 內邊距
margin 外邊距

---

六、外邊距合併

外邊距合併：
1.當兩個盒子嵌套，它的垂直外邊距相遇的時候，它的外邊距會顯示較大的哪個值；
解決方法：加邊框；加內邊距；
2.當兩個盒子相鄰，它的垂直外邊距相遇的時候，它的外邊距會顯示較大的哪個值；
記住：定位元素和浮動元素沒有外邊距合併 外邊距合併指的是，當兩個（垂直外邊距）相遇時，它們將形成一個外邊距。 合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

一：當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：

二：當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

註釋：只有普通文檔流中塊級的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。