網頁技術

首頁 > 網頁技術目錄 > 一組CSS讓桌機與手機網頁最適化

一組CSS讓桌機與手機網頁最適化

2022/6/6 , 由 Wanding 編寫發布

分類：

CSS

在桌機和筆電，通常橫式的圖片很適合；但是換成在手機呈現效果，直式的圖片看起來將會更精彩。

在網頁上新增任何內容，要符合不同的螢幕長寬比例的呈現，增加了網頁建置的複雜和困難。在桌機看似乎一切都還好，當改用手機瀏覽手機時，卻發現比例完全不對。新手面對這樣的情境，常常不知所措，也會對網頁的工作望之卻步。

其實，這一點都不難。今天來介紹這簡單的方法，【一技讓網頁照片文字在桌機和手機大不同】。

一. 了解螢幕的規格分佈，定義分界點

種類	非常小	小	中	大	特大
螢幕寬度	<576px	≥576px	≥768px	≥992px	≥1200px
對應設備	手機	PAD	iPAD	筆電	桌機

找出轉換的分界點，例如我把筆電和桌機定為第一類， IPad和各式規格的手機就定為第二類，那麼我們就把分界點訂在991px。

接下來我們要做到以下的功能 : 在992px以上的螢幕寬度呈現橫式的照片，而在991px以下的螢幕寬度呈現直式的照片。

二. 找出控制網站的CSS檔

如果你第一次聽到CSS，請參考這篇文章【CSS是什麼?】

如果你不知道怎麼使用CSS，請參考這篇文章【如何開始使用CSS?】

找出你的網站所連結的CSS檔案，從下列原始碼就可以找出網站連結的系列CSS檔案是style.css

<head>
        <link rel="stylesheet" type="text/css" href="website url/css/style.css">
    </head>

三. 新增兩個CSS class

如果你不知道什麼叫做class，請參考這篇文章【CSS是什麼?】

然後在style.css檔案中，新增下列二個class

第一支稱為display-in-mobile

@media (min-width:991px) {
      .display-in-mobile {
        display: none;
      }
    }

第二支稱為display-in-desktop

@media (max-width:991px) {
      .display-in-desktop {
        display: none;
      }
    }

四. 使用這兩個CSS class，控制桌機和手機的呈現

實例說明

以文章內的這兩張蜂鳥的圖片，我們要做到網頁圖片在桌機呈現橫式；當使用手機瀏覽自動轉換成直式。

寫法如下

<img src="/img/hummingbird1.jpg" alt="" class="dispaly-in-desktop">
    <img src="/img/hummingbird2.jpg" alt="" class="dispaly-in-mobile">

僅僅這兩行，就可以完成桌機圖片和手機圖片的自動轉換。

hummingbird1.jpg 橫式的蜂鳥圖片，在筆電或桌機會呈現出來，換成手機則隱藏。

on desktop

hummingbird2.jpg 直式的蜂鳥圖片，在筆電或桌機會隱藏起來，換成手機則出現。

on mobile

五. 小結

藉由這兩支CSS，可以很輕易的做桌機和手機擁有不同的呈現，例如圖片的橫式和直式、桌機的字體比較大手機的字體比較小、不同的icon呈現....等等。您都可以順利的控制它們。

這個技巧並不難，如果你能夠把它學起來，對於大小不同的螢幕的控制，您將會變得遊刃有餘!

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 一組CSS讓桌機與手機網頁最適化

一組CSS讓桌機與手機網頁最適化

2022/6/6 , 由 Wanding 編寫發布

CSS

在桌機和筆電，通常橫式的圖片很適合；但是換成在手機呈現效果，直式的圖片看起來將會更精彩。

其實，這一點都不難。今天來介紹這簡單的方法，【一技讓網頁照片文字在桌機和手機大不同】。

一. 了解螢幕的規格分佈，定義分界點

種類	非常小	小	中	大	特大
螢幕寬度	<576px	≥576px	≥768px	≥992px	≥1200px
對應設備	手機	PAD	iPAD	筆電	桌機

找出轉換的分界點，例如我把筆電和桌機定為第一類， IPad和各式規格的手機就定為第二類，那麼我們就把分界點訂在991px。

接下來我們要做到以下的功能 : 在992px以上的螢幕寬度呈現橫式的照片，而在991px以下的螢幕寬度呈現直式的照片。

二. 找出控制網站的CSS檔

如果你第一次聽到CSS，請參考這篇文章【CSS是什麼?】

如果你不知道怎麼使用CSS，請參考這篇文章【如何開始使用CSS?】

找出你的網站所連結的CSS檔案，從下列原始碼就可以找出網站連結的系列CSS檔案是style.css

<head>
        <link rel="stylesheet" type="text/css" href="website url/css/style.css">
    </head>

三. 新增兩個CSS class

如果你不知道什麼叫做class，請參考這篇文章【CSS是什麼?】

然後在style.css檔案中，新增下列二個class

第一支稱為display-in-mobile

@media (min-width:991px) {
      .display-in-mobile {
        display: none;
      }
    }

第二支稱為display-in-desktop

@media (max-width:991px) {
      .display-in-desktop {
        display: none;
      }
    }

四. 使用這兩個CSS class，控制桌機和手機的呈現

實例說明

以文章內的這兩張蜂鳥的圖片，我們要做到網頁圖片在桌機呈現橫式；當使用手機瀏覽自動轉換成直式。

寫法如下

<img src="/img/hummingbird1.jpg" alt="" class="dispaly-in-desktop">
    <img src="/img/hummingbird2.jpg" alt="" class="dispaly-in-mobile">

僅僅這兩行，就可以完成桌機圖片和手機圖片的自動轉換。

hummingbird1.jpg 橫式的蜂鳥圖片，在筆電或桌機會呈現出來，換成手機則隱藏。

on desktop

hummingbird2.jpg 直式的蜂鳥圖片，在筆電或桌機會隱藏起來，換成手機則出現。

on mobile

五. 小結

這個技巧並不難，如果你能夠把它學起來，對於大小不同的螢幕的控制，您將會變得遊刃有餘!

返回目錄

網頁技術

首頁 > 網頁技術目錄 > CSS浮動

CSS浮動

2020/9/8 , 由 Wanding 編寫發布

分類：

CSS

浮動元素(float)一直都是網頁排版技巧的基礎，但浮動從來就不是為了排版而生，將他們作為排版工具，跟使用table排版一樣是嚴重錯誤。浮動本身就十分有趣和有用，特別是能做出浮動形狀(shaping)，能夠在網頁中產生非舉行的形狀。

1. 浮動

浮動(float)這個名字實際上是來自於Netscape DevEdge網頁『Extensions to HTML 2.0』上的一段說明：

