CSS盒子模型

【CSS教學】Day09– CSS盒子模型如何使用?你知道盒子的組成嗎? (詳細解說)

在 CSS 教學中最重要的核心部分應該可以說是盒子模型 ( Box Model ) 了,如果你學習好的話你能夠很輕鬆的在網頁中呈現出你想要的佈局模式,如果學不好的話就很難去應用唷! 那還到問題本身為什麼我們需要學習合子模型呢? 其實網頁佈局要學習的有三大核心,盒子模型浮動定位只要你學習好就能很好的去安排盒子模型的佈局部分,當你學習完盒子模型後你很容易看透別人怎麼去規劃對方的網站唷!

當你學習完盒子模型或是還沒學習盒子模型你還不能輕鬆回答下列的問題,就代表你還不夠熟悉唷! 你需要往下好好看我所寫的 CSS 教學中的 CSS 盒子模型。

  • 能準確說明盒子模型的 4 個組成部分嗎?
  • 能夠利用邊框複合寫法給元素添加邊框嗎?
  • 能夠計算盒子的實際大小嗎?
  • 能給盒子設置圓角邊框嗎?
  • 能夠給盒子模型添加陰影嗎?
  • 能夠給文字添加陰影嗎?
點我瞭解 小青如何每月多賺5位數台幣

CSS 盒子模型是什麼?

CSS教學 CSS盒子模型是什麼

當你看透別人的網頁佈局是使用盒子模型 ( Box Model ) 進行規劃,我們就能夠去進行拆解並從中吸收別人為什麼要這樣弄是不是很讚呀!

網頁佈局其實是有過程的

  1. 先準備好相關的網頁元素,網頁元素幾乎都是Box
  2. 利用 CSS 設置好盒子模式,然後擺放到相應的位置
  3. 往盒子裡裝內容( content )

其中最難的地方就是第 2 項,你需要放到你要放的相對位置,第 1 項和第 2 項基本大家都會,只要你掌握好盒子怎麼放的話,我可以跟你說你贏過 90% 以上的人了。網頁佈局的核心本質就是利用 CSS 擺放盒子模型

CSS 盒子模型的組成有哪些呢?

CSS教學 CSS盒子模型的組成有哪些呢

那說到盒子 ( Box Model ) 你想到的是什麼? 是能夠裝什麼東西呢? 能裝一本書? 能裝一支筆? 反正盒子就用用來裝東西不管你要裝什麼都是可以的,因為現實中有盒子的概念開發者就覺得這概念不錯也把這想法寫進 CSS 之中所以從此網頁中也是有有盒子啦! 只是差別在於是虛擬的,那現實生活中的盒子是不是邊框外邊框內邊框,當然網頁中的盒子也會有唷! 只是差別在於名稱稍微不太一樣而已。

  • 邊框 ( border )
  • 外邊距 ( margin )
  • 內邊距 ( padding )
  • 內部內容 ( content )

要知道 CSS 盒子模型本質上就是一個盒子,並不會因為在網頁呈現後整個盒子原理和現實中的盒子就差距變很多,並不會唷! 盒子的邊框 ( border ) 是不是會有四面包起來對吧! 那盒子本來就是需要放內容的 ( content ) 這你應該也沒問題吧! 那我們放進去的東西不可能會剛剛好符合 size 對吧! 除非你的東西就是剛剛好跟盒子一樣大,我們又怕如果這盒子要寄出去或是你有收過包裹,是不是會有一個防撞膜?!

反正就是會有一層把內容物保護起來的東西,那一層東西在網頁中是叫內邊距 ( padding ),內邊距的作用其實就是能夠調整內容物 ( content ) 的位置,這樣可以理解嗎? 如果不能的話你可以想這樣寄包裹的人有的人不是會用一大個泡棉之類的保護你東西,如果要讓你打開包裹時東西出現在正中央,泡棉包起來的四個面需要相同,你東西才會出現在正中央沒錯吧! 那現在是不是知道內邊距 ( padding ) 的作用啦! 沒錯內邊距 ( padding ) 就是能夠調整你的內容物位置唷!

那我們調整好內容物了姓名地址都寫好了薄膜也封了,盒子也固定好寬和高了,那 ( 盒子 ) 包裹 給集中處沒錯吧! 在集中處時會進行分類,而包裹與包裹之間是不是會有一些縫隙,你可能會想為什麼要有縫隙阿,能塞就塞呀! 不對唷! 這時候集中處有很多包裹,而包裹還會分成有類化學類、易燃類…等,如果你不分到時候發生危險就產了,所以包裹與包裹之間是有有縫隙的這邊你也沒問題吧!

那縫隙與縫隙之間就是網頁中盒子模型之間的的外邊距 ( margin )以上就是盒子模型的基本四大組成,現在是不是了解了其實網頁中的盒子根本都現實生活中的盒子 ( 包裹 ) 根本一模一樣呀! 那下列小青我呢會分別去介紹這三大類的的用法唷! 那我們繼續學下去吧! 等等你說為什麼變成是三大類呢?! 對呀! 內容物 ( content ) 都會在使用盒子時候進行舉例就不會單獨拿出來講了,畢竟內容物可以使任何型態!

點我瞭解 小青如何每月多賺5位數台幣

CSS 盒子模型的邊框是什麼?

CSS教學 CSS盒子模型的邊框是什麼

經過前面解說我相信你至少知道盒子模型 ( Box Model ) 的邊寬是什麼了吧! 而且我們還可以調整邊框 ( border ) 的粗細,還能改變邊寬的樣式,就是能夠改變成實線的或是虛線的都是可以的,一共我們可以進行調整的部分有三個唷!

  • 邊框能調整粗細度
  • 邊框能調改變樣式,例如: 虛線、點線、實線…等
  • 邊框能改變顏色

盒子模型邊框的 CSS 語法是什麼?

CSS教學 盒子模型邊框的CSS語法是什麼

盒子模型 ( Box Model ) 的邊框英文是 border 裡面可以放置三個屬性值,而這三個屬性值在我們上一節中有提到,就是邊框粗細度單位是 px ( 像素 )、邊框的樣式邊框的顏色,那我們來看看怎麼寫吧!

border: border-width | border-style | border-color
邊框屬性邊框功能說明
border-width定義邊框粗細度,單位是px(像素)
border-style邊框的樣式
border-color邊框的顏色

接下來我們實際來看看實際應用吧! 創建一個 HTML 結構骨架,在裡面撰寫一個 <div> 盒子模型

<body>
	<div>我是盒子</div>

