一篇文章带你实操代码理解盒子模型
生活随笔
收集整理的這篇文章主要介紹了
一篇文章带你实操代码理解盒子模型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）
目錄
- 一、盒子模型的幾個關鍵詞
- 二、盒子有尺寸，用CSS寫法為寬度（width）和高度（height）
- 三、盒子有邊框，用CSS寫法為上下左右邊框（border）
- 3.1邊框線型 border-style
- 3.2邊框顏色
- 3.3邊框的復合屬性
- 3.4單獨控制上下左右邊框
- 3.4.1上邊框 border-top
- 3.4.2下邊框 border-bottom
- 3.4.3左邊框border-left
- 3.4.4右邊框border-right
- 四、盒子有內邊距，用CSS寫法為上下左右內邊距（padding）
- 4.1padding的復合屬性
- 4.2單獨控制上下左右邊框
- 4.2.1上邊內邊距 padding-top
- 4.2.2底邊內邊距 padding-bottom
- 4.2.3左邊內邊距 padding-left
- 4.2.4右邊內邊距 padding-right
- 五、盒子有外邊距，用CSS寫法為外邊距（margin）
- 5.1margin的復合屬性
- 5.2單獨控制上下左右邊框
- 5.2.1上邊外邊距 margin-top
- 5.2.2下邊外邊距 margin-bottom
- 5.2.3左邊外邊距 margin-left
- 5.2.4左邊外邊距 margin-left
- 六、盒子模型實例
- 七、如何隱藏一個元素
一、盒子模型的幾個關鍵詞
內容(content)、填充(padding通俗講就是內邊距)、邊框(border)、邊界(margin通俗講就是外邊距)。
用圖片來演示一下
簡單用畫圖工具演示一下就是
二、盒子有尺寸，用CSS寫法為寬度（width）和高度（height）
定義盒子的寬度和高度
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;background-color: blue;}</style></head><body><div id="box1">Hello, I am box1</div></body> </html>運行結果
注意：只有塊元素才可以設置寬度和高度，行內元素無法設置寬度和高度。
三、盒子有邊框，用CSS寫法為上下左右邊框（border）
3.1邊框線型 border-style
參數：
none : 無邊框 dotted : 點線邊框 dashed : 虛線邊框 solid : 實線邊框 double : 雙線邊框
3.2邊框顏色
檢索或設置對象的邊框顏色。
語法：
3.3邊框的復合屬性
語法：
border : border-style||border-width|| border-color例如我要設置 p標簽的邊框為： 線型實線 ， 寬度20px ， 顏色為紅色
p { border: solid 20px red; }3.4單獨控制上下左右邊框
3.4.1上邊框 border-top
檢索或設置對象的上邊框。這是一個復合屬性。
語法：
例如我要設置 p標簽的上邊框為： 線型實線 ，寬度20px ， 顏色為紅色。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;border-top: solid 20px red;}</style></head><body><div id="box1">Hello, I am box1</div></body> </html>運行效果
3.4.2下邊框 border-bottom
檢索或設置對象的下邊框。這是一個復合屬性。
語法：
比如我要設置 p標簽的下邊框為： 寬度2px ， 線型實線 ， 顏色為紅色 。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;border-bottom: 20px solid red;}</style></head><body><div id="box1">Hello, I am box1</div></body> </html>運行效果
3.4.3左邊框border-left
3.4.4右邊框border-right
左邊框 border-left、右邊框 border-right同上
四、盒子有內邊距，用CSS寫法為上下左右內邊距（padding）
4.1padding的復合屬性
檢索或設置對象四邊的內邊距，換句話說，也就是邊框與內容之間的距離。
語法：
例如我要邊框與內容之間的距離為50px
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;border: 20px solid red;padding: 50px;}</style></head><body><div id="box1">Hello, I am box1</div></body> </html>運行效果
注意：
如果只提供一個，將用于全部的四條邊。
如果提供兩個，第一個用于上－下，第二個用于左－右。
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。
如果提供全部四個參數值，將按上－右－下－左的順序作用于四邊。
4.2單獨控制上下左右邊框
4.2.1上邊內邊距 padding-top
檢索或設置對象的上邊內邊距。
語法：
運行結果
4.2.2底邊內邊距 padding-bottom
檢索或設置對象的下邊內邊距。
語法：
運行結果
4.2.3左邊內邊距 padding-left
4.2.4右邊內邊距 padding-right
左邊內邊距padding-left、右邊內邊距padding-right同上
五、盒子有外邊距，用CSS寫法為外邊距（margin）
5.1margin的復合屬性
檢索或設置對象四邊的外邊距。
語法：
運行結果
注意：
如果只提供一個，將用于全部的四條邊。
如果提供兩個，第一個用于上－下，第二個用于左－右。
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。
如果提供全部四個參數值，將按上－右－下－左的順序作用于四邊。
外邊距在不同瀏覽器的效果會有很大不同，建議盡量少用。
5.2單獨控制上下左右邊框
5.2.1上邊外邊距 margin-top
檢索或設置對象的上邊外邊距。
語法：
運行結果
5.2.2下邊外邊距 margin-bottom
檢索或設置對象的下邊外邊距。
語法：
運行結果
5.2.3左邊外邊距 margin-left
5.2.4左邊外邊距 margin-left
左邊外邊距 margin-left、左邊外邊距 margin-left同上
六、盒子模型實例
要把頁面布局好，需要注意：
附加：如何隱藏一個元素？
七、如何隱藏一個元素
看上面的代碼和注釋就知道了！把注釋去掉，拿去運行運行！希望可以幫到你哈哈哈
總結
以上是生活随笔為你收集整理的一篇文章带你实操代码理解盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 禅道的基本使用（创建项目、维护部门、用户
- 下一篇： 【资讯】全球瞩目！无人驾驶真的来了！