01-CSS基礎--CSS概述+CSS和HTML相結合的四種方式+CSS選擇器+盒子模型+元素的浮動float+清除浮動clear+元素的定位position
一、CSS概述
1、CSS：層疊樣式表，用來定義網頁的顯示效果。CSS將網頁內容和顯示樣式進行分離，提高了顯示功能（降低耦合性，提高擴充套件性和可維護性）
2、CSS的基本特徵
（1）層疊性：多種CSS樣式的疊加
（2）繼承性：子標記會繼承父標記的某些樣式
3、CSS註釋
/* CSS檔案註釋的內容 */4、CSS程式碼格式
選擇器名稱 {
屬性1: 屬性值1;
屬性2: 屬性值2;
......
}（1）屬性與屬性之間用分號(;)隔開
（2）屬性與屬性值之間用冒號(:)連線
（3）如果一個屬性有多個值，多個值之間用空格( )隔開
注：CSS程式碼中的空格不被解析
a). 花括號({})及分號(;)前後的空格可有可無
b). 屬性值和單位之間不允許有空格
二、CSS和HTML相結合的四種方式
1、CSS和HTML相結合的四種方式
（1）style屬性方式（內聯式）：每一個html標籤中都有一個style屬性，負責該標籤的樣式。該屬性可以有多個屬性值，其屬性值就是CSS程式碼
<div style="color: #0000ff; background-color: #dddddd;">style屬性方式</div>
（2）<style>標籤方式（嵌入式）：定義在<head>標籤中，因為要先載入。<style>在<head>中，但位於<title>之後
<head> <!-- 一般定義在<head>標籤中。頁面載入時樣式要先載入，一旦讀到對應的標籤，就馬上把樣式加到對應的標籤上 --> <style type="text/css"> div{ color: #0000ff; background-color: #dddddd; } </style> </head> <body> <div>style標籤方式</div> </body>
（3）CSS程式碼匯入方式：將CSS封裝成檔案進行匯入（此種方式在某些瀏覽器下不起作用 -- 不常用）
<head>
<style type="text/css">
@import url(xxx.css);
</style>
</head><head>
<style type="text/css">
@import url(xxx.css);
</style>
</head>
xxx.css檔案
/*
在xxx.css檔案中匯入其他css檔案
新增/修改xxx.css這個檔案即可，不用動html檔案
*/
@import url(1.css);
@import url(2.css);（4）<link>連結方式（外部式）：使用html程式碼的<link />標籤連結一個xxx.css檔案 -- 此種方式使用最多（實現結構和表現完全分離）
<head>
<title></title>
<!--
連結一個與當前網頁相關聯的頁面
href：連結的檔案地址
rel：樣式表，指明與html的關係
-->
<link href="xxx.css" rel="stylesheet" type="text/css" />
<!-- <style>標籤放在<link>標籤下面 -->
<style type="text/css">
</style>
</head>2、@import url(xxx.css) 和 <link> 兩種方式的區別
（1）@import url(xxx.css)：是css程式碼匯入的
<link>：是用html程式碼連結的
（2）@import url(xxx.css)：頁面先於css樣式表載入，使用者體驗不好
<link>：頁面和css樣式表同時載入
3、樣式的優先順序
（1）由上到下、由外到內，優先順序由低到高（一般情況下以後載入的為主）
即 標籤內部:style屬性（內聯式） > 當前檔案中:<style>標籤（嵌入式） > 外部檔案中:<link>標籤（外部式）
注：嵌入式 > 外部式 有一個前提：嵌入式css樣式<style>的位置要在外部式<link>的後面
<head>
<title></title>
<link href="xxx.css" rel="stylesheet" type="text/css" />
<!-- <style>標籤放在<link>標籤下面 -->
<style type="text/css">
</style>
</head>（2）! important > 使用者自己設定的樣式 > 網頁製作者樣式 > 瀏覽器預設的樣式
<style type="text/css">
p {
color: #000;
}
/* !important要寫在分號的前面 */
p {
color: red !important;
}
</style>三、CSS選擇器
1、預定義樣式可以實現動態載入
2、CSS選擇器分類
（1）HTML標籤名選擇器：使用的是html的標籤名
（2）class選擇器/類選擇器（.）：使用的是標籤中的class屬性。每個標籤都有一個class屬性（class屬性是專門為css提供樣式載入用的一個屬性） -- 最常用
注：
a). 設定樣式時，多用類選擇器。因為類選擇器的值可以有多個，而id選擇器的值需要唯一
b). class可以在相同標籤中對部分標籤進行相同樣式的載入，還可以對不同標籤進行相同樣式的設定
<head>
<style type="text/css">
div {
color: blue;
}
/* .abc：對所有類名為abc的標籤都適用 */
.abc {
color: #00cc00;
}
/* 對<div>下的類名為abc的標籤適用 */
div.abc {
color: red;
}
</style>
</head>
<body>
<div>xxx</div>
<div class="abc">xxx</div>
<span class="abc">xxx</span>
<p class="abc">xxx</p>
</body>（3）id選擇器（#）：使用的是標籤中的id屬性。通常，id的取值在頁面中是唯一的，因為id屬性除了可以被css使用，還可以被js使用（獲取該名稱的標籤）。id通常都是為了標識頁面中的一些特定區域使用的（eg：表格/表單區域）
注：不允許同一個id應用於多個標記
補充：擴充套件選擇器
（4）關聯選擇器/後代選擇器（ ）：選擇器中的選擇器，即 相同標籤中的不同標籤顯示不同樣式，中間用空格（ ）隔開
注：兩個或多個選擇器之間產生關係，作用於所有子後代元素（不一定是父-子兩代），通常是表示層級的
<style type="text/css">
/* <span>標籤中的所有<b>標籤 */
span b {
}
</style>（5）子選擇器（>）：用於選擇指定標籤元素的第一代子元素（直接後代，即 父-子關係）
<head>
<style type="text/css">
/* 類名class="foot"標籤中的第一代<span>標籤 */
.foot > span {
color: red;
}
</style>
</head>
<body>
<div class="foot">
<span>第一代span，樣式改變</span>
<div>
<span>不是第一代span，樣式沒有改變</span>
</div>
</div>
</body>（6）組合選擇器/分組選擇器（,）：對多個選擇器進行相同樣式設定，多個選擇器之間用逗號（,）隔開
<style type="text/css">
/* 對 類名class="foot"標籤 和 <div>中的所有<p>標籤 加樣式 */
.foot, div p {
}
</style>（7）偽元素選擇器：不是真正的標籤，代表標籤的某些狀態（狀態和標籤相結合）。css中提供了一些已經定義好的樣式，可以直接使用
可以相容所有瀏覽器的偽元素選擇器，就是在<a>標籤上使用的:hover。:hover可以放在任意標籤上，但它們的相容性不是很好。所以，現在比較常用的還是a: hover組合
a). 超連結<a>的狀態
a: link ：未訪問
a: hover ：游標移動到超連結上（滑鼠懸停）
a: active ：點選
a: visited ：訪問後
注：實際開發中，通常未訪問（link）和訪問後（visited）的效果一樣，點選（active）的效果一般不做
b). 段落<p>的偽元素選擇器
p: first-line ：段落的第一行文字（首行）
p: first-letter ：段落中的第一個字母（首字母）
input: focus ：具有焦點的元素，獲得焦點時新增效果
注：<div>等標籤也具有懸停、聚焦等效果，這些狀態也可以加到其他標籤上
（8）通用選擇器：匹配html中所有標籤元素 -- 不建議使用
<style type="text/css">
/* 通用選擇器：匹配html中所有元素標籤 */
* {
}
</style>3、選擇器的優先順序：HTML標籤選擇器（1） < 類選擇器（10） < id選擇器（100） < style屬性（>100）
注：
（1）作用範圍越小，優先順序越高（越少數，優先順序越高）
（2）複合選擇器的權重無論為多少個標籤選擇器的疊加，其權重都不會高於類選擇器
（3）複合選擇器的權重無論為多少個類選擇器和id選擇器的疊加，其權重都不會高於id選擇器
4、id選擇器和class選擇器的區別
（1）在一個html文件中，同一個id選擇器只能使用一次，而同一個類選擇器可以使用多次
（2）可以使用類選擇器詞列表方法為一個元素同時設定多個樣式，不能使用id詞列表
<head>
<style type="text/css">
.stress {
}
.bigsize {
}
</style>
</head>
<body>
<!-- 一個元素可以用多個類，但要用空格隔開 -->
<span class="stress bigsize">xxx</span>
<!-- 下面程式碼是錯誤的 -->
<!-- id選擇器不允許定義多個值（id是唯一的，用一個即可） -->
<span id="stress bigsize">xxx</span>
</body>（3）class用於新增樣式（值可相同），id用於js呼叫，通過id呼叫js的功能（值唯一）
四、盒子模型
1、用來封裝資料的一片區域叫盒子
注：對資料進行操作，需要把資料放到一個區域裡面，這種區域多為<div>。即 盒子多為<div>
2、盒子模型有三項基本內容
（1）邊框（border）
/* border: 粗細(border-width) 樣式(border-style)（必須設定） 顏色(border-color) */
border: 1px solid red;注：設定邊框的粗細/顏色時，必須同時設定邊框樣式。如果未設定樣式或將樣式設定為none，則無論粗細/顏色設定為多少，都無效
（2）內邊距（padding）
上 右 下 左
上 左右 下
上下 左右
注：padding不能為負值
（3）外邊距（margin）
注：margin可為負值，重疊
對子元素應用負margin時，在大部分瀏覽器中，都會產生子元素壓住父元素的效果。但在IE6中，子元素超出的部分將被父元素遮蓋。解決辦法是將子元素的定位屬性position設定為相對的relative
3、盒子的總寬度 = width（文字的寬）+ 左右內邊距之和 + 左右邊框寬度之和 + 左右外邊距之和
盒子的總高度 = height（文字的高）+ 上下內邊距之和 + 上下邊框寬度之和 + 上下外邊距之和
注：寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（<img>和<input />除外）
4、實際開發中，一般會設定 body{margin: 0px;}，因為不同瀏覽器對body邊距的處理有差別
注：如果盒子的margin值為0，它距瀏覽器的上下左右還有空白，這是<body>的距離。<body>本身距離瀏覽器顯示資料窗體的邊框有一個固定距離
<style type="text/css">
/* 不同瀏覽器對body邊距的處理有差別 */
/* 開發時大都做此動作 */
body {
margin: 0px;
}
/* 塊級元素水平居中 */
div {
margin: 0px auto;
}
</style>5、網頁中預設存在內外邊距的元素有：<body>、<h1>~<h6>、<p>等。製作網頁時，要清除元素的預設內外邊距
<style type="text/css">
/* 清除元素的預設內外邊距 */
* {
/* 清除內邊距。padding不能為負值 */
padding: 0px;
/* 清除外邊距。margin可為負值（重疊） */
margin: 0px;
}
</style>五、元素的浮動（float）
1、網頁中元素有三種佈局模型：
（1）流動模型（Flow）：預設的網頁佈局模式。網頁在預設狀態下的html網頁元素都是根據流動模型來分佈網頁內容的
（2）浮動模型（Float）
（3）層模型（Layer）：讓html元素在網頁中精確定位。層模型有三種形式：絕對定位(position: absolute)、相對定位(position: relative)、固定定位(position: fixed)
2、float：脫離標準文件流的控制。取值：none（預設） | left | right
3、如果圖片一個<div>，文字一個<div>，兩者外層還有一個<div>。此時，圖片漂浮起來，也得在外層<div>範圍內
4、行內元素本身不可以設定寬高，但有兩種方式可以讓行內元素可以設定寬高：a). 浮動float b). 變成塊元素display: block;
所以，浮動元素（行內元素/塊元素）浮動後，將變成塊元素，可以設定寬高
注：很多瀏覽器在顯示未指定width屬性的浮動元素時會出現bug。所以，要為浮動的元素指定width屬性
5、浮動的侷限性：根據元素位置確定浮動到哪裡，定位不夠準確。實際開發中多用定位position
六、清除浮動（clear）
1、clear：只能清除元素左右兩側浮動的影響。取值：none | left | right | both
2、子元素設定浮動時，如果不對其父元素定義高度，則子元素的浮動會對父元素產生影響
問題示例：大<div>中有兩個小<div>，大<div>沒有設定height。兩個小<div>都浮動後，大<div>不見了
<head>
<style type="text/css">
div {
border: 1px solid red;
}
/* 大<div>沒有設定height */
.div1 {
width: 500px;
/*height: 400px;*/
background-color: gray;
}
.div2 {
width: 100px;
height: 100px;
background-color: yellow;
/* 小<div>浮動 */
float: left;
}
.div3 {
width: 150px;
height: 50px;
background-color: green;
/* 小<div>浮動 */
float: left;
}
</style>
</head>
<body>
<!-- 大<div>沒有設定height，大<diiv>中的兩個小<div>浮動後，大<div>不見了 -->
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>解決方式：可以給大<div>清除浮動
方法一：使用空標記清除浮動
<body>
<!-- 大<div>沒有設定height，大<diiv>中的兩個小<div>浮動後，大<div>不見了 -->
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
<!-- 使用空標記清除浮動 -->
<div class="div4" style="clear: both"></div>
</div>
</body>方法二：使用overflow屬性清除浮動
<body>
<!-- 大<div>沒有設定height，大<diiv>中的兩個小<div>浮動後，大<div>不見了 -->
<!-- 使用overflow屬性清除浮動 -->
<div class="div1" style="overflow: hidden">
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>方法三：使用after偽物件清除浮動
<head>
<style type="text/css">
div {
border: 1px solid red;
}
/* 大<div>沒有設定height */
.div1 {
width: 500px;
/*height: 400px;*/
background-color: gray;
}
/* 使用after偽物件清除浮動 */
.div1 :after {
/* content屬性值為空 */
content: "";
/* height值為0 */
height: 0px;
}
.div2 {
width: 100px;
height: 100px;
background-color: yellow;
/* 小<div>浮動 */
float: left;
}
.div3 {
width: 150px;
height: 50px;
background-color: green;
/* 小<div>浮動 */
float: left;
}
</style>
</head>
<body>
<!-- 大<div>沒有設定height，大<diiv>中的兩個小<div>浮動後，大<div>不見了 -->
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>七、元素的定位（position）
1、可以讓盒子去到頁面的任意位置
2、元素的定位屬性主要包括兩部分：
（1）定位模式：static（預設）、relative、absolute、fixed
（2）偏移屬性：top、bottom、left、right
注：
（1）定義多個偏移屬性時，如果left和right衝突，以left為準；如果top和bottom衝突，以top為準
（2）static不能使用偏移屬性（使用偏移屬性無效），而relative、absolute、fixed可以使用偏移屬性
3、四種定位模式
（1）靜態定位（static）：任何元素在預設狀態下都會以靜態定位來確定自己的位置（各元素在預設位置）。當沒有定義position屬性時，會遵循預設值顯示為靜態位置。在靜態定位狀態下，無法通過偏移屬性（top、bottom、left、right）來改變元素的位置。即 對position: static使用top、left等偏移屬性無效
注：position: static相當於沒有做定位（相當於沒有定義position屬性）。 即 position: static == 沒有定義position屬性
（2）固定定位（fixed）：對元素設定固定定位後，它將脫離標準文件流的控制，始終依據瀏覽器視窗來定義自己的顯示位置。不管如何滾動頁面，該元素都始終顯示在瀏覽器視窗的固定位置（不會隨瀏覽器視窗的滾動條滾動而變化）
注：
a). 固定定位是絕對定位absolute的一種特殊形式
b). 固定定位的元素會變成塊元素，不管原來是什麼元素
c). IE6不支援固定定位
（3）絕對定位（absolute）：將物件從文件流中拖出（脫離標準文件流），依據最近的已經定位（絕對定位absolute | 相對定位relative | 固定定位fixed）的祖先元素進行定位。如果所有祖先元素都沒有定位（包括靜態定位position:static），則依據<body>定位，即相對於瀏覽器視窗（使用偏移屬性top、bottom、left、right）
<head>
<style type="text/css">
/* div1脫離文件流，可對其進行定位。通過設定top、left等偏移屬性，想將div1定位在哪裡都可以 */
/* 此處div1的祖先元素都沒有定位，所以div1的定位要依據<body> */
.div1 {
position: absolute;
/* 距<body>上邊的距離 */
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div>
<div class="div1">div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>注：
a). 如果僅設定絕對定位absolute，不設定偏移屬性，則元素的位置不變。但其不再佔用標準文件流中的空間，與上移的後續元素重疊
b). 子元素依據其直接父元素進行絕對定位absolute，但其直接父元素不需要定位，怎麼辦？
可以將直接父元素設定為相對定位relative，但不對其設定偏移量。然後再對子元素應用絕對定位absolute，並通過偏移屬性對其進行精確定位
<head>
<style type="text/css">
div {
border: 1px solid red;
}
/* 將父元素設定為相對定位relative，但不對其設定偏移量（top、left等） */
#box1 {
width: 200px;
height: 200px;
position: relative;
}
/* 對子元素應用絕對定位absolute，並通過偏移屬性對其進行精確定位 */
#box2 {
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="box1">
<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box2">子元素依據父元素進行絕對定位</div>
</div>c). 如果用一個程式不斷修改<div>盒子的 top/left 的值（自增），意味著此<div>盒子在不斷地移動 -- 圖片飛動的原理
d). 絕對定位的元素會變成塊元素
（4）相對定位（relative）：相對於自身的預設位置進行偏移（相對於以前的位置移動，偏移前的位置保留不動）。物件不可層疊，將依據偏移屬性（top、bottom、left、right）在正常文件流中偏移位置（不出文件流 -- 其他元素位置固定不動）
注：如果父/祖先<div>有position: absolute/relative/fixed，則子<div>的position: relative相對於父/祖先<div>。如果父/祖先<div>沒有定義position（包括靜態定位position:static），則子<div>的position:relative相對於<body>
4、絕對定位absolute和相對定位relative的異同
（1）相同
absolute和relative都可以用偏移屬性（top、bottom、left、right）進行定位
（2）不同
absolute：將物件從文件流中拖出
relative：不會把物件從文件流中拖出（物件不可層疊）
（3）定位元素：position: absolute;
參照定位的元素：position: relative;