</body>

創建好 HTML 結構骨架再新增一個 CSS 屬性裡面我們就要來寫入剛剛學到的 CSS 邊框 ( border ) 屬性,裡面還需要寫入最重要的三個 CSS 邊框屬性值唷! 還記得有哪三個嗎? 對! 就是邊框粗細、邊框樣式、邊框顏色!

<style>
	div {
		width:250px;
		height: 250px;
		border-width: 6px;
		border-style: solid;
		border-color: red;
}
</style>

CSS 常用的邊框 ( border ) 的樣式有哪些呢?

CSS教學 CSS常用的邊框border的樣式有哪些呢
  • none ( 不加入邊框 )
  • solid ( 實線邊框 )
  • dashed ( 虛線邊框 )
  • dotted ( 點線邊框 )

還有非常多的邊框五花八門,單一般前端人員最多就使用前面舉例的那些,有的雖然很好看但是你必須考慮到兼容性問題,因為不同 PC 端、手機端設備都不同能不能顯示出來又是一回事,如果不能的話那瀏覽者看一看會覺得很奇怪並影響到閱讀體驗,這是我們最不期望看見的

點我瞭解 小青如何每月多賺5位數台幣

CSS 盒子模型的邊框 ( border ) 能夠複合寫法嗎?

CSS教學 CSS盒子模型的邊框border 能夠複合寫法嗎

根據剛剛我們的 CSS 教學學習了盒子模型 ( Box Model ) 的邊框,你是不是發現要使用個邊框 3 種邊框估能都用到我要占用到三行,還需要打那麼多字重複性的打代碼有夠累人,是不是能學前面的文本或是北景他們我們能用簡潔的打法呢? 當然能夠唷! 那我們來看看是怎麼的簡潔打法和使用方式吧!

首先是建一個 HTML 結構骨架,在裡面撰寫一個 <div> 盒子模型就可以了,

<body>
	<div>我是盒子</div>

</body>

我們 CSS 盒子寬度給個 250px( 像素 ) 高度給個 250px( 像素 ),CSS 邊框屬性值是希望邊框粗細能夠 6px ( 像素 )、邊框的樣式能夠是實線、邊框顏色希望是紅色,這次最大不同的事是使用 CSS 邊框的簡約打法,結果如下。

<style>
	div {
		width:250px;
		height: 250px;
		border: 6px solid red;
}
</style>

完成後進行存檔你就會在網頁上看見和之前顯示出來的網頁功能是一模一樣,但我們用到的代碼量更少吧! 如果你不相信這樣也能夠執行,你可以自己試試看這樣子的寫法唷! 還有一點你可能會提問說! 邊框 ( border ) 的簡約寫法有沒有屬性值的順序呢?! 是沒有的唷! 這點就可以放心了大膽的去使用吧! 但通俗來說大家默契順序是邊框粗細、邊框樣式、邊框顏色。

  • 邊框的簡約打法內部屬性值沒有順序

重點又來了! 你又會問小青說盒子不是有四個面那這四個邊框我能夠每個邊框的顏色都不一樣嗎? 每個邊框的粗細也不同嗎? 每個邊框樣式都不同嗎? 當然能夠唷! 這點開發者有想過一定會有人這樣想,所以就也寫了這樣的功能讓你可以任意去發揮邊框的極限,你只需要在你要改變的上個面加入那個方向的英文就可以囉! 中間別忘了用減號把裡個英文單字隔開唷!

  • border-top ( 上邊框 )
  • border-bottom ( 下邊框 )
  • border-left ( 左邊框 )
  • border-right ( 右邊框 )

CSS 表格的細邊框如何使用?

CSS教學 CSS表格的細邊框如何使用

這個功能是搭配前面我們所學的 <table> 表格標籤,為什麼又要回去講呢? 因為前面我們有說就不要去使用 HTML 自己的功能,用 CSS 的屬性控制會比較方便,日後維護也比較有效率,那表格其實也是盒子呀! 你看表格他也有很多邊框線、細線,我們可以透過 CSS 屬性值去改變它而這個細線邊框是 boder-collapse 他能夠改變表格邊框與邊框之間的大小,我們直接看例子會比較好懂些。

首先創建一個 HTML 結構骨架,裡面生成一個表格標籤,我們當初不是把所有屬性值都寫在 HTML標格標籤裡頭,學習了 CSS 就不要在那麼做了,只不過 align 以及 cellspacing 先不去掉,等後面我們學習其他幾個盒子模型 ( Box Model ) 再回過頭來把它處理掉,現在我們把其他部分給移出去到 <style> 標籤裡頭吧!

<table border="1" align="center" width="800" height="200" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>小青</td>
            <td></td>
            <td>照片</td>
        </tr>
        <tr>
            <td>種族</td>
            <td>人族</td>
            <td>已婚</td>
            <td>照片</td>        
        </tr>
        <tr>
            <td>個人作品</td>
            <td>個人作品</td>
            <td>個人作品</td>
            <td>個人作品</td>
        </tr>
        <tr>
            <td>個人簡歷</td>
            <td>個人簡歷</td>
            <td>個人簡歷</td>
            <td>個人簡歷</td>
        </tr>
    </table>

移好後的 HTML 結構骨架中的表格標籤裡頭少了非常多東西了,看就是比較清爽了吧!

<table align="center" cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>小青</td>
            <td></td>
            <td>照片</td>
        </tr>
        <tr>
            <td>種族</td>
            <td>人族</td>
            <td>已婚</td>
            <td>照片</td>        
        </tr>
        <tr>
            <td>個人作品</td>
            <td>個人作品</td>
            <td>個人作品</td>
            <td>個人作品</td>
        </tr>
        <tr>
            <td>個人簡歷</td>
            <td>個人簡歷</td>
            <td>個人簡歷</td>
            <td>個人簡歷</td>
        </tr>
    </table>

搬出去後你這樣寫後你保存檔案後在網頁呈現出來的效果,可能會讓你大吃一驚,因為你只會看見一個大邊框 ( border ) 而已,這時候你不要覺得奇怪是因為表格標籤本身就是一個大盒子唷! 你必須再給 <td> 單元格標籤一個 CSS 邊框屬性這樣才能夠變成你想像中的表格的唷!

<style>
	table{
		width: 500px;
		height: 250px;
}

	table {
		border: 1px solid red;
}
</style>

我們嘗試改寫一下 CSS 屬性標妻選擇器,這次選擇表格標籤的 <td> 單元格標籤選擇器,這樣看看是否會能呈現出我們真正的表格效果呢?

