常用CSS樣式2：其它樣式

尹成發表於2018-11-14

#css顏色表示法
css顏色值主要有三種表示方法：

1、顏色名錶示，比如：red 紅色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示紅色

3、16進位制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
#css選擇器
常用的選擇器有如下幾種：

##標籤選擇器
標籤選擇器，此種選擇器影響範圍大，建議儘量應用在層級選擇器中。
舉例：

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 對應以上兩條樣式 -->
<div class="box">....</div>   <!-- 對應以上兩條樣式 -->

##id選擇器
通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id名一般給程式使用，所以不推薦使用id作為選擇器。
舉例：

#box{color:red} 

<div id="box">....</div>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->

##類選擇器
通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。
舉例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

##層級選擇器
主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
舉例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

##組選擇器
多個選擇器，如果有同樣的樣式設定，可以使用組選擇器。
舉例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

##偽類及偽元素選擇器
常用的偽類選擇器有hover，表示滑鼠懸浮在元素上時的狀態，偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

#CSS盒子模型
##盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下：
這裡寫圖片描述
把元素叫做盒子，設定對應的樣式分別為：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

##設定邊框
設定一邊的邊框，比如頂部邊框，可以按如下設定：

border-top-color:red;    /* 設定頂部邊框顏色為紅色 */  
border-top-width:10px;   /* 設定頂部邊框粗細為10px */   
border-top-style:solid;  /* 設定頂部邊框的線性為實線，常用的有：solid(實線)  
  dashed(虛線)  dotted(點線); */

上面三句可以簡寫成一句：

border-top:10px solid red;

設定其它三個邊的方法和上面一樣，把上面的’top’換成’left’就是設定左邊，換成’right’就是設定右邊，換成’bottom’就是設定底邊。

四個邊如果設定一樣，可以將四個邊的設定合併成一句：

border:10px solid red;

##設定內間距padding

設定盒子四邊的內間距，可設定如下：

padding-top：20px;     /* 設定頂部內間距20px */ 
padding-left:30px;     /* 設定左邊內間距30px */ 
padding-right:40px;    /* 設定右邊內間距40px */ 
padding-bottom:50px;   /* 設定底部內間距50px */

上面的設定可以簡寫如下：

padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設定的是 上 右 下 左  
四個方向的內邊距值。 */

padding後面還可以跟3個值，2個值和1個值，它們分別設定的專案如下：

padding：20px 40px 50px; /* 設定頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */ 
padding：20px 40px; /* 設定上下內邊距為20px，左右內邊距為40px*/ 
padding：20px; /* 設定四邊內邊距為20px */

##設定外間距margin

外邊距的設定方法和padding的設定方法相同，將上面設定項中的’padding’換成’margin’就是外邊距設定方法。

##盒子模型的尺寸

按照下面程式碼製作頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真實尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <div class="box01">1</div>
    <br />
    <div class="box02">2</div>
    <br />
    <div class="box03">3</div>
</body>
</html>

頁面顯示效果如下：
這裡寫圖片描述

通過上面的頁面得出結論：盒子的width和height設定的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：

盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

##思考題：
1.在佈局中，如果我想增大內容和邊框的距離，又不想改變盒子顯示的尺寸，應該怎麼做？

##課堂練習
請製作圖中所示的標題：
這裡寫圖片描述

##margin相關技巧
1、設定元素水平居中： margin:x auto;
2、margin負值讓元素位移及邊框合併

##外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決方法如下：

1、使用這種特性
2、設定一邊的外邊距，一般設定margin-top
3、將元素浮動或者定位

##margin-top 塌陷

在兩個盒子巢狀時候，內部的盒子設定的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設定失敗，解決方法如下：

1、外部盒子設定一個邊框
2、外部盒子設定 overflow:hidden
3、使用偽元素類：

.clearfix:before{
    content: '';
    display:table;
}

#css元素溢位
當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢位的子元素的方式，設定的方法是通過overflow屬性來設定。

##overflow的設定項：
1、visible 預設值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。

#塊元素、內聯元素、內聯塊元素
元素就是標籤，佈局中常用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。

##塊元素
塊元素，也可以稱為行元素，佈局中常用的標籤如：div、p、ul、li、h1~h6、dl、dt、dd等等都是塊元素，它在佈局中的行為：