css概述
css是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁資料的表現，可以使網頁的表現與資料內容分離
css的四種引入方式
行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<p style="background-color: rebeccapurple">hello yuan</p>
嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
連結式
將一個.css檔案引入到HTML檔案中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
匯入式
將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css檔案的路徑
</style>
注意：
匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。使用連結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象匯入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
複製程式碼css的選擇器（Selector） 選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素
基礎選擇器
＊ ：通用元素選擇器，匹配任何元素 * { margin:0; padding:0; }
E ： 標籤選擇器，匹配所有使用E標籤的元素 p { color:green; }
.info和E.info: class選擇器，匹配所有class屬性中包含info的元素
.info { background:#ff0; } p.info { background:blue; }
#info和E#info id選擇器，匹配所有id屬性等於footer的元素
#info { background:#ff0; } p#info { background:#ff0; }
複製程式碼組合選擇器
E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 div,p { color:#f00; }
E F 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 li a { font-weight:bold;
E > F 子元素選擇器，匹配所有E元素的子元素F div > p { color:#f00; }
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F div + p { color:#f00; }
複製程式碼注意巢狀規則：
塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內可以包含div
塊級元素與塊級元素並列、內聯元素與內聯元素並列。
複製程式碼屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
複製程式碼偽類(Pseudo-classes)
CSS偽類是用來給選擇器新增一些特殊效果。
a:link（沒有接觸過的連結）,用於定義了連結的常規狀態。
a:hover（滑鼠放在連結上的狀態）,用於產生視覺效果。
a:visited（訪問過的連結）,用於閱讀文章，能清楚的判斷已經訪問過的連結。
a:active（在連結上按下滑鼠時的狀態）,用於表現滑鼠按下時的連結狀態。
偽類選擇器 : 偽類指的是標籤的不同狀態:
a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 啟用狀態
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */ 格式: 標籤:偽類名稱{ css程式碼; }
複製程式碼<style type="text/css">
a:link{
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="01-hello-world.html">hello-world</a>
</body>
</html>
複製程式碼補充：
.outer:hover .right{color: red}表示懸浮.outer後，.outer標籤下.right的樣式，不懸浮樣式不顯示
用例：懸浮使用者頭像時顯示個人資訊，登出等選單欄
複製程式碼before after偽類 ：
p:before 在每個 <p> 元素的內容之前插入內容 p:before{content:"hello";color:red}
p:after 在每個 <p> 元素的內容之前插入內容 p:after{ content:"hello"；color:red}
複製程式碼css優先順序和繼承
CSS優先順序:
所謂CSS優先順序，即是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""-------------------1000；
   2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－100
  3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-1
複製程式碼CSS的繼承性:
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文字中。
body{color:red;} <p>helloyuan</p>
複製程式碼這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
p{color:green}
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
複製程式碼注意：有!important宣告的規則高於一切。
CSS的常用屬性 顏色屬性
<div style="color:blueviolet">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
複製程式碼字型屬性
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">學習</h1>
複製程式碼背景屬性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)
簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
複製程式碼注意：如果將背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片；另外，如果此時要設定一個width＝100px，你也看不出效果，除非你設定出html。
文字屬性
font-size: 10px;
text-align: center; 橫向排列
line-height: 200px; 文字行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字型大小的百分比
vertical-align:－4px 設定元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效
text-indent: 150px; 首行縮排
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;
複製程式碼邊框屬性
border-style: solid; border-color: chartreuse; border-width: 20px; 簡寫：border: 30px rebeccapurple solid;
列表屬性
ul,ol{ list-style: decimal-leading-zero;
list-style: none;
list-style: circle;
list-style: upper-alpha;
list-style: disc; }
dispaly屬性
none block inline
display:inline-block可做列表佈局，其中的類似於圖片間的間隙小bug可以通過如下設定解決：
#outer{ border: 3px dashed; word-spacing: -5px; }
外邊距和內邊
margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框) 圍繞在內邊距和內容外的邊框。
Content(內容) 盒子的內容，顯示文字和影象。
margin:10px 5px 15px 20px;-----------上 右 下 左 margin:10px 5px 15px;----------------上 右左 下 margin:10px 5px;---------------------上下 右左 margin:10px; ---------------------上右下左
float屬性 先來了解一下block元素和inline元素在文件流中的排列方式。
block元素通常被現實為獨立的一塊，獨佔一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、padding屬性；
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設定width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文件流，指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文件流，也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。
只有絕對定位absolute和浮動float才會脫離文件流。
---部分無視和完全無視的區別？需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對於使用absolute position脫離文件流的元素，其他盒子與其他盒子內的文字都會無視它。(可以說是完全無視)
複製程式碼清除浮動： 在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
clear語法： clear : none | left | right | both 取值： none : 預設值。允許兩邊都可以有浮動物件 left : 不允許左邊有浮動物件 right : 不允許右邊有浮動物件 both : 不允許有浮動物件 但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。 如果一個元素的右側有一浮動物件，而這個元素設定了不允許右邊有浮動物件， 即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動物件的目的。
.clearfix:after { <----在類名為“clearfix”的元素內最後面加入內容； content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。 display: block; <----加入的這個元素轉換為塊級元素。 clear: both; <----清除左右兩邊浮動。 visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然佔據空間，只是看不到而已； line-height: 0; <----行高為0； height: 0; <----高度為0； font-size:0; <----字型大小為0； }
整段程式碼就相當於在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。 之所以用它，是因為，你不必在html檔案中寫入大量無意義的空標籤，又能清除浮動。 話說回來，你這段程式碼真是個累贅啊，這樣寫不利於維護。 只要寫一個.clearfix就行了，然後在需要清浮動的元素中 新增clearfix類名就好了。 如：
position(定位) position: relative／absolute
relative 相對定位。相對定位是相對於該元素在文件流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還佔有著原來的位置，即佔據文件流空間。物件遵循正常文件流，但將依據top，right，bottom，left等屬性在正常文件流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute 絕對定位。 定義：設定為絕對定位的元素框從文件流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。
重點：如果父級設定了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級為自適應的，那我子元素就設定position:absolute;父元素設定position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。
另外，物件脫離正常文件流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
複製程式碼總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
position:fixed
fixed：物件脫離正常文件流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，物件不會隨著滾動。