<style>
	table{
		width: 500px;
		height: 250px;
}

	table,
	td {
		border: 1px solid red;
}
</style>

這樣是不是真的就出現我們期望的表格了呢! 是吧是吧! 但是你仔細去看你會發現 <td> 單元格標籤之間的邊框 ( border ) 設置是 1px ( 像素 ) 但因為 td 單元格標籤與 td單元格標籤相鄰再一起加起來的邊框是 2px( 像素 ) 不是我們要的呀! 不用擔心這時候,我們就可以出動我們的 border-collapse ( 細線邊框 ) 就能夠解決這個問題唷!

border-collapse: collapse;
  • collapse 這單字意思是合併的意思
  • border-collapse 能控制瀏覽器繪製表格邊框方式
  • border-collapse 能控制相鄰單元格邊框

我們只需要把 border-collapse ( 細線邊框 ) 給加入到剛剛那段 CSS 屬性代碼就能解決這問題囉! 來試試看真的有那麼神奇嗎?

<style>
	table{
		width: 500px;
		height: 250px;
}

	table,
	td {
		border: 1px solid red;
		border-collapse: collapse;
}
</style>

以上就是處理表格標籤的單元格標籤相鄰會產生邊框的壘加,但是透過 CSS border-collapse ( 細線邊框 ) 屬性這個問題就能夠進行合併的動作唷! 還有表格實際上就是一個大型的盒子別忘了這一點!

點我瞭解 小青如何每月多賺5位數台幣

CSS 邊框 ( border ) 會影響實際盒子模型大小嗎?

CSS教學 CSS邊框border會影響實際盒子模型大小嗎

這邊要來說說邊框 ( border ) 其實會影響盒子的實際大小,這怎麼說呢?! 因為邊框是不是有粗細度,如果用現實世界的說法是盒子的厚度,那今天我們假設一個空間能放寬度 200px ( 像素 ) 高度 200px ( 像素 ) 的盒子空間大小,如果不考慮盒子直接是不是能放進去,那今天是裝在盒子裡面的東西盒子一定以厚度吧! 假設厚度是 1cm 那鐵定一定放不下那個空間這你沒問題吧!

那換過來想在網頁也是如此呀! 今天我們寬度是 200px ( 像素 ) 高度是 200px ( 像素 ),內容物 ( content ) 寬度與高度也是一樣,這時候還給邊框 1px 這時候會發生什麼是呢!? 這裡你可以好好停下來想想看,整個盒子是不是變大了呢! 寬度會變成 202px 高度變成 202px 是不是脫離我們原本設計的盒子了! 沒錯吧! 原本我們是設計盒子是高度與寬度都是 200px 今天因為加邊框所以四個面又增加各 1px

這邊直接上例子這樣你比較好思考,創建一個新的 HTML 結構骨架,裡面新增一個 <div> 盒子標籤

<body>
	<div>我是盒子</div>

</body>

創建好後,我們開始寫 CSS 的盒子屬性,寬度與高度我們都給 200px ( 像素 ),為了方便觀察加入背景顏色紅色,邊框粗細 1px、邊框樣式實線、邊框顏色紅色

<style>
	div {
		width: 200px;
		height: 200px;
		border: 1px solid red;
}
</style>

這時候你看見的盒子已經不是你設定的寬度和高度都是 200px ( 像素 ) 了,整理看起來都會個加 1px 也就是說線在盒子的寬度是 202px ( 像素 ) 因為左邊邊框 + 右邊邊框,高度是 202px ( 像素 ) 因為上面邊框 + 下面邊框也就是說已經被撐開來了,你想說這樣又沒關係不影響呈現效果,那可就錯了後面不單單會只有一個盒子模型會有很多個所組成,因為被撐開來了可能就會影響全部的佈局產生跑位了唷! 這點可要多加注意。

邊框會額外增加盒子的實際大小那麼辦?

所以現在有兩總解決方案,下列提供給你參考,也是很多前端人員會經常使用的方式唷!

  1. 直接測量盒子大小的時候,不去量邊框
  2. 如果測量時有包含邊框,需要用總體的寬度與高度去減去邊框的加總寬度

CSS 盒子模型的內邊距 ( padding ) 是什麼?

CSS教學 CSS盒子模型的內邊距padding是什麼

剛才我們介紹了盒子模型 ( Box Model ) 中的邊框 ( border ) ,現在一定知道邊框的應用了吧! 再來我們繼續往裡面來看,是盒子的內邊距 ( padding ) 和內容 ( connant ) 那其中內容是最好理解的! 這你沒問題吧! 內容就是你可以是任何東西,文字也是內容圖片也是內容,甚至你要在盒子裡面裝盒子那一個被裝的也是內容,反正在盒子裡面的東西就是叫內容。

比較有問題的是內邊距 ( padding ),我們先不解釋是什麼是內邊距直接來看實際情況,首先創建一個 HTML 結構骨架,裡面寫一個 <div> 盒子模型標籤,盒子模型標籤裡頭包覆一條信息。

<body>
	<div>我是盒子</div>

</body>

接下來給盒子模型新增 CSS 樣式屬性,寬度給個 200px ( 像素 )、高度給個 200px ( 像素 ),再來把我們剛剛上一節學會的邊框 ( border ) 屬性給也填了吧! 我們需要邊框粗細 1px、邊框樣式實線、邊框顏色紅色,設定好後我們來看看結果是如何呢!

<style>
	div {
		width: 200px;
		height: 200px;
		border: 1px solid red;
}
</style>

寫好後我們在網頁存檔會呈現出來的效果,你看唷! 盒子內容 ( content ) 裡頭的文字是不是貼近邊框呀! 也就是說邊框可以說根本黏在文字旁邊,在現實生活中我們寄包裹這個包裹內容物會跟盒子邊框貼很緊嗎?是不是不太可能至少還會包一層緩衝泡棉或是泡泡袋以防撞擊造成內部內容物損壞! 對不對呀!!!

所以在網頁呈現出來效果也是內容物和邊框貼緊的,一般我們也不太會這樣做都是希望有一點點間距,而這間距就是現實生活中的泡泡袋包覆內容物,那網頁就不叫泡泡袋了是叫做內邊距 ( padding ) ,這樣知道內邊距是什麼了吧! 然而內邊距可以控制內容物處在盒子的那一邊唷!

點我瞭解 小青如何每月多賺5位數台幣

CSS 盒子模型內邊距 ( padding ) 的CSS語法是什麼?

