[css自學筆記]

Published on:

margin 與 padding 的差異


 margin  : 外邊距 - 調整border外的邊界-可以設定負値。
 padding : 內邊距 - 調整border內到內文之間的距離-不可以設定負值
 border  :  邊框 - 用來設計元素邊框的顏色、粗細與樣式



前提:margin 與 padding都是用來調整距離的

  • 控制元素外部與其它元素的關係用 margin
    兩個 span 標籤並排在一起,然後透過 margin 來控制彼此之間水平的距離,可以很清楚地看到 margin 數字加大,可以增加兩個 span 標籤之間的水平距離

  • 要控制元素內部的關係,就用 padding
    我們用 DIV 區塊來呈現 padding 的效果,在 DIV 區塊內隨意的寫了一段文字,然後透過 div 區塊的 padding 設定,讓文字與 DIV 區塊邊框間產生了一個距離,這個距離就是所謂的內距,第一個 DIV 區塊的 padding 設為 10px,第二個區塊的 padding 設為 20px,可以看到數字越大的 padding,內距呈現效果越明顯。padding 可以用來調整許多類似這樣網頁中的元素,適度的調整內距能夠讓整體的瀏覽視覺效果更加美觀。

參考資料:
Wibibi網頁設計教學
CSS學習筆記


什麼是 box model


  • box model 其實就是傳統的 HTML 區塊概念再進化,假設我們用了一個 DIV 區塊來放置內容,CSS 允許網頁設計師將 DIV 區塊看成一個盒子,透過控制內距的 padding、控制外距的 margin 以及控制元素邊框的 border 屬性來調整盒子的展現結果。

  • 範例一

  • 範例二

兩個範例的差別我只改了margin的數字,有發現區別嗎?
可以試著動手玩看看
Tryit Editor v3.3

參考資料:CSS box model 盒子模型


為何要使用 em 而非 px 來定義字的大小


px 為圖像的單位「像素」,而 em 則是相對單位。
使用 em 的好處在於:會隨用戶瀏覽器的設定變化,自行調整字體大小,不會因為瀏覽器或顯示器改變而被影響破壞。

  • px
    px是pixel縮寫,是基于像素的單位.在瀏覽網頁過程中,屏幕上的文字、圖片等會隨屏幕的分辨率變化而變化,一個100px寬度大小的圖片,在800×600分辨率下,要占屏幕寬度的1/8,但在1024×768下,則只占約1/10。所以如果在定義字體大小時,使用px作為單位,那一旦用戶改變顯示器分辨率從800到1024,用戶實際看到的文字就要變“小”(自然長度單位),甚至會看不清,影響瀏覽。

  • em
    em:即%,是相對單位,是一個相對長度單位,最初是指字母M的寬度,故名em。現指的是字符寬度的倍數,用法類似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。,一般用來測量長度的通用單位(例如元素周轉的頁邊空白和填充),當用于指定字體大小時,em單位是指父元素的字體大小。在一個頁面上給定了一個父元素的字體大小,這樣就可以通過調整一個元素來成比例的改變所有元素大小.它可以自由縮放,比如用來制作可伸縮的樣式表。

參考資料:字體大小的單位


h1 {margin : 10px 0px 15px 5px;} 回答以下問題:

margin-top: ?
margin-right: ?
margin-bottom: ?
margin-left: ?


  • CSS margin 的四個邊獨立寫法
    margin-top:與上方元素的距離
    margin-right:與右方元素的距離
    margin-bottom:與下方元素的距離
    margin-left:與左方元素的距離

  • 語法範例

    1. margin:上 右 下 左;  我們分別設定四個邊不同的値,依序為上右下左,每個値必須由空白隔開
    2. margin:上下 左右;  我們設定了兩個値,上下邊的外距都會一樣,而左右邊的外距會一樣
    3. margin:上 左右 下;  我們給了三個値,分別是上外距、左右外距與下外距,這樣設定左右邊的外距會一樣
    4. margin:四個邊同樣値; 我們只給了一個値,這樣代表四個邊的外距都一樣,算是比較簡短的寫法。
  • 題目解答: 使用的是語法範例1. 給了margin四個值
    margin-top: 10px
    margin-right: 0px
    margin-bottom: 15px
    margin-left: 5ps

參考資料:CSS margin 屬性與用法範例

Comments

comments powered by Disqus