29. 網頁容器介紹
所有的網頁都像是一個容器,以一個元素包覆著另一個元素,並且,這些元素都有著不同的特性,如此才能滿足使用者各方面的需求。
最常見的容器標籤是:
<div></div>
30. CSS Reset – 清空瀏覽器預設樣式
有時為了滿足設計上的需要,必須得清除瀏覽器內針對 HTML 元素的預設樣式,此時,就會需要用到 CSS Reset 這樣的工具。
31. display: block 區塊元素介紹
區塊(block)元素預設會佔滿整個寬度,因此當區塊元素並排時,預設會呈現出垂直排列的效果。
32. display: inline 行內元素介紹
行內(inline)元素不會佔滿整個版面,因此時常被用來在一個段落內作為標示(<span> 標籤)或是連結(<a> 標籤)。
行內元素無法修改寬跟高,如果要針對行內元素進行寬跟高的調整,那就必須用以下的 CSS 程式碼將行內元素變為區塊元素:
display: block;
35. margin 產生外邊界距離
margin 屬性是用來將一個元素跟其它元素產生間距,值可以為負的。 margin 的寫法如下:
- margin (四邊都推)
- margin-top
- margin-right
- margin-bottom
- margin-left
36. padding 產生留白距離
padding 屬性是用來將一個容器內的元素向內推,值不可以為負的。 padding 寫法如下:
- padding (四邊都推)
- padding-top
- padding-right
- padding-bottom
- padding-left
38. Box Model(盒模型)詳細介紹
一個 HTML 容器從內到外的結構為:content、padding、border、margin。除了 margin 外,其它屬性都會影響到一個元素的整體寬度,進而影響排版。
39. margin 0 auto 區塊水平置中
可以在一個區塊元素上加上以下程式碼,讓該元素依照瀏覽器的寬度始終維持水平置中對齊:
margin: 0 auto;
40. text-align 文字水平調整
在一個包著段落的區塊元素上加上以下程式碼,可以讓該段落水平置中對齊:
text-align: center;
41. 2020補充教材:不想算盒模型的推擠?試試 CSS3 box-sizing 吧!
可以使用全域選擇器加入以下語法,讓內距被忽略不計,所有區塊元素都會是原先定義的寬度與高度,不受 border 與 padding 的影響:
box-sizing: border-box;