CSS教學 CSS盒子模型內邊距padding的CSS語法是什麼
padding-left: 填寫數值(px);

而盒子的內邊距 ( padding ) 也是能夠像邊框一樣,控制它的上下左右唷! 寬度給個 200px ( 像素 )、高度給個 200px ( 像素 ),再來把我們剛剛上一節學會的邊框屬性給也填了吧! 我們需要邊框粗細 1px、邊框樣式實線、邊框顏色紅色,

  • padding-left ( 左內邊距 )
  • padding-right ( 右內邊距 )
  • padding-top ( 上內邊距 )
  • padding-bottom ( 下內邊距 )

那我們來看看在實際中我們是怎麼來寫的呢! 創建一個全新的 HTML 結構骨架,在裡頭新增一個 <div> 盒子標籤,盒子標籤在隨便寫個內容物 ( content ) 以便於等等的觀察。

<body>
	<div>我是盒子</div>

</body>

接下來是重頭戲,把 <div> 的元素選擇器 CSS 屬性給寫下去吧! 我們定義這個盒子的寬度給個150px ( 像素 )、高度給個 150px ( 像素 ),再來是新增背景顏色紅色,以及只加入左內邊距 ( padding ) 10px ( 像素 ) 來看看實際效果如何。

<style>
	div {
		width: 150px;
		height: 150px;
		padding-left: 10px;
}
</style>

存檔後你就能夠在網頁中看到呈現出來的效果了! 是不是左側的內邊距 ( padding ) 增加了 10px ( 像素 ) 的距離,如果你不確定是不是增加了 10px ( 像素 ) 我們可以使用鍵盤的 F12 或是在網頁中點擊滑鼠右鍵選擇檢查,就能夠查找是不是真的有內邊距移動 10px 囉!

如果你希望右內邊距也給個 10px 和下邊距給個 20px 就只需要再補進去在 CSS 屬性中,那 <div> 盒子模型 ( Box Model ) 就會呈現出有內邊距的效果囉! 如果沒有給內邊距要怎麼發現呢? 很簡單你只需要看內容物 ( content ) 有沒有貼近邊框 ( border ) 或是貼近盒子的邊,如果是貼近的就說明該網站設計師的該盒子模型並沒有使用內邊距唷! 這樣是不是學會啦!

CSS 盒子模型的內邊距 ( padding ) 能夠複合寫法嗎?

CSS教學 CSS盒子模型的內邊距padding能夠複合寫法嗎

剛剛我們已經學會了內邊距的應用了! 但是你會說小青我改個內邊距或是先增內邊距好麻煩上下左右這樣都要打好類唷! 是不是也跟盒子邊框 ( border ) 一樣也能夠使用簡約的打法呢?! 沒有錯就是能夠使用簡約的打法那怎麼使用呢? 有沒有什麼規定和原則我們必須要遵守的呢!? 確實是有那我們來看看我們必須怎麼來遵守內邊距簡約打法的規則吧!

我們來創建一個 HTML 結構骨架,裡頭新增一個 <div> 盒子模型標籤,盒子內容 ( content ) 隨便打幾行字就可以了!

<body>
	<div>我是盒子</div>

</body>

接下來我們需要改變 <div> 盒子元素標籤 CSS 屬性樣式,我們定義這個盒子的寬度給個 150px ( 像素 )、高度給個 150px ( 像素 ),再來是新增背景顏色紅色,內邊距上下左右各 10px 之前是不是我們需要打四行這次只需要打一行即可,這樣就能夠同時給予上下左右內邊距各 10px 囉!

<style>
	div {
		width: 150px;
		height: 150px;
		background-color: red;
		padding: 10px;
}
</style>

問題來了! 那如果今天我想要上下設置內邊距就好可以嗎? 我想要設置上下一樣數值左右也一樣數值可以嗎? 當然也可以,你想得到的操作當然別人也想過開發者就根據這樣的情況給予適當的寫法,我們來看看吧!

值的個數內邊距的意思
padding: 6px;1個值,表示上下左右各設置6px
padding: 6px 12px;2個值,表示上下是6px、左右是12px
padding: 6px 12px 18px;3個值,表示上是6px、左右是12px、下是18px
padding: 6px 12px 18px 24px;4個值,表示上是6px、右是12px、下18px、左是24px
點我瞭解 小青如何每月多賺5位數台幣

CSS 內邊距 ( padding ) 簡約寫法該注意的事

CSS教學 CSS內邊距padding簡約寫法該注意的事
  • 內邊距如果需要使用到多值,記得數值與數值之間要使用空格隔開
  • 內邊距用到四個值記得是順時針方向,是從上開始算過去
  • 內邊距 1 個值時是控制 4 個內邊距
  • 內邊距 2 個值時是控制上下一組、左右一組
  • 內邊距 3 個值時是控制上一組、左右一組、右一組
  • 內邊距 4 個值時是控制上一組、右一組、下一組、左一組,順時針順序

CSS 內邊距 ( padding ) 會影響實際盒子模型大小嗎?

CSS教學 CSS內邊距padding會影響實際盒子模型大小嗎

會! 在前面你在練習寫如何使用內邊距的時候你可能就會發現了,原本設定的盒子大小會改變,而且變大了因為你內邊距設定越大就會增加盒子的大小了! 其實當我們給 <div> 盒子模型 ( Box Model ) 指定內邊距之後會發生兩件事!

  • 內容物 ( content ) 和邊框 ( border ) 有了距離,這過程就是添加內邊距
  • 內邊距會影響當初我們設定的盒子模型大小寬度、高度

如果你之前沒練習不知道什麼情況會發生,這次來動手寫寫看吧! 在編譯器寫一個全新的 HTML 結構標籤,裡頭創建一個 <div> 盒子模型標籤在盒子模型裡頭隨邊新增幾段文字。

<body>
	<div>我是盒子我是盒子我是盒子</div>

</body>

接下來我們對 <div> 盒子模型標籤的元素選擇器設定寬度 100px ( 像素 )、高度 100px ( 像素 ) 再來是方便觀察透明的盒子所以給背景顏色設定為紅色,那要看看這個盒子是不是真的因為加入內邊距 ( padding ) 而改變整個盒子的大小,所以我們設定內邊距上下左右各增加 10px

<style>
	div {
		width: 150px;
		height: 150px;
		background-color: red;
		padding: 10px;
}
</style>

