css基本語法

css的定義方法是：選擇器 { 屬性:值; 屬性:值; 屬性:值;}選擇器是將樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性每個屬性有一個或多個值。

css頁面引入方法

1、外聯式：透過link標籤，連結到外部樣式表到頁面中。

2、嵌入式：透過style標籤，在網頁上建立嵌入的樣式表。

3、內聯式：透過標籤的style屬性，在標籤上直接寫樣式。

......

css文字樣式

常用的應用文字的css樣式：

color //設定文字的顏色，如： color:red;

font-size //設定文字的大小，如：font-size:12px;

font-family //設定文字的字型，如：font-family:'微軟雅黑';

font-style //設定字型是否傾斜，如：font-style:'normal'; 設定不傾斜，font-style:'italic';設定文字傾斜

font-weight //設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗

font //同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字號/行高 字型；如： font:normal 12px/36px '微軟雅黑';

line-height //設定文字的行高，如：line-height:24px;

text-decoration //設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉

text-indent //設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px

text-align// 設定文字水平對齊方式，如text-align:center 設定文字水平居中

css顏色表示法

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

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

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

3、16進位制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00

css選擇器

常用的選擇器有如下幾種：

1、標籤選擇器

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

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

....
   <!-- 對應以上兩條樣式 --&gt
....
   <!-- 對應以上兩條樣式 --&gt

2、id選擇器

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

#box{color:red} 

....
   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 --&gt

3、類選擇器

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

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

....
....
....

4、層級選擇器

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

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


    ....
    


....

5、組選擇器

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

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

....
....
....

6、偽類及偽元素選擇器

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

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

....
....
....

CSS盒子模型

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

內外邊距的值

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

margin-top 塌陷

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

外邊距合併

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

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 元素以內聯塊元素顯示

定位

relative 生成相對定位元素，元素所佔據的文件流的位置不變，元素本身相對文件流的位置進行偏移
absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上一個設定了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。
fixed 生成固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。
static 預設值，沒有定位，元素出現在正常的文件流中，相當於取消定位屬性或者不設定定位屬性
inherit 從父元素繼承 position 屬性的值