(單元21-30)使用 HTML、CSS 開發一個網站 筆記

單元21：使用 margin、padding 來推擠距離
.style1 p{margin-bottom:30px;}
說明：margin是留白的意思，是在段落下方「向外推」30px的間距。

.style{padding-left:15;padding-right:15;}
說明：padding是填充的意思，是在邊界指定區塊的左右兩側「向內推」15px的間距。


單元22：Box Model（盒模型）
透過Box model，開發者可以更瞭解padding、border、margin標籤之間的差異。

<div class="box"></div>
說明：上述文字為HTML頁面box model的語法

.box{
width:300px;
height:300px;
padding:15px;
border:10px solid red;
margin-bottom:30px;
background:black;
color:white;}

說明：上述文字為CSS頁面box model的語法。width與height為box model的主體，當你輸入標題與段落時，文字內容會呈現在主體範圍內。padding為主體與border之間的距離。border為主體的邊界。而margin則是兩個主體之間的距離。

當開發者將background設定為黑色時，主體與padding會呈現同一個顏色(即黑色)。border在沒有設定顏色的情況下，會呈現透明狀。

單元23：使用 margin: auto 讓版型置中

<div class="wrap">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

</div>
說明：在HTML頁面以wrap標籤將header、content、footer打包。

.wrap{width:900px;margin:0 auto 0 auto;}
說明：設定打包範圍為900px，上右下左的外距分別是0 auto 0 auto（上下的外距為0，左右的外距為自動置中）。

.header{height:100px;background:black;}
說明：設定頁眉高度為100px，背景為黑色。

.content{height:300px;background:orange;}
說明：設定內文高度為300px，背景為橘色。

.footer{height:50px;background:pink;}
說明：設定頁腳高度為50px，背景為粉紅色。


單元25：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！
在撰寫「盒模型」時，為了讓網頁有更好的可讀性，開發者除了width與height以外，時常會撰寫padding、border等語法以美化頁面。但每次在撰寫padding與border後，會發現版面的寬度與高度超出預期範圍。

以style1為例，其寬度與高度各為150px，但再加入padding與border左右各10px的設定值以後，其寬度就變為190px了。若開發者要將寬度值固定在150px，則需將原本的width改為110px。

若不想浪費時間計算盒模型的寬度，可參考.style2加入box-sizing:border-box的語法。
讓你不管如何調整padding與border的參數，其寬高都能與width、height的原始值一致。

.style1{
width:150px;
height:150px;
background:black;
padding-left:10px;
padding-right:10px;
border-left:10px solid yellow;
border-right:10px solid yellow;}

.style2{
width:150px;
height:150px;
background:black;
padding-left:10px;
padding-right:10px;
border-left:10px solid yellow;
border-right:10px solid yellow;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}

備註：前綴詞-moz與-webkit是讓box-sizing能兼容舊版瀏覽器的語法。

-moz：讓舊版的Firefox瀏覽器也能正常瀏覽。

-webkit：讓舊版的Chrome瀏覽器也能正常瀏覽。

若要套用box-sizing到網頁中的所有盒模型，可以在CSS頁面的最前面加入*{}語法，如下
*{box-sizing:border-box;}

單元26：CODEPEN：線上撰寫網頁服務

透過Codepen線上服務，使用者可將程式碼分享給其他開發人員。

Settings：變更HTML、CSS之基礎設定值。

ChangeView：變更欄位樣式。

Save：按下Save後，網址後方會出現一串代碼，此時即可將此代碼分享給其他人。

Export：檔案輸出。

單元27：Float 浮動定位技巧

說明：在CSS頁面加入float:left即可讓欄位並排。

.wrap{

margin:0 auto;

width:1000px;}

.box{

width:200px;

background:black;

height:50px;

float:left;}

.box2{

width:800px;

background:pink;

height:50px;

float:left;}

說明：<div class="wrap">將box及box2包起來，所以wrap的寬度1000px為兩者之父元素。

在box與box2寬度相加不超過1000px的情況下，兩個欄位會並排置中。

但若兩者寬度超過1000px，則後者(box2)欄位將會被擠到下方。

備註：margin:0 auto為板塊置中的語法。

單元28：使用 clear 清除浮動
因為Menu與content是用float:left與float:right的浮動語法去作排版的，其浮動效果並沒有一個明確的邊界。因此當我們在menu與content下方寫入footer時，若menu與content的寬度不是滿版格式，footer的設定值就會自動跑到menu與content之間，造成版面的錯亂。

此時我們可以在html頁面中，增加<div class="clearfix"></div>的語法，並在css當中加入.clearfix{clear:both;}。讓Menu與Content的浮動效果有一個明確的邊界，將footer的設定值與其隔絕。這樣頁尾就能正常顯示啦。

單元29：兩欄式、三欄式版面定位技巧
其實就是在div欄位裡應用margin、padding作排版而已。

單元30：設計並排式選單
.topmenu{height:25px;}
說明：設定topmenu的高度為25px

.topmenu li{float:left;}
說明：設定topmenu的選項為並排選單，讓所有<li></li>連結移動到同一行裡。

.topmenu li a {
display:block;
width:200px;
background:green;
color:white;
text-align:center;
text-decoration:none;}
說明：設定topmenu的選項連結為"區塊顯示"並設定其高度、背景顏色、文字顏色、並使文字置中、取消下底線。

.topmenu li a:hover{background:orange;}
說明：設定topmenu的選項連結，當指標滑過時變為橘色。