iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

網頁前端基礎&Vue.js系列 第 14

CSS BOX Model(模型)(DAY14)

CSS BOX MODEL的意思是每個html元素都用一個像是方型盒子的模型包裝起來,它可以讓我們調整方型盒子的外觀樣式與每個盒子間的排列方式等等,而排列方式就會使用這篇將會介紹到的display屬性,也會介紹定義box model大小的box-sizing屬性!

  • BOX MODEL

https://ithelp.ithome.com.tw/upload/images/20210927/20140225bP3JONypfA.png
Content(內容):文字、圖片等html元素
Padding(內距):content與border之間的距離
Border(邊框)
Margin(邊距)
補充:若想在網頁中查看box model,可以在網頁中按滑鼠右鍵,然後點選”檢查”,或是按f12鍵,就可以看到像下面這張圖的樣子(開發者工具)。
https://ithelp.ithome.com.tw/upload/images/20210926/20140225eAm6T5JrGS.png
在前面幾篇的文章我們有看過paddingborder等元素,應該有稍微了解一些了,這邊再以上面這張圖詳細的介紹一下box model的四個屬性。我們看到box model中的 藍色區域(content) 就是html中影片本身的元素; 綠色區域(padding) 是影片和border邊框之間的距離(html影片元素四邊的padding都設為5px); 黃色區域(border) 是邊框(屬性值設為double樣式); 橘色區域(margin) 則是邊距(屬性值設為5px,在這5px距離間不會有任何其他的元素)。

在網頁中的樣子:

https://ithelp.ithome.com.tw/upload/images/20210926/20140225daaKqnzDAr.png
補充: 在box model中四個屬性的屬性值中我們不但可以使用px,也可以使用其他單位,像是%,em等。在上面的範例中margin:5pxpadding:5px,是將四邊都調整成5px的距離,若想要指定特定的一邊來設定距離呢?我們就可以在margin、border、padding屬性的後面加上
-left-top-right-bottom關鍵字,像是margin-left(邊距的左方)這個樣子!

  • box-sizing

box-sizing是用來調整box model大小的屬性,它有蠻多種屬性值可以用的,這邊介紹2種比較常使用到的:

  1. box-sizing: content-box
    (預設屬性值)
    https://ithelp.ithome.com.tw/upload/images/20210926/20140225L478iYtkDO.png
  2. box-sizing: border-box
    (元素內容將會自動內縮調整)
    https://ithelp.ithome.com.tw/upload/images/20210926/20140225v47ZZzVELw.png
  • display

display是用來控制排版的元素,常見的幾種屬性有:

  1. none(不顯示元素):html元素將會消失。
  2. block(區塊元素)(由上而下排列):
    將會占據一整行的空間,不會有其他html元素與它左右並排,可以調整邊距、長寬的屬性。在div元素中不會有作用,因div元素本身就會換行,且本身就是區塊元素,常見的區塊元素還有pform等。
  3. inline(行內元素) (由左至右排列):
    不換行,會左右並排顯示,常見的行內元素有spanaimg,而span和a元素不能也不需要再去調整邊距、長寬的屬性!
  4. inline-block(行內與區塊元素):
    兩種元素性質的結合,能夠左右並排顯示,也可以調整邊距、長寬等屬性!

https://ithelp.ithome.com.tw/upload/images/20210926/20140225a7agV9Zccg.png

<head>
    <meta charset="utf-8" />
        .none {
            display: none;
        }
        .block {
            display:block;
            background-color:antiquewhite;
        }
        .inline{
            display:inline;
            background-color:aquamarine
        }
    </style>
</head>
<body>
    <h1 class="none">我會消失喔,不會出現在網頁上!</h1>
    <span class="block">區塊元素,我將會佔據整行</span>我再下一行瞜!
    <div class="inline">div元素本來會換行,現在不會了喔!</div>我變成左右並排!
</body>

結語

這篇文章介紹了CSS的box model四個非常重要的屬性觀念,也介紹了調整box model大小的屬性box-sizing和用來控制排版的元素display,下一篇將會介紹控制html元素在網頁中位置的屬性!


上一篇
CSS背景屬性與動態效果(DAY13)
下一篇
CSS 定位屬性(DAY15)
系列文
網頁前端基礎&Vue.js30

尚未有邦友留言

立即登入留言