經常使用CSS樣式2：其它樣式

時間 2021-08-14

標籤 css html 瀏覽器 ide 佈局 spa 3d code htm blog 欄目 CSS 简体版

原文原文鏈接

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

一、顏色名錶示，好比：red 紅色，gold 金色html

二、rgb表示，好比：rgb(255,0,0)表示紅色瀏覽器

三、16進制數值表示，好比：#ff0000 表示紅色，這種能夠簡寫成 #f00
#css選擇器
經常使用的選擇器有以下幾種：ide

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

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


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

##id選擇器
經過id名來選擇元素，元素的id名稱不能重複，因此一個樣式設置項只能對應於頁面上一個元素，不能複用，id名通常給程序使用，因此不推薦使用id做爲選擇器。
舉例：spa

#box{color:red} 

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

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

.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>

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

.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>

##組選擇器
多個選擇器，若是有一樣的樣式設置，可使用組選擇器。
舉例：htm

.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,它們能夠經過樣式在元素中插入內容。blog

.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相關技巧
一、設置元素水平居中： margin:x auto;
二、margin負值讓元素位移及邊框合併

##外邊距合併

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

一、使用這種特性
二、設置一邊的外邊距，通常設置margin-top
三、將元素浮動或者定位

##margin-top 塌陷

在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，致使內部的盒子margin-top設置失敗，解決方法以下：

一、外部盒子設置一個邊框
二、外部盒子設置 overflow:hidden
三、使用僞元素類：

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

#css元素溢出
當子元素的尺寸超過父元素的尺寸時，須要設置父元素顯示溢出的子元素的方式，設置的方法是經過overflow屬性來設置。

##overflow的設置項：
一、visible 默認值。內容不會被修剪，會呈如今元素框以外。
二、hidden 內容會被修剪，而且其他內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
三、scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
四、auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
五、inherit 規定應該從父元素繼承 overflow 屬性的值。

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

##塊元素
塊元素，也能夠稱爲行元素，佈局中經常使用的標籤如：div、p、ul、li、h1~h六、dl、dt、dd等等都是塊元素，它在佈局中的行爲：