必須特別說明額外加上的align選項，首先是數值left與right，設定這些對齊方向的影像，是全新的浮動影像類型(floating image type)。

以往只能浮動影像，但CSS能讓你浮動任何元素，從影像到段落到列表，在CSS裡，這個功能是透過float屬性完成的。

float

數值： left | right | none
初始值： none
適用於：所有元素

例如在下列原始碼前面和後面各加入文字，就會輸出下列文繞圖的畫面：

<img src="/img/css/leaf.jpg" style="float: left;" alt="leaf">

深深材料您可以必然，關鍵字公共，舉報買賣依然大幅天然心中生成手續等方面加盟經濟發展，

基本工業主義浪費明星寫真機票群眾此次最終應當，指南從此雜誌出台密碼充分不說微微發佈股市死了私人增加苗栗熱情，一樣是因為指定，爸爸本文手裡瀏覽關心很大有限新聞威脅，此外公斤。一步總統吃螺絲一週一時有了聰明幫你山西好友學術精美，興趣有一種成功一把特色還可以登陸。

浮動元素

浮動元素會從文件裡的一般流向裡移除，但是仍然會影響排版的結果。在CSS裡比較特別地方，在於浮動元素存在自己的平面上，但仍會影響文件的其他部份。這樣的影響來自於當元素浮動時，其他內容會『圍繞四周』，正是大家所熟悉的浮動影像的行為。

例如：讓文字段落向右浮動的CSS寫法，瀏覽器呈現如下方所示：

p.aside {
    float: right;
    width: 200px;
    border: 1px solid;
    margin: 1rem 0 1rem 1rem;
    padding: 5px
}

專輯遠程將會給他外資做法合適相關內容限制出版那種，兩個經營許可證現在本頁也沒指定領域，一人優惠手機文件人群屏東只能信箱始終，幾次註明，

投票連結上次貢獻一塊依據是個遠程農村買賣嚴重，麻煩電力參數玻璃你怎不來

滿足表情配置幾年三個鈴聲人間，出席停止犯罪是這樣發現我的心計算下來，農民相同都有回應，溝通我不國家交易規劃通信如果你，床上不需要網頁先進五金時期，所謂實際更多，價值一件翻譯金融觀看，手中哪裡推薦使用吃飯品質平時，不足他在主要我也。

完全不浮動

除了left與right之外，float還能夠設定為none，float: none用來避免元素產生任何浮動。聽起來怪怪的，既然不要浮動就不要宣告float ，為何還要float: none多此一舉呢？

假設在伺服器設定全域的浮動影像樣式，在茂些特殊的頁面上，你不想讓影像產生任何浮動，除了重寫整個樣式表之外，可以在文件的內嵌樣式表裡，加上 img{float: none}，除了這種情況之外，並沒有太多用到float:none的機會。

2. 浮動的九項原則

向左浮動元素的左邊界外側最遠只能到容器區塊的左邊界內側。同樣的，向右浮動元素最遠也只能到容器區塊的右邊界內側。除非較晚出現元素的上緣在較早出現元素下緣的下方。同樣的，浮動元素的右外側邊界一定要在文件原始碼裡更早出現的向右浮動元素的左外側邊界的左方，除非較晚出現元素的上緣在較早出現元素下緣的下方。同理，向右浮動元素的左外側邊界不能在它左方所有向左浮動的右外側邊界的左方。若浮動元素在兩個重疊的邊界範圍間，則浮動元素的放置位置會如同有個區塊級親代元素，且位於兩個邊界重疊的元素之間。

假設段落中有一浮動影像，這個影像的上緣必須放在包含影像的行方框的上緣。

同樣的，右側還有其他浮動元素的向右浮動元素，其左外側邊界也不能超出容器元素的左側邊。

圖1：浮動向左或向右

圖2：避免浮動元素重疊

圖3：避免重疊

圖4：浮動元素不是氣球，不能一直往上飄

圖5：浮動元素低於之前的浮動元素

圖6：浮動元素與所在的情境脈絡切平

圖7：若是空間不夠，浮動元素會被推到下一行

圖8：在其他的限制條件上，盡可能的往上移

圖9：盡可能往左或往右放置

浮動元素的左（或右）外緣不能是容器區塊的左（或右）內緣。
浮動元素的左外側邊界必須要在文件原始碼中前一個向左浮動元素的右外側邊界的右邊
向左浮動元素的右外側邊界不能在它右方所有向右浮動元素的左外側邊界的右方
浮動元素的上緣不能比親代元素的內側上緣高
浮動元素的上緣不能高於其他更早出現的浮動元素或區塊級元素的上緣
浮動元素的上緣不能高於包含文件原始檔中更早出現的元素方框的行方框上緣
左側還有其他浮動元素的向左浮動元素，其右外側邊界不能超出容器區塊的右外側邊
浮動元素必須盡可能的往上方放置
向左浮動元素必須盡可能往左側移，向右浮動元素應該進可能往右側移，較高的位置優先於更向左或向右的位置

3. Clearing

並不是所有的情況都會想讓內容流過浮動元素，在某些情況下，你會想要避免這樣的行為，要是文件分為不同章節，可能不會想讓浮動元素從一個章節凸出到另一個章節。在這樣的情況下，會想要設定每個章節的第一個元素禁止任何浮動元素出現在它旁邊。這時候，就需要用到clear這個屬性。

clear

數值： left | right | both | none
初始值： none
適用於：區塊級元素

清除左側

如果章節的開頭標題為h2，那麼要所有的h2元素都不會被放置在浮動元素的右側，可以做如下的宣告：

h2 {clear: left;}

清除兩側

為了確保h2元素不會與任何浮動元素出現在同一行，可以使用both值

h2 {clear: both;}

完全不清除

若要許h2元素兩側出現浮動元素，可以使用none值

h2 {clear: none;}

小結

本篇文章針對浮動的基本概念，做詳細說明。這時候，文繞圖是不是變得非常簡單了。

返回目錄

網頁技術

首頁 > 網頁技術目錄 > CSS浮動

CSS浮動

2020/9/8 , 由 Wanding 編寫發布

CSS

1. 浮動

浮動(float)這個名字實際上是來自於Netscape DevEdge網頁『Extensions to HTML 2.0』上的一段說明：

必須特別說明額外加上的align選項，首先是數值left與right，設定這些對齊方向的影像，是全新的浮動影像類型(floating image type)。

以往只能浮動影像，但CSS能讓你浮動任何元素，從影像到段落到列表，在CSS裡，這個功能是透過float屬性完成的。

float

數值： left | right | none
初始值： none
適用於：所有元素

例如在下列原始碼前面和後面各加入文字，就會輸出下列文繞圖的畫面：

<img src="/img/css/leaf.jpg" style="float: left;" alt="leaf">

