iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
6
Modern Web

金魚都能懂的CSS必學屬性系列 第 25

width & height - 金魚都能懂的CSS必學屬性

widthheight 這兩個屬性說是必學可是完全名符其實,每個頁面中一定都會使用到這兩個屬性,widthheight 主要分別是設定頁面中物件的寬與高,尤其新手更是容易把這兩個屬性用壞掉,對的!你沒看錯,就是把它用錯,導致畫面壞掉。widthheight 這兩個屬性是 CSS 中最簡單卻也是最基本的屬性,widthheight 的值基本上只需要一個就好,但也有特殊狀況會用到多個的,先來看看基本的原始碼設定長怎樣

width: 100%;
height: 300px;

從以上寫法就能看出可以使用百分比與像素來設定物件的寬與高,widthheight 的值,可以使用的單位不少,先來看看有哪些

  • px
  • pt
  • %
  • em
  • ex
  • vw
  • vh
  • vmin
  • vmax

在這些單位中,其實也能再細分成「相對單位」與「絕對單位」,「相對單位」與「絕對單位」的基本觀念其實與「Font-size - 金魚都能懂的CSS必學屬性」裡面提到的差不多,有興趣了解的朋友可以直接至該篇文章看,這邊就不複述。此外由於 widthheight 的設定問題差不多,所以本篇將會直接以 width 為主作介紹。

100% 不等於 100vw

width 要特別提到的設定就是 100%100vw 的差異了,許多新手在學習階段,或多或少都會到網路上面參考許多不同的教學或者是心得文,然後看了一些範例照抄或臨摹,接著出問題(笑)!在這邊特別提到的 100%100vw 就是一個新手經常誤會的地方,讓我們來了解一下

寬 100% 的範圍

當我們對一個物件設定 width: 100%; 的時候,基本上該物件寬度將會等於是父層內容的可運用空間,而甚麼是內容可運用空間?其實就是 padding 以內的空間,一個物件的寬度大小,基本上可以說是「 widthpaddingbordermargin 」四個屬性的組成,而至今尚未介紹過 padding 這個屬性,就請各位先暫時先寫入大腦記憶體先,後面會再作介紹。

寬 100vw 的範圍

當我們對一個物件設定 width: 100vw; 的時候,該物件的大小將會等於是百分之百的「視窗」寬度,但比較正確的解釋應該是「視口範圍」寬度或「可見範圍」寬度,也就是 vw 中的 v 所指的「viewport」,這裡特別注意到的重點會是,視窗寬度中是不包含卷軸在內的,也就是說 100vw 會等於是視窗的左邊緣到右邊緣,那麼當你的視窗出現卷軸時會怎麼樣呢?這時你的寬度就會因為卷軸的關係,導致寬度過寬,而讓你的畫面出現了橫向卷軸。但 width: 100% 卻不會有這問題,因為它的寬度是父層的可用空間,而非視窗的寬度。這一個小差異,還請各位特別再三注意。

也因為 width: 100vw 很容易造成視窗出現橫向卷軸的問題,所以一般我們在開發網頁時多會使用 width: 100% 而非 width:100vw,那甚麼時候會用到 width: 100vw 呢?就目前來說 Amos 還沒遇到必須使用的時機,所以就看各位有沒有機會遇到了,歡迎分享給 Amos。

所有物件都是一個空間

多數新手在使用 widthheight 的時候,為何經常會有問題呢?普遍的狀況都是物件的尺寸計算出了問題所致,在網頁中每個物件都會佔據一些空間,所以對於新手來說,計算錯誤是最常見的問題了, Amos 常會遇到新手畫面出現問題了,然後丟了句「我的畫面不知道為什麼壞掉了?」給我, Amos 一看...經常都是子物件寬度使用了絕對尺寸去設定,並且還設定的比父層寬度還要寬的狀況,這樣不壞掉也難啊(攤)。而至於網頁中物件尺寸的計算方式,可以參考「金魚都能懂網頁設計入門 : 區塊尺寸計算 」以及「金魚都能懂網頁設計入門 : 換個新盒子」中,會有詳細的說明。

為何設定了寬高卻無效

widthheight 雖然說是寬高的設定,但也還是有一些執行條件的,用比較簡單的說法是,基本上你的物件必須是 inline 物件以外的特性,像是 blockinline-blockflex itemlist-item,又或者是表格、儲存格這類屬性,所以簡言之就是 inline 類型的物件是不支援 widthheight 的,請新手們在設定時千萬要注意。

一個簡單的屬性,卻是眾多新手錯誤的開始,看似輕鬆完成,卻又錯誤不斷,幾個小小的重點就請金魚們小心且注意了,金魚都能懂的 CSS 必學屬性,我們下篇見!


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
list-style - 金魚都能懂的CSS必學屬性
下一篇
min-width & max-width - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
eric19740521
iT邦新手 1 級 ‧ 2023-03-28 18:30:40

使用100vh可視最大化時,出現那捲軸
我發覺可以用calc(100vh-20px) 扣掉多出來的


<style>	
body{
  margin:0px;
}
 
</style>	
</head>
<body  >

<!-- 參考:https://www.runoob.com/try/try.php?filename=trycss_grid3 -->
<div class="grid  grid-cols:5 p:10px gap:10px bg:#2196F3
			h:calc(100vh-20px)
">
  <div class="div1 grid-col-span:5">頭部</div>
  <div class="div1 grid-row-span:2">菜單</div>
  <div class="div1 grid-col-span:3">內容</div>  
  <div class="div1">右側</div>
  <div class="div1 grid-col-span:4">底部</div>
</div>


</body>

我要留言

立即登入留言