https://www.cnblogs.com/wj-1314/articles/9224267.html
CSS文法基礎
引言：CSS文法
CSS規則由兩個主要的部分構成：選擇器，以及一條或者多條聲明。
| 1 2 3 4 5 6 | |
例如：
| 1 | |
在上面的CSS代碼中：
-
h1
-
{color:red;front-size:14px;}
-
color
-
red
-
color:red;
每個聲明由一個屬性和一個值組成。
selector
選擇要設定樣式的HTML元素。
屬性是要更改的樣式屬性。每個屬性都有一個值。 CSS聲明以分号結尾，聲明組被大括号括起來。
一，網頁中CSS的四種引入方法
1.行内式
行内式是在标記的style屬性中設定CSS樣式。這種方式沒有展現出CSS的優勢，不推薦使用。
+ View Code
2.嵌入式
嵌入式是将CSS樣式集中寫在網頁的<head></head>标簽對的<style></style>标簽對中。格式如下：
+ View Code
3.連結式（推薦）
将一個.css檔案引入到HTML檔案中
+ View Code
4.導入式
将一個獨立的.css檔案引入HTML檔案中，導入式使用CSS規則引入外部CSS檔案，<style>标記也是寫在<head>标記中，使用的文法如下：
+ View Code
注意：
導入式會在整個網頁裝載完後再裝載CSS檔案，是以這就導緻了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連結式時與導入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，是以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
二，CSS的選擇器
“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素
1.基礎選擇器
| 1 2 3 4 5 6 7 | |
2.組合選擇器
| 1 2 3 4 5 6 | |
舉個例子
+ View Code
注意嵌套規則：
- 塊級元素可以包含内聯元素或某些塊級元素，但内聯元素不能包含塊級元素，它隻能包含其它内聯元素。
- 有幾個特殊的塊級元素隻能包含内聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 塊級元素與塊級元素并列、内聯元素與内聯元素并列。
+ View Code
3.屬性選擇器
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | |
4，僞例
4.1 CSS僞類：是用來給選擇器添加一些特殊效果。
anchor僞類：專用于控制連結的顯示效果
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | |
舉個例子
+ View Code
補充
| 1 | |
before after僞類 ：
| 1 2 3 4 5 6 | |
5,CSS優先級和繼承
5.1 CSS優先級:
所謂CSS優先級，即是指CSS樣式在浏覽器中被解析的先後順序。
| 1 2 3 4 5 | |
按這些規則将數字元串逐位相加，就得到最終的權重，然後在比較取舍時按照從左到右的順序逐位比較
+ View Code
5.2 CSS的繼承性:
繼承是CSS的一個主要特征，它是依賴于祖先-後代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的後代。例如一個BODY定義了的顔色值也會應用到段落的文本中。
| 1 | |
這段文字都繼承了由body {color:red;}樣式定義的顔色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
| 1 | |
發現隻需要給加個顔色值就能覆寫掉它繼承的樣式顔色。由此可見：任何顯示申明的規則都可以覆寫其繼承樣式。
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
| 1 2 3 4 5 | |
附加說明
1、文内的樣式優先級為1,0,0,0，是以始終高于外部定義。這裡文内樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷标定義的規則。
2、有!important聲明的規則高于一切。
3、如果!important聲明沖突，則比較優先權。
4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。
5、由繼承而得到的樣式沒有specificity的計算，它低于一切其它規則(比如全局選擇符*定義的規則)。
三，css的常用屬性
3.1，顔色屬性
在CSS中不可避免會遇到顔色設定，是以這裡我們需要學習怎麼表示顔色。
共有4種顔色表示法：
- 預定義顔色：例如“color:black”中的black就是預定義的顔色。
- 十六進制表示法：#ABCDEF，其中AB、CD、EF分别對應R、G、B。例子：#FFFFFF 表示白色。
- 短十六進制表示法：這是對第二種表示法的特例，當A=B時A和B隻寫一個(同樣地，C=D、E=F 時也類似)。例子：#FF00CC 可簡寫為 #F0C.
- rgb表示法：rgb(255,255,255) 表示白色
| 1 2 3 4 5 6 7 | |
3.2，字型屬性
- font-style: 設定斜體。可選值有：normal(正常), italic(斜體).
- font-weight: 設定粗體。可選值有：normal(正常), bold(粗體).
- font-size: 設定字号。
- line-height: 設定行高，即一行的高度。
- font-family: 設定字型。這裡值得一提的是可以同時寫多個字型，如："font-family:'雅黑','宋體','黑體';"，因為不同機器上擁有的字型可能不一樣，如果有的機器沒有雅黑字型，則使用宋體，如果沒有宋體，最後使用黑體。
- color: 設定字的顔色。
| 1 2 3 4 5 6 7 | |
3.3，背景屬性
| 1 2 3 4 5 6 7 8 9 10 11 | |
注意：如果将背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖檔；另外，如果此時要設定一個width＝100px，你也看不出效果，除非你設定出html。
+ View Code
eg:
+ View Code
3.4，文本屬性
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | |
3.5，邊框屬性
| 1 2 3 4 5 6 7 | |
邊框單獨設定各邊
| 1 2 3 4 | |
3.6，清單屬性
| 1 2 3 4 5 | |
list-style-type屬性指定清單項标記的類型：
| 1 | |
使用圖像來替換清單項内的标記：
| 1 2 3 | |
| 1 2 3 4 | |
3.7，display屬性
| 1 2 3 | |
display:inline-block可做清單布局，其中的類似于圖檔間的間隙小bug可以通過如下設定解決：
| 1 2 3 4 | |
3.7.1 none(隐藏某标簽)
| 1 | |
注意與visibility:hidden的差別：
visibility:hidden可以隐藏某個元素，但隐藏的元素仍需占用與未隐藏之前一樣的空間。也就是說，該元素雖然被隐藏了，但仍然會影響布局。
display:none可以隐藏某個元素，且隐藏的元素不會占用任何空間。也就是說，該元素不但被隐藏了，而且該元素原本占用的空間也會從頁面布局中消失。
3.7.2 block（内聯标簽設定為塊級标簽）
| 1 | |
注意：一個内聯元素設定為display:block是不允許有它内部的嵌套塊元素。
3.7.3 inline（塊級标簽設定為内聯标簽）
| 1 | |
3.7.4 inline-block
display:inline-block可做清單布局，其中的類似于圖檔間的間隙小bug可以通過如下設定解決：
| 1 2 3 4 | |
3.8，外邊框和内邊框
盒子模型
- margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到互相隔開的目的。
- padding: 用于控制内容與邊框之間的距離；
- Border(邊框) 圍繞在内邊距和内容外的邊框。
- Content(内容) 盒子的内容，顯示文本和圖像。
margin（外邊距）
單邊外邊距屬性
| 1 2 3 4 | |
簡寫屬性
+ View Code
居中應用：
| 1 | |
padding（内邊距）
單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。
設定同margine；
頁碼執行個體：
+ View Code
思考：body的邊距
邊框在預設情況下會定位于浏覽器視窗的左上角，但是并沒有緊貼着浏覽器的視窗的邊框，這是因為body本身也是一個盒子（外層還有html），在預設情況下， body距離html會有若幹像素的margin，具體數值因各個浏覽器不盡相同，是以body中的盒子不會緊貼浏覽器視窗的邊框了，為了驗證這一點，加上：
| 1 2 3 4 | |
解決方法：
| 1 2 3 | |
思考2：margin collapse（邊界塌陷或者說邊界重疊）
1、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值
2、父子div：
if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個标簽包括border，padding，inline content中的其中一個，然後按此div 進行margin；
元素的寬度和高度:
+ View Code
解決方法：
| 1 | |
重要: 當您指定一個CSS元素的寬度和高度屬性時，你隻是設定内容區域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。.
| 1 2 3 4 | |
下面的例子中的元素的總寬度為300px：
| 1 2 3 4 | |
練習： 300px*300px的盒子裝着100px*100px的盒子，分别通過margin和padding設定将小盒子 移到大盒子的中間
+ View Code
3.9，float屬性
3.9.1 基本浮動規則
先來了解一下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脫離文檔流的元素，其他盒子與其他盒子内的文本都會無視它。(可以說是完全無視)
浮動的表現
定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，是以文檔的普通流中的浮動框之後的塊框表現得就像浮動框不存在一樣。（注意這裡是塊框而不是内聯元素；浮動框隻對它後面的元素造成影響）
注意 當初float被設計的時候就是用來完成文本環繞的效果，是以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多麼複雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。
現象1:
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟随在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是标準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列。
現象2:
(1)左右結構div盒子重疊現象，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有導緻DIV不是在同個“平面”上，但内容不會照成覆寫現象，隻有DIV形成覆寫現象。
解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設定margin樣式。
(2)上下結構div盒子重疊現象
+ View Code
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container産生了重疊，但文本内容沒有發生覆寫，隻有div發生覆寫現象。這個原因是因為第一個大盒子裡的子元素使用了浮動，脫離了文檔流，導緻.container沒有被撐開。box3認為.container沒有高度（未被撐開），是以跑上去了。
解決方法：
1、要麼給.container設定固定高度，一般情況下文字内容不确定多少就不能設定固定高度，是以一般不能設定“.container”高度(當然能确定内容多高，這種情況下“.container是可以設定一個高度即可解決覆寫問題。
2、要麼清除浮動。
清除浮動：
在非IE浏覽器（如Firefox）下，當容器的高度為auto，且容器的内容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以适應内容的高度，使得内容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動
| 1 2 3 4 5 6 7 8 | |
方法一（推薦）：
| 1 2 3 4 5 6 7 8 9 10 | |
整段代碼就相當于在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。
之是以用它，是因為，你不必在html檔案中寫入大量無意義的空标簽，又能清除浮動。
話說回來，你這段代碼真是個累贅啊，這樣寫不利于維護。
隻要寫一個.clearfix就行了，然後在需要清浮動的元素中 添加clearfix類名就好了。
如：
| 1 | |
方法二：
| 1 | |
overflow：hidden的含義是超出的部分要裁切隐藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明确設定包含容器高度的情況下，它要計算内容的全部高度才能确定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
10，position（定位）
1 static
static 預設值，無定位，不能當作絕對定位的參照物，并且設定标簽對象的left、top等值是不起作用的的。
2 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屬性定義。
總結：參照物用相對定位，子元素用絕對定位，并且保證相對定位參照物不會偏移即可。
3 position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會随着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設定為fixed的元素會被定位于浏覽器視窗的一個指定坐标，不論視窗是否滾動，它都會固定在這個位置。
4 僅使用margin屬性布局絕對定位元素
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素産生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性布局相對定位元素。
層級關系為：
<div ——————————— position:relative;
<div—————————-沒有設定為定位元素，不是參照物
<div———————-沒有設定為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
5、overflow:hidden
overflow：hidden的含義是超出的部分要裁切隐藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明确設定包含容器高度的情況下，它要計算内容的全部高度才能确定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
3.10 position（定位）
3.10.1 static
static 預設值，無定位，不能當作絕對定位的參照物，并且設定标簽對象的left、top等值是不起作用的的。
3.10.2 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屬性定義。
示例代碼：
+ View Code
總結：參照物用相對定位，子元素用絕對定位，并且保證相對定位參照物不會偏移即可。
3.10.3 position：fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會随着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設定為fixed的元素會被定位于浏覽器視窗的一個指定坐标，不論視窗是否滾動，它都會固定在這個位置。
示例代碼：
+ View Code
3.11 caution
3.11.1 預設的高度和寬度問題
(1) 父子都是塊級标簽
+ View Code
這時候，子元素設定為了父元素width的100% 那麼子元素的寬度也是500px
但是如果我們把子元素的width去掉之後，就會發現子元素還是等于父元素的width。也就是說，對于塊級元素，子元素的寬度預設為父元素的100%。
當我們給子元素添加padding和margin時，可以發現寬度width是父元素的寬度減去子元素的margin值和padding值。
毫無疑問，如果去掉子元素的height，就會發先子元素的高度為0，故height是不會為100%的，一般我們都是通過添加内容（子元素）将父元素撐起來。
（2）父：塊級元素 子：内聯元素
如果内聯元素是不可替換元素（除img，input以外的一般元素），元素是沒有辦法設定寬度的，也就談不上100%的問題了。 即内聯元素必須依靠其内部的内容才能撐開。
如果内聯元素是可替換元素（img，input，本身可以設定長和寬），不管怎麼設定父元素的寬度和高度，而不設定img的寬和高時，img總是表現為其原始的寬和高。
+ View Code
由此我們可以發現，雖然沒有設定寬度，但是表現在浏覽器上為160px，它并沒有繼承父元素的100%得到500px，而是根據既定的高度來等比例縮小寬度。 同樣， 如果隻設定width，那麼height也會等比例改變。 如果我們把img的width設定為100%，就可以發現其寬度這時就和父元素的寬度一緻了。而我們一般的做法時，首先确定img的父元素的寬度和高度，然後再将img的寬度和高度設定位100%，這樣，圖檔就能鋪滿父元素了。
四，背景管理布局
+ View Code
五，css響應式布局
+ View Code