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
xxxxxxxxxx
tags:
iron man
Day21 Box-model
Box model
box-model是CSS的基礎概念。我們在HTML檔中寫入很多元素,在瀏覽器渲染時,我們可以在畫面上看到一個個區域,個別裝著不同的內容,這個矩形區域是每個元素所產生的element box(元素盒),而box是由下列部分組成的:
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →content area
(內容區域)元素的內容會放在這個區域,像是文字、圖片、子元素。content area的範圍通常是元素的寬高值,或是由內容來撐開的範圍。
內容撐開的範圍(邊框內的區域就是content area)
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →寬高值撐開的範圍
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →padding
(內距)padding通常用來撐出元素內部空間,可以透過屬性聲明內距,如果padding的數值是0的話,那padding box的大小就是會content area的大小。
padding又可以拆解成padding-top、padding-right、padding-bottom、padding-left。
用開發者介面來看,就可以看到綠色區域是padding的範圍。

border
(邊框)可以透過border屬性設定樣式,如果border的數值是0,那border box的大小就是會padding box的大小。
border也可以拆解成上下左右來聲明樣式。
可以看CSS基本樣式-border&outline了解樣式聲明。
margin
(邊界範圍)margin通常用來當元素與元素之間的距離,所以也常稱它為外邊距。它也可以拆解成上下左右來聲明外距。
block元素的margin:
橘色的區域是margin,上下左各是30px,可是怪怪的,為什麼右邊不是30px?這是因為

<div>
是block element,所以在box生成的當下,它就會佔滿父元素的寬度,而block元素的的水平margin則是扣掉content area、padding、border寬度後,剩下的寬度都會被margin撐滿。inline元素的margin:
橘色的區域是margin,雖然我們對元素四周都設了

margin:30px
,但垂直方向的margin值對inline是無效的,水平方向有margin值,並且不會佔滿整個寬度。outline
(輪廓)輪廓不佔空間,所以也常常不被算在box組成之一。上一篇有說到outline的樣式跟border很像,可是它不佔空間,不管它的outline-width有多大,都不會被計算在元素所佔的空間裡。
outline無法拆解成上下左右聲明樣式。
可以看CSS基本樣式-border&outline了解樣式聲明。
我們把兩個box的寬設40%,padding-left設5%,margin-left設5%。
計算兩個box所佔的空間 `40%*2+5%*2+5%*2=100%。兩個box所佔的空間剛好是100%,剛好佔滿父元素的寬度。

如果同樣條件,再加個
border:10px
進去。就會超過100%,第二個元素被擠到下面去。但把border換成outline,它的10px不會佔到空間,所以兩個box的寬度仍然是100%,不會有元素被擠到下面。
CSS的box model筆記告一段落,這個概念在切版上很常遇到。接下來會在講跟box model也有關的box-sizing跟margin collapse,那就明天見~
*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。