寫好 CSS 屬性後我們存檔並打開瀏覽器看看呈現出來的效果,是不是盒子變大了呢? 什麼你說看不出來唷! 沒關係我們對著瀏覽器按鍵盤上的 F12 或是對著瀏覽器點擊滑鼠右鍵選擇檢查,就能夠看見是否你個盒子發生改變了! 你會看見原本我們設定盒子的寬度、高度是都是 100px 但是今天我們要讓內容物與盒子邊邊產生距離新增了寬度,這動作就做新增內邊距我們新增了上下左右各 10px ( 像素 )。

上下內邊距是增加盒子的高度,也就是說原本盒子是 100px ( 像素 ) 加上了下內邊距 10px 與上內邊距10px,100px + 10px +10px 等於 120px 的高度了,而寬度呢?! 也是 100px + 10px +10px 等於120px 寬度了很明顯超出去我們設定的盒子大小了,那你可能會問超出去右不會怎麼樣呀! 確實對你來說現在是部會怎麼樣,但是到了你網站越來越豐富規劃原本盒子模型 ( Box Model ) 只要超出去你設定的盒子範圍大小就會發生亂跑的現象唷! 那如何解決呢?

點我瞭解 小青如何每月多賺5位數台幣

CSS 如何解決內邊距 ( padding ) 撐大盒子呢?

CSS教學 CSS如何解決內邊距padding撐大盒子呢

如果你不希望盒子設定好寬度與高度,後來因為新增內邊距 ( padding ) 的關係而造成整個盒子變成不是當初的盒子的話你需要注意以下幾點解決方案。

  • 要保證設定好後的盒子大小不改變盒子寬度與高度必須先減去內邊距的值
  • 先決定好內容物實際大小,再決定內邊距是多少,這樣才是實際盒子大小

CSS 盒子模型的外邊距 ( margin ) 是什麼?

CSS教學 CSS盒子模型的外邊距margin是什麼

在我們實際開發中一定不可能只有一個盒子對吧! 一定是由很多個合組所組合起來,來進行佈局那盒子與盒子之間不太常會連在一起除非你故意這個做,但是一般我們就是須要讓盒子與盒子之間有一個縫隙這個縫隙就叫做外邊距 ( margin )

那要怎麼才能夠控制盒子與盒子之間的距離呢?! 先不用急我們先來看看外邊距 ( margin ) 是什麼吧! 外邊距是由英文 margin 所組成,它的功能就是控制盒子與盒子之間的距離,就是這麼的簡單明瞭! 那經過我們之前學習的盒子邊框 ( border ) 、內邊距你應該很清楚怎麼使用吧! 就算我們沒學過外邊距也可以透過開發者的邏輯去猜,如果你思路可以跟開發者接近再不管你學習陌生的 CSS 屬性都能很快掌握唷!

外邊距屬性名稱外邊距屬性作用
margin-left左外邊距
margin-right右外邊距
margin-top上外邊距
margin-bottom下外邊距

是不是使用的方法跟內邊距 ( padding ) 是一樣的呢! 只是換成是外邊距 ( margin ) 而已對不對! 接下來我們來實作看看吧! 創建一個全新的 HTML 結構骨架,並在裡面新增 2 個 <div> 盒子模型標籤,盒子裡頭隨便打幾段文字。

<body>
	<div>我是盒子01我是盒子01我是盒子01</div>
	<div>我是盒子02我是盒子02我是盒子02</div>

</body>

接下來我們來指定盒子模型元素標籤,改變一下 CSS 屬性寬度 100px ( 像素 ) 高度 100px ( 像素 ) 背景顏色都設置紅色,完成後我們直接存檔在網頁上看看呈現出來的效果是如何吧! 你一定可以看見這兩個盒子是不是一上一下是相連再一起的呢? 沒錯吧! 但這不是我們想要的結果,我們希望能看見這兩個盒子是分開的。

<style>
	div {
		width: 100px;
		height: 100px;
		background-color: red;
}
</style>

這時候我們看分開的位置是盒子的哪裡呢? 就是盒子的下面部分所以要使用 margin-bottom 我們增加 10px 距離看看吧!

<style>
	div {
		width: 100px;
		height: 100px;
		background-color: red;
		margin-bottom: 10px;
}
</style>

存檔後使用瀏覽器打開檔案你就能看見兩個盒子中間出現一個縫隙,縫隙正是我們設定的 10px ( 像素 ) 距離,如果不相信沒關係我們對著瀏覽器按鍵盤上的 F12 或是對著瀏覽器點擊滑鼠右鍵選擇檢查,就能夠看見是否你的盒子與盒子之間是不是 10px ( 像素 ) 距離了唷!

那我像要讓盒子模型 ( Box Model ) 上下左右的外邊距 ( margin ) 都不同是不是我需要寫四行呀?! 對沒錯唷,但是根據我們前面的學習邊框 ( border ) 、內邊距 ( padding ) 都知道有簡約的打法當然外邊距也不例外的,那你可能會問我說小青是不是和之前的打法是一樣的呢?! 沒錯你就只需要把英文單字換成外邊距的英文單字即可,那順序呢? 不用擔心也是跟內邊距是一樣的順序是順時鐘方向

點我瞭解 小青如何每月多賺5位數台幣

CSS 盒子模型的外邊距 ( margin ) 如何水平居中?

CSS教學 CSS盒子模型的外邊距margin如何水平居中

那你可能會想我們的盒子一直到現在都是靠在左上角有沒有辦法讓盒子模型 ( Box Model ) 水平居中呢?! 像之前的表格就能夠居中,一定有方法可以讓盒子模型居中對吧! 對唷! 我們有方法能夠讓盒子模型水平居中對齊的,但是使用水平居中是有條件的你必須先滿足條件才能發動該功能,不然你會覺得很奇怪說為什麼我使用了該功能怎麼沒效呢?! 下列我們來看看需要滿足什麼條件吧!

  1. 盒子模型必須指定寬度
  2. 盒子模型的左右外邊距 ( margin ) 都設置 auto

接下來我們看看是不是真的是這麼回事吧! 首先創建一個全新的 HTML 結構骨架,裡頭新增一個 <div> 盒子模型,盒子模型裡面隨便新增一段文字就可以了。

<body>
	<div>我是盒子01我是盒子01我是盒子01</div>

</body>

接下來我們指定盒子模型元素標籤,改變一下 CSS 屬性寬度 100px ( 像素 ) 高度 100px ( 像素 ) 背景顏色都設置紅色,外邊距 ( margin ) 我們設置 auto 完成後我們直接存檔在網頁上看看呈現出來的效果是如何吧! 你一定可以看見這盒子是不是跑去水平居中了吧? 沒錯吧!

