編輯嚴選

【自學程式】學習RWD以前，不可或缺的網頁容器概念！

一開始接觸網頁開發的時候，可能會常常在切版時遇到一些奇奇怪怪的問題：版面總是無法貼齊，左右參差不齊；圖片或是版型變形，但都找不到問題，又或者是技術跟不上設計稿，怎麼切怎麼亂。

在遇到以上問題時，我們很常都會直接從跑版的地方開始找起，但看半天都找不到錯，這個時候很有可能不是元素出了錯，而是你根本沒有「網頁容器」的概念。

什麼是網頁容器？

在軟體開發的世界中，有很多東西都可以被稱之為容器，但這裡我們網頁容器指的是：

這樣聽起來實在令人費解，讓我們直接來看程式碼：

在我們還沒有網頁容器概念時，為了要做一個卡片式的自我介紹非常難，不僅文字都會超出照片的範圍，也沒辦法在外層建立外框，如果想要置中卡片樣式，可能甚至還想要設定一些亂七八糟的margin來推擠與瀏覽器之間的距離。

但如果有了網頁容器的概念，可以少去很多的功夫，省去一直為了要對齊所產生的程式碼。

讓我們來看看如果讓同一個程式碼加上了容器時，會有什麼不同之處：

我在原本的程式碼外層，多加了一層元素<div>，並給予了它200px的寬度，作為網頁容器。

在這個容器之中的元素，因為受限於容器的寬度，所以文字就不會超出這個照片的邊邊，因為我是根據照片的寬度來設定容器的寬度的。

這裡用白話文解釋一下容器運作的道理：

網頁的容器就好像日常生活中的容器一樣，舉例來說：當我們拿一個杯子裝水，水的體積大小就會跟杯子長得一樣，但如果拿了一個水盆裝水，寬度可能會顯得大很多。

而網頁容器運作的道理就跟我們拿杯子去裝水的原理是一樣的，我們可以利用容器的大小控制內容物的大小。

在做網頁開發的初期，我們很容易遇到要更改樣式時，就把歪腦筋動到跟改文字段落，或是圖片的本身，當然不是說這樣不好，但是當我們有了容器概念時，就可以將樣式加到容器上。

而HTML及CSS語言有一個很方便的特性，就是子元素可以繼承父的類別設定，讓我們來看看上一個範例的進階版：

以往初學HTML時，很容易把一行能解決的程式碼寫成三行，可能就會使用h1{color: grey;} p{color: grey;}這樣又臭又長的程式碼，來去改變網頁元素的顏色。

當然要刻一個網頁不可能只有一兩種顏色，於是程式碼就會變得又臭又長。

但有了網頁容器的概念後，一切就輕鬆得多，像是只要在父元素上加上color: grey;的屬性，就可以將.card裡的文字顏色都改成灰色的。

很多人在初進行網頁開發時，時常都不會幫自己的網頁元素加入容器的概念，或是不小心將一組元素，放進錯誤的容器裡，舉例來說：

很多網頁為了視覺閱讀的舒適度，不讓網頁寬度順著螢幕大小無限制的延展，都一定會應用網頁容器的概念，把網頁的主要內容設定在1000px上下，除了主要內容以外，其他區塊，像是表頭跟表尾，還是會為了視覺的延展，將其區塊背景設成滿版。

但問題來了明明我的.footer都設定了寬度100%，為什麼還是寬度跟主要內容一樣呢？

仔細一看，才發現原來自己把.footer放到了另外一個擁有width:1024px的容器內，又因為.footer設置了width:100%的設定（此設定會讓元素的寬度維持佔滿父元素的100%寬度），所以.footer的寬度就被限制住了。

但此時只要將.footer部分的程式碼，移出容器外，就可以獲得一個佔滿瀏覽器的表尾了：

初學程式時，總會有一種錯覺，好像程式會幫你想好一切你想做的事，很多地方程式應該要自己設定啊？

甚至有朋友以為，網頁元素不用設定任何寬度，他完全會自適應並達成我們所謂RWD的效果。

但事實是：

程式語言不像正常人在溝通的語言一樣，有很多模糊空間或是彼此能達成共識的部分。

程式語言只能認得準確的指令，如果在做網頁開發時，想挑戰不使用容器將網頁限制在特定的寬度，那網頁一定會跑版跑到你放棄學程式。

另外一點大家常會疑惑的問題是，那我們常見的響應式設計如何設定容器的呢？

RWD的操作方式，主要是針對不同的載具大小，去設計不一樣大小的網頁容器，舉例來說：一般電腦在瀏覽的網頁容器大小可能落在1000px上下，給平板瀏覽的網頁大小會落在800px上下，再小一點智慧型手機瀏覽網頁的容器設置，可能就要小至400px上下了。

程式真的沒有這麼聰明，可以自動幫你設計RWD的網頁容器大小。

這個章節主要簡單跟大家分享網頁容器的簡單應用，學會在HTML元素上應用容器技巧，不僅可以省去許多重複性的程式碼，更能將網頁的元素進行模組化的管理。

其他網頁容器的進階應用，會再之後的文章中與大家分享。

其他的網頁技術的問題，或是想要了解更多有關網頁開發的小技巧，歡迎你下方留言跟我討論與交流：）

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

關於RWD，你可能會想知道：

關於我：

2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：[email protected]