iron man
box-model是CSS的基礎概念。我們在HTML檔中寫入很多元素,在瀏覽器渲染時,我們可以在畫面上看到一個個區域,個別裝著不同的內容,這個矩形區域是每個元素所產生的element box(元素盒),而box是由下列部分組成的:
content area
(內容區域)
元素的內容會放在這個區域,像是文字、圖片、子元素。content area的範圍通常是元素的寬高值,或是由內容來撐開的範圍。
內容撐開的範圍(邊框內的區域就是content area)
span {
border: 1px solid #000;
}
寬高值撐開的範圍
div {
width: 300px;
height: 100px;
border: 1px solid #000;
}
inline元素content area的無法用設定寬與高,只能用內容來撐出範圍 ; block元素的content area除了內容會撐開範圍,也可以用寬高來設定範圍。
padding
(內距)
padding通常用來撐出元素內部空間,可以透過屬性聲明內距,如果padding的數值是0的話,那padding box的大小就是會content area的大小。
padding又可以拆解成padding-top、padding-right、padding-bottom、padding-left。
span {
border: 1px solid #000;
padding: 30px;
}
用開發者介面來看,就可以看到綠色區域是padding的範圍。
border
(邊框)
可以透過border屬性設定樣式,如果border的數值是0,那border box的大小就是會padding box的大小。
border也可以拆解成上下左右來聲明樣式。
可以看CSS基本樣式-border&outline了解樣式聲明。
margin
(邊界範圍)
margin通常用來當元素與元素之間的距離,所以也常稱它為外邊距。它也可以拆解成上下左右來聲明外距。
先前我們提過html就是由block元素跟inline元素來結構內容,block元素會佔滿父元素的寬度,垂直排列 ; inline元素會不佔滿寬度水平排列,直到寬度撐不下去才換到下一行。
block元素的margin:
div {
width: 300px;
height: 50px;
padding: 30px;
border: 1px solid #000;
margin: 30px;
}
橘色的區域是margin,上下左各是30px,可是怪怪的,為什麼右邊不是30px?這是因為<div>
是block element,所以在box生成的當下,它就會佔滿父元素的寬度,而block元素的的水平margin則是扣掉content area、padding、border寬度後,剩下的寬度都會被margin撐滿。
inline元素的margin:
span {
border: 1px solid #000;
margin: 30px;
}
橘色的區域是margin,雖然我們對元素四周都設了margin:30px
,但垂直方向的margin值對inline是無效的,水平方向有margin值,並且不會佔滿整個寬度。
outline
(輪廓)輪廓不佔空間,所以也常常不被算在box組成之一。
上一篇有說到outline的樣式跟border很像,可是它不佔空間,不管它的outline-width有多大,都不會被計算在元素所佔的空間裡。
outline無法拆解成上下左右聲明樣式。
可以看CSS基本樣式-border&outline了解樣式聲明。
我們把兩個box的寬設40%,padding-left設5%,margin-left設5%。
div {
width: 40%;
padding-left: 5%;
margin-left: 5%;
}
計算兩個box所佔的空間 `40%*2+5%*2+5%*2=100%。兩個box所佔的空間剛好是100%,剛好佔滿父元素的寬度。
div {
width: 40%;
padding-left: 5%;
margin-left: 5%;
border: 10px solid #000;
}
如果同樣條件,再加個border:10px
進去。就會超過100%,第二個元素被擠到下面去。
div {
width: 40%;
padding-left: 5%;
margin-left: 5%;
outline: 10px solid #000;
}
但把border換成outline,它的10px不會佔到空間,所以兩個box的寬度仍然是100%,不會有元素被擠到下面。
div {
width: 40%;
padding-left: 5%;
margin-left: 5%;
border: 10px solid #000;
}
CSS的box model筆記告一段落,這個概念在切版上很常遇到。接下來會在講跟box model也有關的box-sizing跟margin collapse,那就明天見~
*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。
or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Syncing