<style>
	div {
		width: 100px;
		height: 100px;
		background-color: red;
		margin: auto;
}
</style>

如果你夠勤勞去看很多別人的網站寫法你會發現不只有人會這樣使用唷! 什麼意思呢? 一般前端人員常見的寫法會有三種,這三種都能夠實現水平居中的效果,要說好壞嗎? 其實並沒有要看團隊是使用哪種的就可以了。

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

CSS 外邊距 ( margin ) 水平居中要注意的事

CSS教學 CSS外邊距margin水平居中要注意的事

剛剛我們說的都是盒子模型 ( Box Model ) 也就是塊級元素,才能用的塊元素水平居中方法,但是要怎麼讓行內元素以及行內塊元素水平居中呢?! 因為我們的塊元素是不是裡面也可能在使用的情塊會包含行內元素或是塊元素在裡頭,在更之前不是有學過繼承性問題子標籤會繼承父標籤,不知道你是否忘記如果忘了可以敢快去複習,這邊可以跟你說子標籤繼承過來的外邊距水平居中是繼承不了的。

不信的話我們先創建一個新的 HTML 結構骨架,裡頭新增一個 <div> 盒子標籤,盒子模型裡頭再新增一個 <span> 標籤但這個 <span> 裡頭必須寫一段文字,我們要來看看是否 <span> 子標籤也能夠繼承父標籤的外邊距 ( margin ) 水平居中效果。

<body>
	<div>
		<span>我是盒子裡的文字</span>
	</div>

</body>

接下來對 <div> 盒子模型元素選擇器寫一些 CSS 屬性,寬度給的 150px ( 像素 ) 高度給個 150px ( 像素 ),背景顏色紅色、外邊距 ( margin ) 水平居中效果

<style>
	div {
		width: 150px;
		height: 150px;
		background-color: red;
		margin: auto;
}
</style>

你存檔後使用瀏覽器打開一定會看見盒子模型 ( Box Model ) 確實水平居中,但是盒子內部的文字並不會水平居中,你可能會覺得為什麼啊!? 因為你想 <span> 標籤裡面的是文字,文字的居中效果是什麼你還記得嗎?再文本那篇文章有寫唷! 忘記了可以再回去複習一下,文本居中效果是使用 CSS 屬性的 text-align 想起來了吧! 那我們把這段補在父標籤就可以了讓子標籤去繼承

<style>
	div {
		width: 150px;
		height: 150px;
		background-color: red;
		margin: auto;
		text-align: center;
}
</style>

當你改好後在存檔你一定可以看見你的瀏覽器塊元素裡頭的 <span> 文字是不是水平居中啦! 其實不管事行內元素或是行內塊元素都能夠這樣去讓他們水平居中唷! 不信的話你把 <span> 換成行內塊級元素的 <img> 圖片試試看吧!

  • 塊元素的水平居中方式是使用外邊距 ( margin )
  • 行內元素水平居中方式是使用文本居中
  • 行內塊元素水平居中方式是使用文本居中
點我瞭解 小青如何每月多賺5位數台幣

CSS 嵌套塊元素垂直外邊距 ( margin ) 的塌陷

CSS教學 CSS嵌套塊元素垂直外邊距margin的塌陷

這問題是盒子的盒子會出現一些問題這問題是垂直外邊距 ( margin ) 的塌陷,講白話就是有裡個盒子一個是父盒子一個是子盒子,當父盒子往下移動 50px ( 像素 ) 是不是子盒子也會跟著一起移動這沒問題吧! 那當爸爸不動兒子自己往下移動可以嗎? 結果是不行爸爸也會跟著移動但這不是我們要的效果呀! 這就叫塌陷的問題,如果不明白我們直接使用例子來說吧!

接下來我們看看是不是真的是這麼回事吧! 首先創建一個全新的 HTML 結構骨架,裡頭新增一個 <div> 盒子模型,盒子模型裡面在新增一個盒子模型 ( Box Model ) ,父標籤盒子 class 命名為 father、子標籤盒子class 命名為 son

<body>
	<div class="father">
		<div class="son">
		</div>

	</div>

</body>

接下來我們指定盒子模型 ( Box Model ) 元素標籤,改變一下父標籤盒子 class 命名為 father 的 CSS 屬性寬度 500px 高度 500px 背景顏色都設置紅色, 子標籤盒子 class 命名為 son 的 CSS 屬性寬度 200px ( 像素 ) 高度 200px ( 像素 ) 背景顏色都設置藍色。

<style>
	.father {
		width: 500px;
		height: 500px;
		background-color: red;
}
	.son {
		width: 500px;
		height: 500px;
		background-color: blue;
}
</style>

那我們來開始看囉! 我們讓父親盒子往下走 60px ( 像素 ),也就是上外邊距 ( margin ) 往下走

<style>
	.father {
		width: 500px;
		height: 500px;
		background-color: red;
		margin-top: 60px;
}
	.son {
		width: 500px;
		height: 500px;
		background-color: blue;
}
</style>

是不是父親和兒子標籤都往下走呢?! 沒錯吧! 那接下來我們想要只給兒子標籤往下走 30px ( 像素 ) 也就是說讓父親與兒子標籤有一個距離

<style>
	.father {
		width: 500px;
		height: 500px;
		background-color: red;
		margin-top: 60px;
}
	.son {
		width: 500px;
		height: 500px;
		background-color: blue;
		margin-top: 30px;
}
</style>

結果你會看見兒子標籤竟然沒下來,反而是爸爸跟兒子一起下來不是我們要的呀! 這就是塌陷的效果,對於兩個嵌套關係 ( 父子關係 ) 元素,父元素有上邊距而兒子元素標籤也同時有上邊距,這時候父元素就會塌陷的更大的外邊距 ( margin ) 這種問題是以後會很常碰見的。

那有什麼方法可以阻止塌陷效果呢?! 其實有三種方式可以解決

  • 可以為父元素定義上邊框 ( 缺點會增加盒子大小 )
  • 可以為父元素定義內邊距 ( 缺點會增加盒子大小 )
  • 可以為父元素添加 overflow: hidden 屬性 ( 不會增加盒子大小 )
<style>
	.father {
		width: 500px;
		height: 500px;
		background-color: red;
		margin-top: 60px;
		border: 1px solid transparent;
		/* padding: 1px */
		/* overflow: hidden */
}
	.son {
		width: 500px;
		height: 500px;
		background-color: blue;
		margin-top: 30px;
}
</style>

