css的四種引入方式
1.行內式--顯示優先順序最高
hello
2.嵌入式3 鏈結式
4.匯入式注意：
匯入式會在整個網頁裝載完後再裝載css檔案，因此這就導致了乙個問題，
如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。
這是匯入式固有的乙個缺陷。使用鏈結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載css檔案，
因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象匯入式那樣先顯示無樣式的網頁，
然後再顯示有樣式的網頁，這是鏈結式的優點。
css選擇器
基本選擇器:
1.標籤選擇器 p
2.id選擇器 #id
3.class選擇器 .class
4.通配選擇器 *
組合選擇器:
e , f 多元素選擇器
e f 後代元素選擇器
e > f 子元素選擇器
e + f 毗鄰元素選擇器
e ~ f 普通兄弟選擇器
a:link（沒有接觸過的鏈結）,用於定義了鏈結的常規狀態。
a:hover（滑鼠放在鏈結上的狀態）,用於產生視覺效果。
a:active（在鏈結上按下滑鼠時的狀態）,用於表現滑鼠按下時的鏈結狀態。
偽類選擇器 : 偽類指的是標籤的不同狀態:
a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 啟用狀態
a:link /* 未訪問的鏈結 */
a:visited /* 已訪問的鏈結 */
a:hover /* 滑鼠移動到鏈結上 */
a:active /* 選定的鏈結 */ 格式: 標籤:偽類名稱
例：top
bottom
注意:一定是outer:hover 控制outer裡某乙個標籤,否則無效
before after偽類
:before ----->p:before 在每個元素之前插入內容
:after ----->p:after 在每個元素之後插入內容
例：p:before
選擇器的優先順序
1.css的繼承
css繼承是有限制的。有一些屬性不能被繼承，
如：border, margin, padding, background等。
2.css的優先順序
所謂css優先順序，即是指css樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""－－1000；
2 統計選擇符中的id屬性個數。 #id －－100
3 統計選擇符中的class屬性個數。 .class －－10
4 統計選擇符中的html標籤名個數。p －－1
按這些規則將數字串逐位相加，就得到最終的權重，
然後在比較取捨時按照從左到右的順序逐位比較。
css屬性操作
文字顏色： color:red;
水平對齊方式: text-align:left;
字型大小： font-size: 10px;
字型樣式： font-family: 'lucida bright';
字型加粗： font-weight: lighter/bold/border/
行高： line-height: 200px;
a標籤的下劃線： text-decoration:none;
首行縮排150px： text-indent: 150px;
字母間距： letter-spacing: 10px;
單詞間距： word-spacing: 20px;
文字轉換： text-transform: capitalize/uppercase/lowercase ;
文字轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫
背景： background-color: red
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;
邊框： border-style: solid; --dotted, none
border-color: chartreuse;
border-width: 20px;
position(定位)：position：relative; 相對定位
absolute; 絕對定位
fixed; 固定位置
dispaly屬性：
display:none; 隱藏
block, 內聯標籤設定為塊級標籤
inline, 塊級標籤設定為內聯標籤
inline-block 塊級標籤設定為內聯標籤
margine外邊框：
居中應用： margin: 0 auto;
簡寫屬性： margin:10px 20px 20px 10px；
上邊距為10px
右邊距為20px
下邊距為20px
左邊距為10px
margin:10px 20px 10px;
上邊距為10px
左右邊距為20px
下邊距為10px
margin:10px 20px;
上下邊距為10px
左右邊距為20px
margin:25px;
所有的4個邊距都是25px
思考2：margin collapse（邊界塌陷或者說邊界重疊） 解決方法：overflow: hidden;
1、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值
2、父子div：
if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中乙個，然後按此div 進行margin；
float屬性
所謂的文件流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文件流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位
假如某個div元素a是浮動的，如果a元素上乙個元素也是浮動的，那麼a元素會跟隨在上乙個元素的後邊(如果一行放不下這兩個元素，那麼a元素會被擠到下一行)；如果a元素上乙個元素是標準流中的元素，那麼a的相對垂直位置不會改變，也就是說a的頂部總是和上乙個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文字依然會為這個元素讓出位置。 浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列。
示例**：
非完全脫離文件流
解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的div設定margin樣式。
左右結構div盒子重疊現象，一般是由於相鄰兩個div乙個使用浮動乙個沒有使用浮動。導致div
不是在同個「平面」上，但內容不會造成覆蓋現象，只有div形成覆蓋現象。
示例**：
region2
父級坍塌現象
解決方法：1、固定高度
2、清除浮動(推薦)。
box1 向左浮動
box2 向右浮動
box3
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，
但文字內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第乙個大盒子裡的子元素使用了浮動，
脫離了文件流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
前端CSS基礎
頁面布局要學習三大核心,盒子模型,浮動 和 定位。學習好盒子模型能非常好的幫助我們布局頁面 網頁布局過程 先準備好相關的網頁元素，網頁元素基本都是盒子 box 利用 css 設定好盒子樣式，然後擺放到相應位置。往盒子裡面裝內容 網頁布局的核心本質 就是利用 css 擺盒子 所謂盒子模型 就是把htm...
前端CSS基礎
目錄二 scc 書寫位置 引入方式實戰 三 css注釋管理 四 基本選擇器 重要 五 組合選擇器 重點 六 屬性選擇器 七 分組與巢狀 八 偽類選擇器 一 css 1.什麼是css？css cascading style sheet，層疊樣式表 定義如何顯示html元素。當瀏覽器讀到乙個樣式表，它就...
前端筆記 CSS
1.使用background image url 引入雪碧圖 2.利用background position屬性結合background size,background repeat等屬性定位需要的圖示 1.將多張合併到一張中，減小的總大小 2.減少http請求數，提高載入效能 1.減少http請求...