影像

圖片可以透過<img>、<picture>標籤來呈現。
因為<img>元素可以在行內的格式情境中使用，此外<img>元素會在大小已定的區域層級元素中顯示，為了避免影像超出其容量的範圍，可將其max-width設定成父容器(父層)的100%

在設定基底樣式時可考慮設定下列屬性：
border
max-width
vertical-align

組件樣式

可複用組件(reusable components) 是我們在其上套用樣式，讓她們具視覺隱喻，使用者可更容易地透過他們與網站互動的元素或元素組件。如按鈕(buttons)、下拉式選單(drop-down menus)、對話框(modal windows)、進度列(progress bar)與頁籤(tab)都是可複用組件。

我們很容易就可以認出這些可複用組件，但要正確地將它們做好、有時並不容易。
在製作可複用組件時，可以思考下列的問題：

1. 要做的是獨立組件還是要有幾個組件套在一起使用？
2. 這個組件的行為通常會向行內組件、區塊層級元素或以其他方式運作(即獨立置放在文件結構(document flow)之外)？

這兩個問題有答案後，就可以簡化製作可複用組件的流程：

1. 在製作組件前，先定義所需的行為。
2. 保持組件樣式粒度並設定合理的預設值。
3. 在其周圍置放具不同類別之容器元素的方法，視需要覆寫群組物件的視覺樣式
4. 讓結構容器為其指定大小

心得

第四章大概介紹許多常用到的標籤通常會有那些預設的樣式
最後面有提到關於物件元件化的作法，在不同的情境就會有不同的製作方法
有興趣的朋友可以翻翻看，因為範例真的很詳盡還有附圖說明...!!