以上還有其他能夠解決嵌套盒子塌陷的問題! 例如使用浮動、固定、絕對定位的方式也不會以塌陷問題,那就是往後我們才會學到的方法,現在只要知道有這些方法就可以了,等到日後學會了你再去使用才能知道哪個方法對你覺得最好用就可以囉!

點我瞭解 小青如何每月多賺5位數台幣

CSS 如何清除盒子模型的內外邊距

CSS教學 CSS如何清除盒子模型的內外邊距

在我們寫盒子模型 ( Box Model ) 的時候不是讓盒子靠在左邊,但是那個左邊中間縫隙還是會出現一個白白的區間,上面也會有,那我要怎麼才能真正貼緊邊邊呢? 其實是有辦法的只是瀏覽器會自行默認說這邊會產生與你盒子模型之間的空白處,我們來看看清除內外邊距的辦法吧!

首先創建一個 HTML 結構骨架,在這個全新的 HTML 結構中生成一個 <div> 盒子模型我們要來看看預設系統默認靠左上,並觀察這一個盒子模型是否與瀏覽器邊邊產生空白處呢?! 在創建一個 <ol> 右序列標籤也來看看是不是有一個空白呢?!

<body>
	<div></div>
	<ol>
		<li>hello</li>

	</ol>

</body>

沒錯就是會產生一個空白,這個空白會根據你使用的瀏覽器都會給定一個不同的值,也就是說會自動賦予這些元素不同的內外邊距 ( margin ) 唷! 不信的話你把上面的代碼寫好存檔並使用 chrome 瀏覽器打開,在網頁中按鍵盤的 F12 或是滑鼠點擊右鍵選擇檢查,就能夠去看我們寫的代碼明明沒給內外邊距,但是瀏覽器會給你自動默認,你在用其他瀏覽器打開還會看見不同的值唷!

不同的元素標籤很多都會自動帶有默認內外邊距,而且還會根據你使用不同瀏覽器默認的值也會不同,這效果有好有壞但一般通常都是前端工程師不想看到的結果唷! 為什麼呢?! 那是因為你想每個人會使用的瀏覽器都不同那默認的值都不同,你要為了每種瀏覽器都做考慮嗎? 如果你覺得要的話也可以就是累死日後維護也是累,所以前端工程師是希望能夠統一所有瀏覽器的呈現效果。

為了方便統一管理以及統一呈現,一開始我們就直接清除預設的瀏覽器內外邊距 ( margin ) ,但是但是一個一個清太難了啦! 所以我們會用通配符選擇器,就是之前我們有先提到的符號代表是星號「*」,只是我們之前沒提到什麼作用,它的作用就是能夠選擇所有的選擇器有想起來了嗎? 當你可以全部選擇起來就很方便了。

接下來我們到 CSS 樣式裡頭寫入通配符選擇器,並寫入內邊距 ( padding ) 與外邊距 ( margin ) 數值都給予 0,這樣我們就能夠給每一個瀏覽器一開始要使用自家預設時直接全部清除掉,被都給值為 0 這樣就沒有內外邊距 ( margin ) 了

* {
	padding: 0;
	margin: 0;
}

存檔後打開網頁你在看看是不是真的內外邊距 ( margin ) 被清除呢? 那是肯定的但是要記住一點就是行內元素不要設置上下的內外邊距,如果你忘記行內元素的特性你可以回到之前我講解的行內元素那篇文章好好複習一下唷! 你可能忘記了,這邊大概提一下行內元素只會看內部字體呈現大小的,但是你可以透過傳換行內元素成為塊元素或是行內塊元素就能設置上下邊距囉!

  • 行內元素不能設置上下內外邊距,會不起效果
  • 要讓行內元素有上下效果,可使用轉換成塊元素以及行內塊元素
  • 一般我們都會清除瀏覽器的內外邊距
  • 全選所有選擇器是使用通配符選擇器,符號是星號「*」

CSS 圓角邊框是什麼?

CSS教學 CSS圓角邊框是什麼

學完盒子模型 ( Box Model ) 你可能會問小青說盒子的大小是四邊形我能夠有什麼方法能夠是圓角的呀?! 可以唷! 我們可以透過一些方法去讓原本是四邊形的盒子把邊角修飾的更加圓潤,但你要使用圓角邊框必須在CSS3 當中還要看瀏覽器支不支持,其實這些你也不用擔心的太多基本上現在瀏覽器都支持 CSS3 了,如果不支持的話那瀏覽器我想很少人使用吧!

border-radius: 數值;

我們看這個語法 border 你應該不陌生吧! 就是邊框的英文,而我們也是需要改動邊框讓邊框變成圓角的狀態,radius 就是半徑 ( 圓的半徑 ) 的意思,我們會根據你給的值半徑就會越來越大,可能你會問這個半徑哪來的呢?

其實 CSS 會生成一個隱形的圓假設我們值給 1,那這時候 CSS 就會生成一個半徑為 1 的圓這個圓會靠向四個角落當靠向的時候原本四邊形不是凸出去的地方嗎? 凸出去的地方就會被圓給削掉,最後你就會看見一個有弧形的四邊形啦! 這就是使用圓角邊框的原理。

如何使用圓角邊框?

CSS教學 如何使用圓角邊框

我們實際來看看圓角邊框怎麼使用吧! 我們先創一個全新的 HTML 結構骨架,在裡頭生成一個 <div> 盒子模型就可以了。

<body>
	<div></div>

</body>

接下來我們選擇 <div> 盒子模型元素選擇器,選中後給定 CSS 樣式寬度 200px ( 像素 ) 高度 200px ( 像素 )、背景顏色紅色,在把剛剛學到的邊框原角的 CSS 語法給寫進去半徑我們設定 2px ( 像素 ) 就可以了。

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: red;
		border-radius: 2px;
}
</style>

當你寫好後我們進行存檔,在瀏覽器開啟後你就會看見四邊形的邊框會有原角了,如果你覺得元角不太明顯你可以在把 radius ( 圓的半徑 ) 的值給加大這樣方便你觀察!

  • 邊框原角 border-radius 參數值可以是數值或是百分比
  • 使用百分比讓邊框變成圓型是使用 50%
  • 如果四邊形設置高度的一半就可以做出拉長的圓型
  • border-radius 是由四個數值組成而且有順序的
border-radius: 左上角 右上角 右下角 左下角;

如果我今天我想改變一個角其實還有另一種方式的寫法

