1.6 常用CSS樣式2：其它樣式

尹成發表於2018-11-09
CSS

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上下

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等等都是塊元素，它在佈局中的行為：

  • 支援全部的樣式
  • 如果沒有設定寬度，預設的寬度為父級寬度100%
  • 盒子佔據一行、即使設定了寬度

內聯元素

內聯元素，也可以稱為行內元素，佈局中常用的標籤如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行為：

  • 支援部分樣式（不支援寬、高、margin上下、padding上下）
  • 寬高由內容決定
  • 盒子並在一行
  • 程式碼換行，盒子之間會產生間距
  • 子元素是內聯元素，父元素可以用text-align屬性設定子元素水平對齊方式，用line-height屬性值設定垂直對齊方式

解決內聯元素間隙的方法

1、去掉內聯元素之間的換行 
2、將內聯元素的父級設定font-size為0，內聯元素自身再設定font-size

內聯塊元素

內聯塊元素，也叫行內塊元素，是新增的元素型別，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸類於內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行為：

  • 支援全部樣式
  • 如果沒有設定寬高，寬高由內容決定
  • 盒子並在一行
  • 程式碼換行，盒子會產生間距
  • 子元素是內聯塊元素，父元素可以用text-align屬性設定子元素水平對齊方式，用line-height屬性值設定子元素垂直對齊方式

這三種元素，可以通過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所以我們經常把內聯元素轉化為塊元素，少量轉化為內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。

display屬性

display屬性是用來設定元素的型別及隱藏的，常用的屬性有： 
1、none 元素隱藏且不佔位置 
2、block 元素以塊元素顯示 
3、inline 元素以內聯元素顯示 
4、inline-block 元素以內聯塊元素顯示

 

相關文章