CSS的簡介
- 為了讓網頁元素的樣式更加豐富，也為了讓網頁的内容和樣式能拆分開，CSS由此思想而誕生
- CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表(後面的樣式如果跟前面的樣式是同一塊内容會覆寫)
- 有了CSS，html中大部分表現樣式的标簽就廢棄不用了，html隻負責文檔的結構和内容，表現形式完全交給CSS，html文檔變得更加簡潔
css基本文法及頁面引用
1.css基本文法
css的定義方法是：
選擇器 { 屬性:值; 屬性:值; 屬性:值;}
選擇器是将樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性每個屬性有一個或多個值。代碼示例：
div{ width:100px; height:100px; color:red }
2.css頁面引入方法：
- 外聯式：通過link标簽，連結到外部樣式表到頁面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
- 嵌入式：通過style标簽，在網頁上建立嵌入的樣式表。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
- 内聯式：通過标簽的style屬性，在标簽上直接寫樣式。
<div style="width:100px; height:100px; color:red ">......</div>
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顔色值主要有三種表示方法：
- 顔色名表示，比如：red 紅色，gold 金色
- rgb表示，比如：rgb(255,0,0)表示紅色
- 16進制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
css選擇器
常用的選擇器有如下幾種：
1.标簽選擇器
标簽選擇器，此種選擇器影響範圍大，建議盡量應用在層級選擇器中。
舉例：
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 對應以上兩條樣式 -->
<div class="box">....</div> <!-- 對應以上兩條樣式 -->
2.id選擇器
通過id名來選擇元素，元素的id名稱不能重複，是以一個樣式設定項隻能對應于頁面上一個元素，不能複用，id名一般給程式使用，是以不推薦使用id作為選擇器。
#box{color:red}
<div id="box">....</div> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
3.類選擇器
通過類名來選擇元素，一個類可應用于多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是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>
4.層級選擇器
主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與标簽元素結合使用，減少命名，同時也可以通過層級，防止命名沖突。
.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>
5.組選擇器
多個選擇器，如果有同樣的樣式設定，可以使用組選擇器。
.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>
6.僞類及僞元素選擇器
常用的僞類選擇器有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盒子模型
1.盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設定對應的樣式分别為：盒子的邊框(border)、盒子内的内容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
2.設定邊框
設定一邊的邊框，比如頂部邊框，可以按如下設定：
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;
3.設定内間距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 */
4.設定外間距margin
外邊距的設定方法和padding的設定方法相同，将上面設定項中的'padding'換成'margin'就是外邊距設定方法
通過上面的頁面得出結論：盒子的width和height設定的是盒子内容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
5.margin相關技巧
- 設定元素水準居中： margin:x auto;
- margin負值讓元素位移及邊框合并
6.外邊距合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們将形成一個外邊距。合并後的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。解決方法如下：
- 使用這種特性
- 設定一邊的外邊距，一般設定margin-top
- 将元素浮動或者定位
7.margin-top 塌陷
在兩個盒子嵌套時候，内部的盒子設定的margin-top會加到外邊的盒子上，導緻内部的盒子margin-top設定失敗，解決方法如下：
- 外部盒子設定一個邊框
- 外部盒子設定 overflow:hidden
- 使用僞元素類：
.clearfix:before{
content: '';
display:table;
}
css元素溢出
當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢出的子元素的方式，設定的方法是通過overflow屬性來設定。
overflow的設定項：
- visible 預設值。内容不會被修剪，會呈現在元素框之外。
- hidden 内容會被修剪，并且其餘内容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
- scroll 内容會被修剪，但是浏覽器會顯示滾動條以便檢視其餘的内容。
- auto 如果内容被修剪，則浏覽器會顯示滾動條以便檢視其餘的内容。
- inherit 規定應該從父元素繼承 overflow 屬性的值。
元素、内聯元素、内聯塊元素
元素就是标簽，布局中常用的有三種标簽，塊元素、内聯元素、内聯塊元素，了解這三種元素的特性，才能熟練的進行頁面布局。
1.塊元素
塊元素，也可以稱為行元素，布局中常用的标簽如：div、p、ul、li、h1~h6、dl、dt、dd等等都是塊元素，它在布局中的行為：
- 支援全部的樣式
- 如果沒有設定寬度，預設的寬度為父級寬度100%
- 盒子占據一行、即使設定了寬度
2.内聯元素
内聯元素，也可以稱為行内元素，布局中常用的标簽如：a、span、em、b、strong、i等等都是内聯元素，它們在布局中的行為：
- 支援部分樣式（不支援寬、高、margin上下、padding上下）
- 寬高由内容決定
- 盒子并在一行
- 代碼換行，盒子之間會産生間距
- 子元素是内聯元素，父元素可以用text-align屬性設定子元素水準對齊方式，用line-height屬性值設定垂直對齊方式
3.解決内聯元素間隙的方法
- 去掉内聯元素之間的換行
- 将内聯元素的父級設定font-size為0，内聯元素自身再設定font-size
4.内聯塊元素
内聯塊元素，也叫行内塊元素，是新增的元素類型，現有元素沒有歸于此類别的，img和input元素的行為類似這種元素，但是也歸類于内聯元素，我們可以用display屬性将塊元素或者内聯元素轉化成這種元素。它們在布局中表現的行為：
- 支援全部樣式
- 如果沒有設定寬高，寬高由内容決定
- 代碼換行，盒子會産生間距
- 子元素是内聯塊元素，父元素可以用text-align屬性設定子元素水準對齊方式，用line-height屬性值設定子元素垂直對齊方式
這三種元素，可以通過display屬性來互相轉化，不過實際開發中，塊元素用得比較多，是以我們經常把内聯元素轉化為塊元素，少量轉化為内聯塊，而要使用内聯元素時，直接使用内聯元素，而不用塊元素轉化了。
5.display屬性
display屬性是用來設定元素的類型及隐藏的，常用的屬性有：
- 1、none 元素隐藏且不占位置
- block 元素以塊元素顯示
- inline 元素以内聯元素顯示
- inline-block 元素以内聯塊元素顯示
浮動
1.文檔流
文檔流，是指盒子按照html标簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行内元素在一行之内從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都占據自己的位置。
2.浮動特性
- 浮動元素有左浮動(float:left)和右浮動(float:right)兩種
- 浮動的元素會向左或向右浮動，碰到父元素邊界、浮動元素、未浮動的元素才停下來
- 相鄰浮動的塊元素可以并在一行，超出父級寬度就換行
- 浮動讓行内元素或塊元素自動轉化為行内塊元素
- 浮動元素後面沒有浮動的元素會占據浮動元素的位置，沒有浮動的元素内的文字會避開浮動的元素，形成文字饒圖的效果
- 父元素内整體浮動的元素無法撐開父元素，需要清除浮動
- 浮動元素之間沒有垂直margin的合并
3.清除浮動
- 父級上增加屬性overflow：hidden
- 在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）
- 使用成熟的清浮動樣式類，clearfix
清除浮動的使用方法：.clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;}.con2{... overflow:hidden} 或者 <div class="con2 clearfix">
定位
1.關于定位
我們可以使用css的position屬性來設定元素的定位類型，postion的設定項如下：
- relative 生成相對定位元素，元素所占據的文檔流的位置不變，元素本身相對文檔流的位置進行偏移
- absolute 生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以了解為漂浮在文檔流的上方，相對于上一個設定了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。
- fixed 生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以了解為漂浮在文檔流的上方，相對于浏覽器視窗進行定位。
- static 預設值，沒有定位，元素出現在正常的文檔流中，相當于取消定位屬性或者不設定定位屬性
- inherit 從父元素繼承 position 屬性的值
2.定位元素特性
絕對定位和固定定位的塊元素和行内元素會自動轉化為行内塊元素
3.定位元素層級
定位元素是浮動的正常的文檔流之上的，可以用z-index屬性來設定元素的層級
4.典型定位布局
- 固定在頂部的菜單
- 水準垂直居中的彈框
- 固定的側邊的工具欄
- 固定在底部的按鈕
background屬性
1.屬性解釋
background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設定背景圖檔和背景顔色的，background是一個複合屬性，它可以分解成如下幾個設定項：
- background-color 設定背景顔色
- background-image 設定背景圖檔位址
- background-repeat 設定背景圖檔如何重複平鋪
- background-position 設定背景圖檔的位置
- background-attachment 設定背景圖檔是固定還是随着頁面滾動條滾動
實際應用中，我們可以用background屬性将上面所有的設定項放在一起，而且也建議這麼做，這樣做性能更高，而且相容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這裡面的“#00ff00”是設定background-color；“url(bgimage.gif)”是設定background-image；“no-repeat”是設定background-repeat；“left center”是設定background-position；“fixed”是設定background-attachment，各個設定項用空格隔開，有的設定項不寫也是可以的，它會使用預設值。
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)