border-top-left-radius: 數值; /*左上角*/ 
border-top-right-radius: 數值; /*右上角*/ 
border-bottom-left-radius: 數值; /*左下角*/ 
border-bottom-right-radius: 數值; /*右下角*/ 
點我瞭解 小青如何每月多賺5位數台幣

CSS 盒子模型陰影是什麼?

CSS教學 CSS盒子模型陰影是什麼

盒子模型 ( Box Model ) 的陰影就像是人在太陽下會產生陰影效果,而為了讓盒子看起來更有層次感有時候我們會根據需求讓盒子帶有陰影的效果,陰影我們還可以透過數值給予控制那呈現效果有會不太一樣唷! 盒子陰影是 CSS3 所新增的新功能屬性可透過 box-shadow 屬性來為盒子添加陰影

box-shadow: h-shadow v-shadow blur spread color inset;

box 就是指盒子的意思,shadow 是指影子那兩個盒子起來就是盒子的陰影,那你看到哇賽這盒子陰影太多參數了吧! 沒錯總種有 6 個參數但前面 h-shadow 以及 v-shadow必填的其他是看你狀況選用即可。

盒子陰影數值必填還是選填功能說明
h-shadow必填水平陰影的位置,可負值
v-shadow必填垂直陰影的位置,可負值
blur選填模糊距離
spread選填陰影尺寸
color選填陰影顏色
inset選填能將外部陰影(outset)改為內部陰影

CSS 如何使用盒子模型陰影?

CSS教學 CSS如何使用盒子模型陰影

那現在我們知道這個盒子陰影屬性解下來來試試看呈現出來的效果是如何,我們來先創建一個 HTML 結構骨架,裡面生成一個 <div> 盒子標籤就可以了。

<body>
	<div></div>

</body>

接下來我們選擇 <div> 盒子模型元素選擇器,選中後給定 CSS 樣式寬度 200px ( 像素 ) 高度 200px ( 像素 )、背景顏色紅色,外邊距 ( margin ) 50px 水平居中,在把剛剛學到的盒子陰影給補進去 box-shadow 在來把水平陰影以及垂直陰影給補進去各 25px ( 像素 ) 這樣就可以了

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: red;
		margin: 50px auto;
		box-shadow: 25px 25px;
}
</style>

當你寫好後我們進行存檔,在瀏覽器開啟後你就會看見盒子有陰影了,如果你覺得陰影太陽春了你可以在把其他 4 個參數都玩玩看你就對盒子的陰影比較有感覺唷!

  • 盒子陰影默認是外陰影 ( outset )
  • 盒子陰影不佔用盒子空間,也不影響盒子排列
  • 盒子陰影參數數值單位都是 px ( 像素 )
點我瞭解 小青如何每月多賺5位數台幣

CSS 文字陰影是什麼?

CSS教學 CSS文字陰影是什麼

文字陰影其實和盒子陰影的效果可說是一模一樣,但是實際我們開發中很少用到,客戶也不太常想使用文字陰影效果,不過還是會有一些客戶可能會想要用到這功能,但這功能在 CSS3 中才有這功能這點需要注意一下

text-shadow: h-shadow v-shadow blur spread color inset;

text 是文本的意思,shadow 是陰影合起來就是文本陰影不過一般還是很常很多人叫文字陰影,你沒看錯文字陰影參數也是很多吧! 沒錯總種有 4 個參數但前面 h-shadow 以及 v-shadow必填的其他是看你狀況選用即可。

盒子陰影數值必填還是選填功能說明
h-shadow必填水平陰影的位置,可負值
v-shadow必填垂直陰影的位置,可負值
blur選填模糊距離
color選填陰影顏色

CSS 如何使用文字陰影?

CSS教學 CSS如何使用文字陰影

那現在我們知道這個文字陰影屬性解下來來試試看呈現出來的效果是如何,我們來先創建一個 HTML 結構骨架,裡面生成一個 <div> 盒子標籤就可以了。

<body>
	<div>我是小青</div>

</body>

接下來我們選擇 <div> 盒子模型元素選擇器,裡頭隨便打段文字、文本顏色紅色,字體大小用 60px ( 像素 ),在把剛剛學到的盒子陰影給補進去 text-shadow 在來把水平陰影以及垂直陰影給補進去各 25px ( 像素 ) 這樣就可以了

<style>
	div {
		font-size: 60px;
		color: red;
		text-shadow: 25px 25px;
}
</style>

當你寫好後我們進行存檔,在瀏覽器開啟後你就會看見文字有陰影了,如果你覺得陰影太陽春了你可以在把其他 2 個參數都玩玩看你就對文字的陰影比較有感覺唷!

CSS 盒子模型總結

CSS教學 CSS盒子模型總結

經過一連串的 CSS 教學,我相信你一定對 CSS 盒子模型 ( Box Model ) 有一定程度上的了解了,你知道最基本的 CSS 盒子模型 ( Box Model ) 是由那些部分所組成的嗎? 如果要你讓盒子模型給個邊框 ( border ) 你還記得嗎? 當我們需要調整內容物 ( content ) 的時候是用盒子模型中什麼樣的 CSS 語法來調整的呢? 還記得嗎? 盒子模型與盒子模型之間是不是會有縫隙比較好,那你要用什麼 CSS 語法才能夠調整縫隙呢?

接下來是我們寫好的 <div> 盒子模型會與瀏覽器邊邊產生一個空白縫隙,我們會用什麼方式來把那個空白縫隙給重置掉呢? 什麼選擇器可以選擇全部的選擇器呢? 在 CSS3 當中盒子有了更多的設置你知道盒子的陰影怎麼弄嗎? 盒子的四個邊角要怎麼能夠變成圓角呢? 文字也能設定陰影你還知道怎麼用嗎?

以上這些問題對你來說很簡單就恭喜你學的很好,就算忘記了也沒關係在多看我寫的 CSS 教學文章,並好好思考你會用在什麼地方,自己設計一個題目給自己練習才是能夠成長的方法,如果你真的很想要練習你可以常逛的網站去看別人是怎麼設計的,他們能做出來你也可以的,公司越大型做出來的網站相對會比較好畢竟他們會比較願意聘請高薪,就好好看看厲害的人怎麼寫吧! 只要你願意多加練習我相信你也可以的,共勉之。

點我瞭解 小青如何每月多賺5位數台幣

能看到這裡通常只有 1% 的人,很感謝您可以閱讀到這裡(鞠躬)
本篇文章歡迎社群分享,可按分享按鈕,讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷!
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

發表迴響