盒子模式 (box model)
盒子模式用來定義一個元素的邊界、邊框、內距等內容,我們可以把每一個畫面上的元素視為一個方塊,在 CSS 排版上是很重要的概念。
常用的相關指令為:
- padding (內距)
- border (邊框)
- margin (邊緣)
內距 (padding)
內距 padding
padding 就是內容和邊裝間的距離,可以分為上下左右分別設定個別距離。
#box { padding-top:40px; padding-bottom:10px; padding-left:80px; padding-right:30px; border: 1px solid #000000; width: 340px; }
<div id="box"> 上面距離邊框40 px,下面 10px。 </div>
以上會顯示為:
上面距離邊框40 px,下面 10px。
我們也可以把上下左右的內距寫在同一行,但是順序是順時針由上開始,不能弄錯 padding:上px 右px 下px 左px;
上面的 padding 值也可以寫為:
padding: 40px 30px 10px 80px;
邊框 (border)
邊框 border
border 的屬性有以下幾種:
- border-color
- border-width
- border-style
- border-top-, border-left-, border-bottom-, border-right-
- border
• border-color
p {border-color:#0000FF;}
以上將顯示為:
邊框為紅色
• border-width
邊框的粗細,除了可以設定為值以外,也可以用 thin(細), medium(中), thick(粗) 來表示。
p {border-width:9px; border-style:solid;}
邊框9px
p {border-width:thin; border-style:solid;}
細邊框
• border-style
p {border-style:solid;} |
實線 |
p {border-style:double;} |
雙線 |
p {border-style:dashed;} |
虛線 |
p {border-style:dotted;} |
點線 |
p {border-style:ridge;} |
凸線 |
p {border-style:groove;} |
凹線 |
p {border-style:outset;} |
凸起線 |
p {border-style:inset;} |
陷入線 |
• border-top-, border-left-, border-bottom-, border-right-
邊框的四邊可以分開宣告屬性,再加上可以一次設定3種屬性的值,順序不拘。
p { border-top:solid 5px red; border-bottom:dotted 6px #C0C0C0; border-left:dashed 8px #FF6699; border-right:double 4px #a0a0a0; }
邊框分開設定樣式
• border
如果4個邊都要宣告一樣的樣式,就只要用 border 屬性就好了,不用上下左右宣告4次。
p { border:#FFCC99 3px solid; }
4邊用一樣的樣式
邊緣 (margin)
邊緣 margin
邊緣(margin)屬性和內距(padding) 一樣,可以方上下左右設定,也可以用一行直接設定上、右、下、左,這個順序是固定的,不能隨意調動。
#boxmargin { margin-top:30px; margin-left:10%; margin-right:20px; margin-bottom:15px; border: 1px solid #000000; }
內容
*小訣竅:將一個塊狀元素放到另一個塊狀元素裡面時,如果出現 margin-top 明明有設距離,但是卻貼在外元素的頂端。
以上面為例,當宣告 margin-top:30px ,但是橘色的框框卻貼在藍色框框的上緣,要怎麼處理。
這時候通常把藍色框框宣告邊框屬性就會解決了。比如說上面的藍色框框就宣告了 border: 1px solid gray; 的外框屬性。
上面兩個盒子的語法如下:
<div style="background-color: #0099cc; height: auto; width: 350px; border: 1px solid gray;"> <div style="border: 1px solid #000000; background-color: #ff9900; margin: 30px 20px 15px 10%;">內容</div> </div>