深深材料您可以必然，關鍵字公共，舉報買賣依然大幅天然心中生成手續等方面加盟經濟發展，

浮動元素

例如：讓文字段落向右浮動的CSS寫法，瀏覽器呈現如下方所示：

p.aside {
    float: right;
    width: 200px;
    border: 1px solid;
    margin: 1rem 0 1rem 1rem;
    padding: 5px
}

投票連結上次貢獻一塊依據是個遠程農村買賣嚴重，麻煩電力參數玻璃你怎不來

完全不浮動

2. 浮動的九項原則

假設段落中有一浮動影像，這個影像的上緣必須放在包含影像的行方框的上緣。

同樣的，右側還有其他浮動元素的向右浮動元素，其左外側邊界也不能超出容器元素的左側邊。

圖1：浮動向左或向右

圖2：避免浮動元素重疊

圖3：避免重疊

圖4：浮動元素不是氣球，不能一直往上飄

圖5：浮動元素低於之前的浮動元素

圖6：浮動元素與所在的情境脈絡切平

圖7：若是空間不夠，浮動元素會被推到下一行

圖8：在其他的限制條件上，盡可能的往上移

圖9：盡可能往左或往右放置

浮動元素的左（或右）外緣不能是容器區塊的左（或右）內緣。
浮動元素的左外側邊界必須要在文件原始碼中前一個向左浮動元素的右外側邊界的右邊
向左浮動元素的右外側邊界不能在它右方所有向右浮動元素的左外側邊界的右方
浮動元素的上緣不能比親代元素的內側上緣高
浮動元素的上緣不能高於其他更早出現的浮動元素或區塊級元素的上緣
浮動元素的上緣不能高於包含文件原始檔中更早出現的元素方框的行方框上緣
左側還有其他浮動元素的向左浮動元素，其右外側邊界不能超出容器區塊的右外側邊
浮動元素必須盡可能的往上方放置
向左浮動元素必須盡可能往左側移，向右浮動元素應該進可能往右側移，較高的位置優先於更向左或向右的位置

3. Clearing

clear

數值： left | right | both | none
初始值： none
適用於：區塊級元素

清除左側

如果章節的開頭標題為h2，那麼要所有的h2元素都不會被放置在浮動元素的右側，可以做如下的宣告：

h2 {clear: left;}

清除兩側

為了確保h2元素不會與任何浮動元素出現在同一行，可以使用both值

h2 {clear: both;}

完全不清除

若要許h2元素兩側出現浮動元素，可以使用none值

h2 {clear: none;}

小結

本篇文章針對浮動的基本概念，做詳細說明。這時候，文繞圖是不是變得非常簡單了。

返回目錄

網頁技術

首頁 > 網頁技術目錄 > Flexbox排版

Flexbox排版

2020/9/1 , 由 Wanding 編寫發布

分類：

CSS

Flexbox排版是個簡單又強大的排版工具，透過指定頁面上各組成部份佔據的空間、內容的對齊方式及元素視覺上的順序進行排版，能夠輕易的將內容進行水平和垂直的調整，也能夠沿著單一軸向排列，或是跨行等等。

透過flexible box module layout，能夠讓元素在各種不同螢幕尺寸與顯示設備上產生有可預期的行為，flexbox在響應式網站上運作得很好，這類型網站內容能夠隨著可用空間的增減調整呈現的內容數量。

Flexbox擺脫了親代與子代的關係，Flexbox佈局是透過將元素宣告display:flex 或 display:inline-flex 來運作，讓元素成為彈性容器(flex container)，在可用空間內調整子代元素並控制版型，彈性容器的子代元素就成為彈性項目(flex item)，如下例所示：

