HTML——盒模型
前端新手——盒模型
- 一、盒模型的概念
- 二、盒模型的組成
- 1.內容區
- 2.內邊距padding
- 3.邊框border
- 4.外邊距margin
- 三、總結
一、盒模型的概念
每一個標簽都是一個矩形，像一個盒子，所以HTML頁面布局可以理解為多個盒子組合嵌套排列而成。
由圖片可以看到，當我們選擇一個元素查看時，這個元素會被看成一個盒子，有寬度（width），高度（height），內邊距（padding）,外邊距（margin）。而一個盒子的邊框，內邊距，內容區決定大小，而外邊距決定盒子的位置。
二、盒模型的組成
1.內容區
盒子的內容區由width和height決定大小的，我們寫的內容只能放在內容區。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>邊框</title><style>div{width: 100px;height: 100px;}</style> </head> <body><div>aaa</div> </body> </html>由下圖元素查看及運行結果可以看到，我們的內容顯示在內容區，且內容區寬度和高度均為設置的100px
2.內邊距padding
接下來我們給盒子設置它的內邊距，直接修改上面這一段代碼的內部樣式表，可以看出盒子由之前的100100變成了120120，因為給padding設置了四個方向的padding，均為10px，所以寬高各增加20px。
<style>div{width: 100px;height: 100px;padding:10px;}</style>
注意
1. 可以設置1-4個值，四個值時方向順序為：上右下左；三個值時：上（左右）下
兩個值時：（上下）（左右）一個值時:四個方向同時設置
2.順時針賦值，從上內邊距開始
3.增加盒模型面積
4.padding有四個方向也可單獨設置，格式為padding-方向，如padding-top為上邊框
3.邊框border
我們可以把邊框看成一個盒子的最外邊的包裝，它的屬性包括width寬度，style類型，color顏色，這是一個符合屬性。我們再次修改上面代碼的內部樣式表，給盒子加一個邊框。
<style>div{width: 100px;height: 100px;padding:10px;border: 1px solid red;}</style>由運行結果可看出，此時盒子變成了122*122，因為上下左右均增加了1px的邊框，增加了盒子面積。
注意
border-style:solid;
4.外邊距margin
外邊距不會改變盒子大小，但會影響元素位置。
<style>div{width: 100px;height: 100px;margin: 10px;}</style>此時撤去padding和border，只設置margin
注意
原因：常態下，父級的第一個子級標簽是塊標簽，并且使用了margin或 margin-top
解決方案 ：1.在父級使用border
2.不使用margin-top，在父級使用padding-top
3.在父級使用overflow：hidden
三、總結
網頁中的各個元素都可以看成是一個一個的盒子，通過對盒子的擺放，形成對網頁的布局。
總結
- 上一篇： java将汉字转成拼音首字母大写字母_j
- 下一篇： 神奇宝贝HTML游戏代码,《我的世界》神