<style type=text/css>
div#one {display: flex;}
div#two {display: inline-flex}
div {border:1px dashed; background: yellow;}
div > * {border:1px solid; background: #a4e9f4;}
div p {margin:0;}
</style>
<div id="one">
         <p>第一個長列彈性項目</p>
         <span>彈性項目</span>
         <p>彈性項目</p>
</div>
<div id="two">
         <span>第二個長列彈性項目</span>
         <span>彈性項目</span>
         <p>彈性項目</p>
</div>

這兩個彈性容器的差別在於一個設定為display:flex，另一個則設定為display:inline-flex，第一個div為使用flex排版的區塊方框，而第二個div則是使用flex排版的行內區塊方框。

彈性容器內的項目會沿著主軸(main axis)排列，主軸可以是水平軸或是垂直軸，也就是可以將項目排列成列或行。

請參考下例：

<style type=text/css>
nav {
display: flex;
border-bottom: 1px solid #ccc;
}
a {
margin: 0 5px;
padding: 5px 15px;
border-radius: 3px 3px 0 0;
background-color: #ddaa00;
text-decoration: none;
color: #ffffff;
}
a:hover,a:focus,a:active {
background-color: #ffcc22;
color: black;
}
</style>
<nav>
<a href="">Home</a>
<a href="">About</a>
<a href="">Blog</a>
<a href="">Works</a>
<a href="">Contact Us</a>
</nav>

瀏覽器呈現如下所示

1. 彈性容器

一個需要了解的重點是彈性容器(flex container)，也稱為容器方框(container box)，設定了display:flex 或 display:inline-flex的元素會成為彈性容器，同時為子元素建立彈性格式化環境。

這些子代元素就是彈性項目(flex item)，可以是 DOM節點、文字節點或生成的內容等。彈性容器中的絕對定位子代同樣也是彈性項目，但以等同於自己是彈性容器中唯一的彈性項目的方式設定尺寸預位置。

flex-direction屬性

如果想要讓排版的方向由上而下、由左而右、由右而左，甚至是由下而上，都可以使用flex-direction控制彈性項目排列的主要軸向。 flex-direction的屬性數值可以是下列四種:

row
row-reverse
column
column-reverse

<style type=text/css>
nav {
         display: inline-flex;
         flex-direction: column;
         border-bottom: 1px solid #ccc;
}
a {
         margin: 5px;
         padding: 5px 15px;
         border-radius: 3px;
         background-color: #ddaa00;
         text-decoration: none;
         color: #ffffff;
}
a:hover,
a:focus,
a:active {
          background-color: #ffcc22;
          color: black;
}
</style>

將nav的CSS做了些微修改，因為flex-direction:column;的屬性，排列的方向由原本的行改變成列的方向。

flex-direction的四種屬性，如下圖所示

彈性行拆行

如果彈性容器的主軸無法容納所有的彈性項目，預設情況下彈性行不會拆行，也不會對尺寸做任何調整，而是在彈性項目的flex屬性允許時縮小或溢出彈性容器的邊界。沒有加入flex-wrap屬性或flex-wrap:nowrap;呈現如下：

加入flex-wrap:wrap;螢幕縮小時結果與上面不同

2. 調整內容

justify-content屬性指示彈性項目在彈性容器進行位置的調整。這個屬性作用在彈性容器，而不是個別的彈性項目。屬性的數值有下列六種：

flex-start：ABC朝開頭聚集，A最靠近起點
flex-end：ABC朝點聚集，C最靠近終點
center：ABC居中對齊
space-between：任何兩個項目間的距離相等，第一個項目緊靠起點，最後一個項目緊靠終點
space-around：起點與A的距離是A與B的一半，終點與C的距離是B與C的一半
space-evenly：空白區域除以(項目總數加1)，以下面為例，共有4段相等的空白距離

這六種調整內容的效果如下圖所示

3. 對齊項目

align-item屬性定義了彈性內容在彈性線相交軸(cross axis)上的對齊行為。與justify-content相同， align-item是宣告在彈性內容而不是彈性項目。

屬性的數值有下列五種：

flex-start
flex-end
center
baseline
stretch

五種對齊項目的效果，如下圖所示：

小結

flexbox排版的變化相當多，本文僅針對重點的部份介紹。其它更細節的功能和調整，若有需要再進一步研究學習。以上所提，若能充分運用，網頁排版功力自然提昇良多。

返回目錄

網頁技術

首頁 > 網頁技術目錄 > Flexbox排版

Flexbox排版

2020/9/1 , 由 Wanding 編寫發布

CSS

<style type=text/css>
div#one {display: flex;}
div#two {display: inline-flex}
div {border:1px dashed; background: yellow;}
div > * {border:1px solid; background: #a4e9f4;}
div p {margin:0;}
</style>
<div id="one">
         <p>第一個長列彈性項目</p>
         <span>彈性項目</span>
         <p>彈性項目</p>
</div>
<div id="two">
         <span>第二個長列彈性項目</span>
         <span>彈性項目</span>
         <p>彈性項目</p>
</div>

彈性容器內的項目會沿著主軸(main axis)排列，主軸可以是水平軸或是垂直軸，也就是可以將項目排列成列或行。

請參考下例：

<style type=text/css>
nav {
display: flex;
border-bottom: 1px solid #ccc;
}
a {
margin: 0 5px;
padding: 5px 15px;
border-radius: 3px 3px 0 0;
background-color: #ddaa00;
text-decoration: none;
color: #ffffff;
}
a:hover,a:focus,a:active {
background-color: #ffcc22;
color: black;
}
</style>
<nav>
<a href="">Home</a>
<a href="">About</a>
<a href="">Blog</a>
<a href="">Works</a>
<a href="">Contact Us</a>
</nav>

瀏覽器呈現如下所示

1. 彈性容器

flex-direction屬性

row
row-reverse
column
column-reverse

<style type=text/css>
nav {
         display: inline-flex;
         flex-direction: column;
         border-bottom: 1px solid #ccc;
}
a {
         margin: 5px;
         padding: 5px 15px;
         border-radius: 3px;
         background-color: #ddaa00;
         text-decoration: none;
         color: #ffffff;
}
a:hover,
a:focus,
a:active {
          background-color: #ffcc22;
          color: black;
}
</style>

將nav的CSS做了些微修改，因為flex-direction:column;的屬性，排列的方向由原本的行改變成列的方向。

flex-direction的四種屬性，如下圖所示

彈性行拆行

加入flex-wrap:wrap;螢幕縮小時結果與上面不同

2. 調整內容

justify-content屬性指示彈性項目在彈性容器進行位置的調整。這個屬性作用在彈性容器，而不是個別的彈性項目。屬性的數值有下列六種：

flex-start：ABC朝開頭聚集，A最靠近起點
flex-end：ABC朝點聚集，C最靠近終點
center：ABC居中對齊
space-between：任何兩個項目間的距離相等，第一個項目緊靠起點，最後一個項目緊靠終點
space-around：起點與A的距離是A與B的一半，終點與C的距離是B與C的一半
space-evenly：空白區域除以(項目總數加1)，以下面為例，共有4段相等的空白距離

這六種調整內容的效果如下圖所示

3. 對齊項目

align-item屬性定義了彈性內容在彈性線相交軸(cross axis)上的對齊行為。與justify-content相同， align-item是宣告在彈性內容而不是彈性項目。

屬性的數值有下列五種：

flex-start
flex-end
center
baseline
stretch

五種對齊項目的效果，如下圖所示：

小結

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 色彩、背景與漸層

色彩、背景與漸層

2020/8/31 , 由 Wanding 編寫發布

分類：

CSS

多久沒改編網頁的色彩了呢？把預設的白底黑字與藍色的連結改變成任何的色彩組合。改變文字顏色只是個開始，最終是讓頁面上的文字呈現各種不同的色彩，等到能加上背景的影像之後，似乎就變得無所不能。 CSS帶領色彩與背景進入全新的境界，賦予頁面或元素各種不同的色彩與背景。

1. 色彩

使用CSS能夠設定任何元素的前景和背景。前景指的是一般的文字，也包含元素周圍的邊框。也就是，有兩種直接影響元素前景的方法：一種是使用color屬性，另一種是使用邊框屬性改變邊框的顏色。

前景顏色

要改變元素的前景顏色，最簡單的方法就是使用color屬性。設定及輸出如下方所示：(為方便閱讀字體放大)

<p style="color: red">使用太多的色彩會造成使用者的負擔</p>
<p>使用太多的色彩會造成使用者的負擔</p>

顏色的另一個用途是讓特定類型的文字更為醒目，比如粗體字已經十分明顯，但是如果再換上不同的顏色，就會更加顯眼。(為方便閱讀字體放大)

b,strong {color:maroon}

影響邊框

color值也能夠影響元素周圍的邊框，如果我們作以下的宣告

p.aside {color:orange; border-style:solid;}

當我們使用<p class="aside">元素時，就會出現橘色的文字和邊框

影響影像邊框

由於影像本身就包含了顏色，所以設定color並不會影響影像圖片內容，但可以用來改變影像周圍出現的所有邊框。 color或border-color都能夠產生相同的效果。

img.type1 {border-style:solid; color:gray;}
img.type2 {border-style:solid; border-style:gray;}

2. 背景

元素的背景區域預設是包含了前景之後的所有空間直到邊框外緣，也就是內容方框與內距區域都是元素背景的一部分，邊框則是描繪在背景之上。

背景顏色

要指定元素的背景顏色，就得使用background-color屬性，這個屬性可以使用所有合法的顏色值。

p {background-color:#adebeb;}

特殊效果

結合color與background-color能夠產生一些有趣的效果。

h2 {color:white; background:#1a1a1a;}

背景影像

以往在HTML裡，若要加上背景影像，通常會寫成<body background="sample.jpg>，而在CSS裡除了可以很容易做到與HTML效果，還能做一些更複雜的效果。 CSS使用background-image屬性來設定背景影像。

 p.starry {backgroud-image:URL; color:white;}

background-image的值有下列五種：

影像的URL
linear-gradient
repeating-linear-gradient
radial-gradient
repeating-radial-gradient

背景位置

把影像圖片放到背景區之後，能不能決定影像放置的發法？當然可以，接下來我們使用background-position來設定背景位置。

body {background-image:URL;
background-repeat:no-repeat;
backgroun-position:center;
}

結果就是只有一張背景圖，回呈現在置中的位置上。有關backgroun-position的數值如下：

left
center
right
top
bottom
percentage
length

背景重複

要達到背景重複的效果，可以使用background-repeat屬性來設定。乍看之下似乎很複雜，實際上很簡單。背景重複共有四個值：

repeat
non-repeat
space
round

另外有兩個變化型：
repeat-x：只有針對水平的x軸重複
repeat-y：只有針對垂直的y軸重複

3. 漸層

有兩種新的影像是完全由CSS產生：線性漸層(linear gradient)與放射性漸層(radial gradient)，兩種類型分別再係分為重複和非重複。漸層最常使用在背景，也可以用在任何能夠使用影像圖片的場合。

漸層就是從一個顏色平滑的轉換到另外一個顏色，例如從白色到黑色的漸層，會逐漸變暗到灰色，最後再變成黑色。各種色調之間變化的程度會依能夠作漸層的空間而定。

body {background-image: linear-gradient(90deg, white, black);}

則會形成一個由白到黑漸層的body區域

線性漸層

線性漸層的基本語法為linear-gradient(angle,to side,color1,color2)，如下例：

body1 {background-image:linear-gradient(cyan,orange);}

body2 {background-image:linear-gradient(90deg,cyan,orange);}

body3 {background-image:linear-gradient(to left,cyan,orange);}

body4 {background-image:linear-gradient(-45deg,cyan,white,orange);}

body5 {background-image:linear-gradient(to bottom left,cyan,white,orange);}

放射性漸層

線性漸層雖然很酷，但有時候需要的是圓形的漸層，能夠用來產生焦點、圖形的陰影、光芒等等效果。使用的語法與線性漸層相似。
radial-gradient(shape|size|position,color1,color2)

body {background-image:radial-gradient(100px,cyan,orange);}

結論

設定元素的顏色背景是網頁作者十分強大的工具，比起傳統的作法，用CSS設定顏色與背景的優點在於能夠作用在文件中的任何元素！

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 色彩、背景與漸層

色彩、背景與漸層

2020/8/31 , 由 Wanding 編寫發布

CSS

1. 色彩

前景顏色

要改變元素的前景顏色，最簡單的方法就是使用color屬性。設定及輸出如下方所示：(為方便閱讀字體放大)

<p style="color: red">使用太多的色彩會造成使用者的負擔</p>
<p>使用太多的色彩會造成使用者的負擔</p>

顏色的另一個用途是讓特定類型的文字更為醒目，比如粗體字已經十分明顯，但是如果再換上不同的顏色，就會更加顯眼。(為方便閱讀字體放大)

b,strong {color:maroon}

影響邊框

color值也能夠影響元素周圍的邊框，如果我們作以下的宣告

p.aside {color:orange; border-style:solid;}

當我們使用<p class="aside">元素時，就會出現橘色的文字和邊框

影響影像邊框

img.type1 {border-style:solid; color:gray;}
img.type2 {border-style:solid; border-style:gray;}

2. 背景

元素的背景區域預設是包含了前景之後的所有空間直到邊框外緣，也就是內容方框與內距區域都是元素背景的一部分，邊框則是描繪在背景之上。

背景顏色

要指定元素的背景顏色，就得使用background-color屬性，這個屬性可以使用所有合法的顏色值。

p {background-color:#adebeb;}

特殊效果

結合color與background-color能夠產生一些有趣的效果。

h2 {color:white; background:#1a1a1a;}

背景影像

 p.starry {backgroud-image:URL; color:white;}

background-image的值有下列五種：

影像的URL
linear-gradient
repeating-linear-gradient
radial-gradient
repeating-radial-gradient

背景位置

把影像圖片放到背景區之後，能不能決定影像放置的發法？當然可以，接下來我們使用background-position來設定背景位置。

body {background-image:URL;
background-repeat:no-repeat;
backgroun-position:center;
}

結果就是只有一張背景圖，回呈現在置中的位置上。有關backgroun-position的數值如下：

left
center
right
top
bottom
percentage
length

背景重複

要達到背景重複的效果，可以使用background-repeat屬性來設定。乍看之下似乎很複雜，實際上很簡單。背景重複共有四個值：

repeat
non-repeat
space
round

另外有兩個變化型：
repeat-x：只有針對水平的x軸重複
repeat-y：只有針對垂直的y軸重複

3. 漸層

body {background-image: linear-gradient(90deg, white, black);}

則會形成一個由白到黑漸層的body區域

線性漸層

線性漸層的基本語法為linear-gradient(angle,to side,color1,color2)，如下例：

body1 {background-image:linear-gradient(cyan,orange);}

body2 {background-image:linear-gradient(90deg,cyan,orange);}

body3 {background-image:linear-gradient(to left,cyan,orange);}

body4 {background-image:linear-gradient(-45deg,cyan,white,orange);}

body5 {background-image:linear-gradient(to bottom left,cyan,white,orange);}

放射性漸層

body {background-image:radial-gradient(100px,cyan,orange);}

結論

設定元素的顏色背景是網頁作者十分強大的工具，比起傳統的作法，用CSS設定顏色與背景的優點在於能夠作用在文件中的任何元素！

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 內距、邊框、輪廓與邊界

內距、邊框、輪廓與邊界

2020/8/30 , 由 Wanding 編寫發布

分類：

CSS

有了基本方框的慨念之後，我們進一步來談內距、邊框、輪廓與邊界範圍。首先，先把示意圖放在下方，先找回各個元素的印象：

1. 內距

內距(padding)是在內容區域與邊框(border)之間的距離，設定內距的方法為透過padding屬性來進行。

<style type=text/css>
h2 {padding: 2em; background: yellow;}
</style>

瀏覽器顯示

如果要在四周分別設定不同的內距，可以如下語法:

h1 {padding:10px 20px 15px 5px;}

其順序固定為上、右、下、左，很重要，別搞錯。從上面順時鐘(記得要順時中)繞一圈，就必較容易記。

另外，也可以混合使用不同單位同時使用。如下所示：

h1 {padding:14px 5em 0.2in 3ex;}

重複數值

如果要設定內距上下一樣、左右也相同。那麼，原本寫法

h1 {padding:10px 20px 10px 20px;}

可以精簡成如下，記成（上下、左右）

h1 {padding:10px 20px;}

如果上下左右的內距都相同數值，可以精簡成一個數值即可

h1 {padding:15px;}

單邊內距

如果我們只需設定單一邊的內距可以，只要在padding後面加上代表四個方向的字母即可

p {padding-left: 30px;}

四個單邊內距屬性分別為 padding-top、padding-right、padding-bottom、padding-left。

百分比值與內距

可以使用百分比值設定元素內距，百分比是以親元素的內容區域寬為計算基準，會隨這親元素的寬度變化而變化

p {padding: 10%; background-color: yellow;}

當親元素(如DIV)寬度為500px，內距為50px，如下圖:

當親元素寬度為300px，內距為30px，如下圖

內距與行內元素

上面介紹的都是以區塊方框為主，而行內非置換元素的內距行則有些不同

strong {padding-left: 25px;}

如果我們在文字片段中加上<strong>標籤，可以看到粗體字左方空出25px

內距與置換元素

下面來介紹內距對圖片產生的效果，如果圖片加上有顏色的padding，如下圖所示

img {padding: 15px; background: cyan;}

瀏覽器顯示如下

2. 邊框

元素的邊框(border)是圍繞著元素內容與內距區週邊的一條以上的線段，每個邊框都會有三個屬性：

寬度(width)
粗細(thickness)
樣式、外觀及顏色

邊框樣式

邊框樣式是邊框最重要的部份，因為它控制了邊框的外框，如果少了它就不會有任何邊框。

邊框樣式列舉如下：

邊框的樣式
none	hidden	solid	dotted	dashed
double	groove	ridge	inset	ouset

邊框樣式瀏覽器顯示

單邊樣式

當你只須要單邊進行設定時，這時候單邊樣式就派上用場

border-top-style
border-right-style
border-bottom-style
border-left-style

邊框寬度

設定邊框寬度，要用border-width屬性。可以有thin、medium、thick三種數值，當然也可用px來設定。

邊框顏色

設定邊框的顏色十分簡單，只要使用border-color這個屬性即可，可以使用顏色名稱、RGB、十六進位來表示。

邊框圓角

透過border-radius屬性來定義圓弧的距離，距離月愈大則邊框更圓滑。

3. 輪廓

CSS定義了一種特殊的元素，稱為輪廓(outline)。輪廓通常是在描繪在邊框之外。輪廓基本上與邊框有下列四點差異：

輪廓不佔任何空間
輪廓可以是非矩形
設計者常把重點放在渲染元素的輪廓
輪廓是個全有和全無的設定

輪廓樣式(outline-style)

類似border-style，可以outline-style設定輪廓的樣式。唯一不同的，輪廓不能使用hidden。圖形展示請參考邊框樣式圖即可

輪廓粗細(outline-width)

決定輪廓的粗細，可以用outline-width屬性來進型設定

輪廓顏色(outline-color)

顏色的部份，使用outline-color屬性來設定

唯一的輪廓縮寫屬性

這是唯一的輪廓縮寫屬性，沒有其他。可以使用outline-style outline-width outline-color三個數值並列設定。

span {outline: solid  medium  olive;}

4. 邊界範圍

大多數正常流向元素之間的間隔，都是由元素的邊界範圍(margin)所產生。設定邊界範圍能在元素週邊產生額外的空白空間(blank space)，空白空間一般指的是不能有其他元素存在，同時呈現出親代元素背景的區域。

邊界範圍設定

使用margin屬性來進行設定邊界範圍，如img{margin: 1rem;}，如此會在圖片周圍加上1rem的額外空白。另外也適用上、右、下、左的數值設定。如下所示：

h1 {margin: 10px 20px 15px 5px;}

單側邊界範圍屬性

當你只想在一邊設定邊界範圍，就可以使用margin-top、margin-right、margin-bottom、margin-left進行單側的設定。

h2 {margin-left: 15px;}

邊界範圍與行內元素

邊界範圍也能夠作用在行內元素，但是上下邊界完全不會有任何作用。只有左右會出現空白的邊界範圍。

strong {margin-left: 20px; background: cyan;}

小結

能夠改變任何元素的邊界範圍、邊框、與內距，是CSS比傳統網頁標記更為優秀的原因。透過熟悉padding、margin、border的各式設定，可以讓您在編寫調校網頁時更能得心應手。

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 內距、邊框、輪廓與邊界

內距、邊框、輪廓與邊界

2020/8/30 , 由 Wanding 編寫發布

CSS

有了基本方框的慨念之後，我們進一步來談內距、邊框、輪廓與邊界範圍。首先，先把示意圖放在下方，先找回各個元素的印象：

1. 內距

內距(padding)是在內容區域與邊框(border)之間的距離，設定內距的方法為透過padding屬性來進行。

<style type=text/css>
h2 {padding: 2em; background: yellow;}
</style>

瀏覽器顯示

如果要在四周分別設定不同的內距，可以如下語法:

h1 {padding:10px 20px 15px 5px;}

其順序固定為上、右、下、左，很重要，別搞錯。從上面順時鐘(記得要順時中)繞一圈，就必較容易記。

另外，也可以混合使用不同單位同時使用。如下所示：

h1 {padding:14px 5em 0.2in 3ex;}

重複數值

如果要設定內距上下一樣、左右也相同。那麼，原本寫法

h1 {padding:10px 20px 10px 20px;}

可以精簡成如下，記成（上下、左右）

h1 {padding:10px 20px;}

如果上下左右的內距都相同數值，可以精簡成一個數值即可

h1 {padding:15px;}

單邊內距

如果我們只需設定單一邊的內距可以，只要在padding後面加上代表四個方向的字母即可

p {padding-left: 30px;}

四個單邊內距屬性分別為 padding-top、padding-right、padding-bottom、padding-left。

百分比值與內距

可以使用百分比值設定元素內距，百分比是以親元素的內容區域寬為計算基準，會隨這親元素的寬度變化而變化

p {padding: 10%; background-color: yellow;}

當親元素(如DIV)寬度為500px，內距為50px，如下圖:

當親元素寬度為300px，內距為30px，如下圖

內距與行內元素

上面介紹的都是以區塊方框為主，而行內非置換元素的內距行則有些不同

strong {padding-left: 25px;}

如果我們在文字片段中加上<strong>標籤，可以看到粗體字左方空出25px

內距與置換元素

下面來介紹內距對圖片產生的效果，如果圖片加上有顏色的padding，如下圖所示

img {padding: 15px; background: cyan;}

瀏覽器顯示如下

2. 邊框

元素的邊框(border)是圍繞著元素內容與內距區週邊的一條以上的線段，每個邊框都會有三個屬性：

寬度(width)
粗細(thickness)
樣式、外觀及顏色

邊框樣式

邊框樣式是邊框最重要的部份，因為它控制了邊框的外框，如果少了它就不會有任何邊框。

邊框樣式列舉如下：

邊框的樣式
none	hidden	solid	dotted	dashed
double	groove	ridge	inset	ouset

邊框樣式瀏覽器顯示

單邊樣式

當你只須要單邊進行設定時，這時候單邊樣式就派上用場

border-top-style
border-right-style
border-bottom-style
border-left-style

邊框寬度

設定邊框寬度，要用border-width屬性。可以有thin、medium、thick三種數值，當然也可用px來設定。

邊框顏色

設定邊框的顏色十分簡單，只要使用border-color這個屬性即可，可以使用顏色名稱、RGB、十六進位來表示。

邊框圓角

透過border-radius屬性來定義圓弧的距離，距離月愈大則邊框更圓滑。

3. 輪廓

CSS定義了一種特殊的元素，稱為輪廓(outline)。輪廓通常是在描繪在邊框之外。輪廓基本上與邊框有下列四點差異：

輪廓不佔任何空間
輪廓可以是非矩形
設計者常把重點放在渲染元素的輪廓
輪廓是個全有和全無的設定

輪廓樣式(outline-style)

類似border-style，可以outline-style設定輪廓的樣式。唯一不同的，輪廓不能使用hidden。圖形展示請參考邊框樣式圖即可

輪廓粗細(outline-width)

決定輪廓的粗細，可以用outline-width屬性來進型設定

輪廓顏色(outline-color)

顏色的部份，使用outline-color屬性來設定

唯一的輪廓縮寫屬性

這是唯一的輪廓縮寫屬性，沒有其他。可以使用outline-style outline-width outline-color三個數值並列設定。

span {outline: solid  medium  olive;}

4. 邊界範圍

邊界範圍設定

使用margin屬性來進行設定邊界範圍，如img{margin: 1rem;}，如此會在圖片周圍加上1rem的額外空白。另外也適用上、右、下、左的數值設定。如下所示：

h1 {margin: 10px 20px 15px 5px;}

單側邊界範圍屬性

當你只想在一邊設定邊界範圍，就可以使用margin-top、margin-right、margin-bottom、margin-left進行單側的設定。

h2 {margin-left: 15px;}

邊界範圍與行內元素

邊界範圍也能夠作用在行內元素，但是上下邊界完全不會有任何作用。只有左右會出現空白的邊界範圍。

strong {margin-left: 20px; background: cyan;}

小結

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 瞭解CSS的基本視覺區塊

瞭解CSS的基本視覺區塊

2020/8/28 , 由 Wanding 編寫發布

分類：

CSS

1. 基本方框

CSS的核心假設，認為所有的元素都會產生一個以上的矩形方框(element box)。每個矩形方框的中心是內容區域(content area)，內容區域的周圍是不定量的內距(padding)、邊框(border)、輪廓(outline)、邊界範圍(margin)。這些元素都能夠透過特定屬性，如margin-left或padding-top分別進行設定，輪廓沒有特定方向限定的屬性也比較少用到。內容的背景預設是在內距之內，邊界範圍一定是透明的，能過顯示出親代元素的背景。內距不可以為負值，但是邊界範圍可以是負值。邊框是透過定義solid或inset等樣式產生，顏色則是由boder-color設定，若沒有指定顏色，邊框會是內容區的前景顏色。元素的方框的各個部份會受到width或height屬性影響。

2. 方框種類介紹

正常走向(normal flow)：一般西方語言由左而右，由上而下的文字呈現方向，同時也是傳統的HTML文件排版文字使用的方向。大多數的元素都會在正常的流向，要讓元素離開正常流向唯一的方法是浮動(float)、定置(positioned)或放到flexble box或grid layout元素當中。
非置換元素(nonreplaced element)：這類元素的內容包含在文件當中，例如段落(p)就是非置換元素，可以在元素內看到段落的文字內容。
置換元素(replaced element)：這種元素是作為其他東西的替身，置換元素最典型的例子是<img>元素，指向一個會插入文件流向的影像檔，插入的位置就是<img>出現的位置，大多數的表單元素都是可置換元素。如<input type="radio">。
根元素(root element)：文件樹最上層的元素，就是<html>元素。
區塊方框(block box)：段落、標題、或div等元素產生的方框，在正常的流向中，這類方框前後會換行，使得區塊方框會形成垂直堆疊。而透過display:block宣告也能讓元素產生區塊方框。
行內方框(inline box)：如strong或span等元素產生的方框，這類方框前後不會產生斷行，透過display:inline宣告能讓元素產生行內方框。
行內區塊方框(inline-block box)：這個比較特別，內部行為類似區塊方框，但是外部行為如同行內方框，它的行為類似於置換元素，可以想像將div元素放到文字行內，就是這那個樣子。

3. 水平屬性的運用

<p style="width:200px;"> My letter for you </p>
<p style="width:200px; padding:10px; margin:20px;"> My letter for you </p>

設定水平格式的七個屬性分別為margin-left、border-left、padding-left、width、padding-right、border-right、 margin-right，這些屬性與區塊方框的水平格局息息相關。圖示第一行的段落內容為200px；但是第二行則必須再加上兩側內距各10px，並加上兩側邊界範圍20px，所以總計寬度為260px。瀏覽器畫面呈現如下圖：

使用auto

div {width:500px;}
p {margin-left:auto; margin-right:100px; width:250px;}

如果將margin-left設為auto，margin-right和width有確定值，這時auto的屬性就會設為對應需要的長度。如下方所示margin-left就等於500-100-250=150px。

使用兩個auto

div {width:500px:}
p {margin-left:auto; margin-right:auto; width:300px;}

我們可以在左右對稱的屬性，左右都使用auto，如此會將內容呈現居中的狀態。如下所示：margin-left為100px，margin-right也會是100px。

使用百分比

<p style="width:67%; padding-right:5%; padding-left:5%; margin-right:auto; margin-left:5%">My letter for you </p>

當寬、內距、邊界範圍設定為百分比時，也必須符合總數加起來等於100％的規則。

置換元素的水平屬性

<img src="vision.jpg" style="display: block; width: 50px; margin: 0;">
<img src="vision.jpg" style="display: block; width: 100px; margin: 0;">
<img src="vision.jpg" style="display: block; width: 200px; margin: 0;">

我們也可以透過指定影像的width屬性，來配置它的水平寬度呈現，瀏覽器顯示如下：

4. 垂直屬性的運用

如同水平格式，垂直格式也包含了7個屬性：margin-top、border-top、padding-top、height、padding-bottom、 border-bottom、margin-bottom。這七個屬性值的總和必須等於區塊方框的高。

七個元素裡只有三個能夠設為auto，元素的height、上下方的邊界範圍。上下方的內距與邊框都必須指定特定值，否則會預設為0。

如果區塊方框的margin-top與margin-bottom其中之一設為auto，那麼兩者都會被計算為0，而0值會讓正常流向的方框很難在容器方框裡垂直置中，放置，這也表示如果將元素的上下邊界範圍設為auto，實際上的效果是將兩者為0，邊界範圍將從元素方框消失。

百分比高

<div style="height: 10em;">
     <p style="height: 50%">一半的高度</p>
</div>

如上所示，文字內容的高度將為區塊高度的50％，也就是等於5em。

auto高度

<div style="height:auto; background:yellow;" >
     <p style="margin-top: 2em; margin-bottom: 2em;">Good Luck</p>
</div>
<div style="height:auto; border-top:1px solid; border-bottom: 1px solid; background:yellow;">
     <p style="margin-top: 2em; margin-bottom: 2em;">Good Luck</p>
</div>

設定height:auto的區塊方框，其高度會足以包含自行行內內容的行方塊，也就是邊界範圍會決定包含這些元素的高。上列的程式碼，在瀏覽器內呈現的樣子如下：

Good Luck

管理line-height

<ol>
     <li>香煎鮭魚</li>
     <li>客家小炒</li>
     <li>蛤蠣絲瓜</li>
     <li>酸菜白肉鍋</li>
</ol>
<hr>
<ol style="line-height:2.5em">
     <li>香煎鮭魚</li>
     <li>客家小炒</li>
     <li>蛤蠣絲瓜</li>
     <li>酸菜白肉鍋</li>
</ol>

改變line-height的設定，可以增加或減少文字行與行之間的高度。若針對區塊方框亦可同理應用。
上列的原始碼，在瀏覽器的輸出如下所示：

香煎鮭魚
客家小炒
蛤蠣絲瓜
酸菜白肉鍋

香煎鮭魚
客家小炒
蛤蠣絲瓜
酸菜白肉鍋

小結

基本視覺格式讓我們對網頁的版面布局有了第一步的認識。而CSS的格式化模型多又細微，無法在此一一舉立說明。唯有在實際操作過程中，不斷的實做練習，比較快熟悉。若有問題時，再進一步查詢。

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 瞭解CSS的基本視覺區塊

瞭解CSS的基本視覺區塊

2020/8/28 , 由 Wanding 編寫發布

CSS

1. 基本方框

2. 方框種類介紹

正常走向(normal flow)：一般西方語言由左而右，由上而下的文字呈現方向，同時也是傳統的HTML文件排版文字使用的方向。大多數的元素都會在正常的流向，要讓元素離開正常流向唯一的方法是浮動(float)、定置(positioned)或放到flexble box或grid layout元素當中。
非置換元素(nonreplaced element)：這類元素的內容包含在文件當中，例如段落(p)就是非置換元素，可以在元素內看到段落的文字內容。
置換元素(replaced element)：這種元素是作為其他東西的替身，置換元素最典型的例子是<img>元素，指向一個會插入文件流向的影像檔，插入的位置就是<img>出現的位置，大多數的表單元素都是可置換元素。如<input type="radio">。
根元素(root element)：文件樹最上層的元素，就是<html>元素。
區塊方框(block box)：段落、標題、或div等元素產生的方框，在正常的流向中，這類方框前後會換行，使得區塊方框會形成垂直堆疊。而透過display:block宣告也能讓元素產生區塊方框。
行內方框(inline box)：如strong或span等元素產生的方框，這類方框前後不會產生斷行，透過display:inline宣告能讓元素產生行內方框。
行內區塊方框(inline-block box)：這個比較特別，內部行為類似區塊方框，但是外部行為如同行內方框，它的行為類似於置換元素，可以想像將div元素放到文字行內，就是這那個樣子。

3. 水平屬性的運用

<p style="width:200px;"> My letter for you </p>
<p style="width:200px; padding:10px; margin:20px;"> My letter for you </p>

使用auto

div {width:500px;}
p {margin-left:auto; margin-right:100px; width:250px;}

如果將margin-left設為auto，margin-right和width有確定值，這時auto的屬性就會設為對應需要的長度。如下方所示margin-left就等於500-100-250=150px。

使用兩個auto

div {width:500px:}
p {margin-left:auto; margin-right:auto; width:300px;}

我們可以在左右對稱的屬性，左右都使用auto，如此會將內容呈現居中的狀態。如下所示：margin-left為100px，margin-right也會是100px。

使用百分比

<p style="width:67%; padding-right:5%; padding-left:5%; margin-right:auto; margin-left:5%">My letter for you </p>

當寬、內距、邊界範圍設定為百分比時，也必須符合總數加起來等於100％的規則。

置換元素的水平屬性

<img src="vision.jpg" style="display: block; width: 50px; margin: 0;">
<img src="vision.jpg" style="display: block; width: 100px; margin: 0;">
<img src="vision.jpg" style="display: block; width: 200px; margin: 0;">

我們也可以透過指定影像的width屬性，來配置它的水平寬度呈現，瀏覽器顯示如下：

4. 垂直屬性的運用

七個元素裡只有三個能夠設為auto，元素的height、上下方的邊界範圍。上下方的內距與邊框都必須指定特定值，否則會預設為0。

百分比高

<div style="height: 10em;">
     <p style="height: 50%">一半的高度</p>
</div>

如上所示，文字內容的高度將為區塊高度的50％，也就是等於5em。

auto高度

<div style="height:auto; background:yellow;" >
     <p style="margin-top: 2em; margin-bottom: 2em;">Good Luck</p>
</div>
<div style="height:auto; border-top:1px solid; border-bottom: 1px solid; background:yellow;">
     <p style="margin-top: 2em; margin-bottom: 2em;">Good Luck</p>
</div>

Good Luck

管理line-height

<ol>
     <li>香煎鮭魚</li>
     <li>客家小炒</li>
     <li>蛤蠣絲瓜</li>
     <li>酸菜白肉鍋</li>
</ol>
<hr>
<ol style="line-height:2.5em">
     <li>香煎鮭魚</li>
     <li>客家小炒</li>
     <li>蛤蠣絲瓜</li>
     <li>酸菜白肉鍋</li>
</ol>

改變line-height的設定，可以增加或減少文字行與行之間的高度。若針對區塊方框亦可同理應用。
上列的原始碼，在瀏覽器的輸出如下所示：

香煎鮭魚
客家小炒
蛤蠣絲瓜
酸菜白肉鍋

香煎鮭魚
客家小炒
蛤蠣絲瓜
酸菜白肉鍋

小結

返回目錄

Subscribe to CSS