CSS 簡單概括 -- 前端知識

CSS:cascading style sheets層疊樣式表，用於美化頁面

css的三種表現形式：
一、行內樣式（內嵌樣式）：結構的內部，即寫在標籤內的樣式；寫在標籤的開始部份內部，style屬性當中；
<標記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"></標記>
二、內部樣式（內聯樣式）：寫在HTML頁面內部，存放於head標記當中，樣式寫在style標記內；
注意：style標記不要寫在title標記上方；
<style>
選擇器 {
屬性名：屬性值；
屬性名：屬性值；
......
}
</style>
三、外部樣式（外聯樣式）：寫在css文件內；
<link type="text/css" rel="stylesheet" href="css/main.css" />

color:設置文本顏色；
屬性值：一、表示顏色的英文單詞，例如：red、blue、green、pink、purple、cyan等；
二、十六進制表示法：#ff0000； 0、一、2...九、a、b、c...f
# ff 00 00
紅色 綠色 藍色
0表示顏色的最低值，f表示顏色的最大值；
三、rgb表示法：color：rgb(0,0,0)；取值0-255；
四、rgba表示法：color:rgba(0,0,0,0)；前三個值的取值0-255，第四個值的取值0-1；
a--alpha

font-family：設置字體格式；能夠設置多個字體格式，之間用「，」隔開，字體格式用「」包含；

font-size：設置字體大小，單位像素（px）；

font-style：設置字體樣式
normal--正常的，沒有任何樣式；
italic--斜體字；只有字體自己有斜體才能傾斜，不然不能傾斜；
oblique--傾斜的；能夠強行傾斜字體；

font-weight：設置字體字重，即字體的粗細；
100-900取整百，700至關於粗體（bold），900至關於更粗（bolder）；
bold--粗體
bolder--比粗體更粗；
lighter--細體；

選擇器：選擇對應的標籤，將樣式給到對應的標籤；
一、標籤選擇器：給同一種標籤添加樣式；
代碼：
標籤名 {
屬性名：屬性值；
}

二、通用選擇器（通配符）：給全部的標籤添加樣式；
代碼：
* {
屬性名：屬性值；
}
注意：通用選擇器是先遍歷頁面當中全部的標籤，而後再給這些標籤添加樣式，因此這個選擇器的性能很是低；通常只會在測試的時候使用，用於css的初始化，可是在項目當中不要使用；

三、類選擇器：給同一類（同一個羣體）標籤添加樣式；要先給同一類標籤取一個名字；
屬性--class給標籤命名類名；
代碼：
.class名（類名）{
屬性名：屬性值；
}
注意：一個類名能夠給多個標籤，一個標籤能夠有多個類名，多個類名之間用「空格」隔開；

四、id選擇器：給某一個標籤添加樣式；要先取一個id名
屬性--id；
代碼：
#ID名 {
屬性名：屬性值；
}
注意：一個ID名只能給一個標籤，一個標籤只能有一個ID名；（從一而終）

五、後代選擇器：選擇的是某一個元素的後代元素；
代碼：
祖先選擇器 後代名 {
屬性名：屬性值；
}
注意：中間是用「空格」鏈接，表示「裏面的」意思；

選擇器原理：是由內向外查找，先查找全部的p，而後判斷這個p是否由知足要求的父節點father，不知足就繼續向上一級查找，沒有找到就不滿要求，找到了纔給這個p添加樣式；

六、子選擇器：選擇某個元素的直接後代；
代碼：
父選擇器>子級{
屬性名：屬性值；
}

七、相鄰兄弟選擇器：選擇緊挨着該元素的後面的一個元素；
代碼：
元素名+兄弟名{
屬性名：屬性值；
}

八、通用兄弟選擇器：選擇的是該元素後面的全部的某一種元素；
代碼：
元素名~兄弟名{
屬性名：屬性值；
}

九、並集選擇器：將兩個不相干的元素同時添加相同屬性；
代碼：
元素1，元素2，元素3......{
屬性名：屬性值；
}

十、交集選擇器：當標籤和類名（ID名）都衝突的時候，使用交集選擇器；
代碼：
元素名.類名（#ID名）{
屬性名：屬性值；
}

css三大特性：
一、繼承：父級的樣式會被子級繼承；!important不會被繼承；

二、層疊：當樣式發生衝突的時候，樣式會產生覆蓋（層疊）；

三、優先級：!important(最高級)>行內樣式>id>類>標籤>*>繼承；
同級樣式遵循「就近原則」；就近指定是誰離內容進誰的優先級就高；

權重：標籤選擇器--1
類選擇武器--10
id選擇器--100
行內樣式--1000
!important--1/0(無窮大)
數標籤：先數id，比較完id再數類，比較完類再數標籤；

盒子模型：
一、內容--寬度：width；單位px、百分比（繼承）、em、rem；
高度：height；單位px、百分比（繼承）、em、rem；
背景--背景色：background-color；顏色單詞、十六進制表示法、rgb、rgba；
背景圖片：background-image:url(路徑)；
背景圖片重複：background-repeat；no-repeat(不重複)、repeat-x（水平重複）、repeat-y（垂直重複）、repeat（水平垂直重複、默認）；
背景定位：background-position：left、center、right、top、center、bottom、具體的數值（單位px）
背景連寫：background：背景顏色 背景圖片 背景圖片重複 背景定位；能夠只單寫某一個屬性；

二、填充：上填充--padding-top
下填充--padding-bottom
左填充--padding-left
右填充--padding-right
填充連寫--padding：1個值--》上、右、下、左所有是這個值；
2個值--》第一個值表示上下，第二個值表示左右；
3個值--》第一個值表示上，第二個值表示左右，第三個值表示下；
4個值--》依次爲上、右、下、左；（順時針方向）
注意：padding會改變盒子的大小，要想在添加padding的同時保持盒子的大小不變，應將padding的值從盒子的大小中減去；

三、邊框：邊框粗細--border-width
邊框顏色--border-color
邊框樣式--border-style：solid（實線）、dashed（虛線）、dotted（點線）
邊框連寫--border：width style color;
能夠單獨只寫某一邊的邊框--border-top、border-bottom、border-left、border-right
注意：邊框的對齊方式爲向外對齊，因此邊框會改變盒子大小；

四、外邊距：上邊距--margin-top
下邊距--margin-bottom
左邊距--margin-left
右邊距--margin-right
外邊距連寫--margin：1個值 2個值 3個值 4個值（參照padding）；

默認文檔流佈局下，父子上邊界共用問題？
解決：一、使用padding；
二、給父級使用border；
三、給父級添加屬性--overflow：hidden；
四、浮動；
五、定位；

外邊距塌陷：在垂直方向上上下邊距會合並，取最大值；

盒子水平居中：margin：0 auto；

樣式的繼承：width、color、font-、text-、line-height均可以被繼承；

<ins></ins>下劃線標記

<del></del>刪除線標記

文本修飾：text-decoration--underline；下劃線
line-through；刪除線
none；無/沒有修飾；

文本對齊：text-align--left；左對齊
center；居中對齊
right；右對齊

文本縮進：text-indent；指的是文本的首行縮進；
單位px、em；

行高：line-height--用於設置一行文本的高度，經常使用於設置一行文本在容器當中垂直居中；
單位：一、px；
二、百分比；基於文字大小的百分比，「%」前必須是整十，如：150%、200%
三、em；相對單位，一樣是基於文字大小；如：1.5em、2em；
四、沒有單位；a--沒有繼承的狀況下，至關於em；
b--在有繼承的狀況下：
i、父級的行高有單位em，則會先計算好行高，而後將行高的數值直接繼承給子級，子級自己不會再計算行高；
ii、行高沒有單位，則父級會直接將行高繼承給子級，而後子級根據行高值自行計算行高；

font連寫--font：樣式/粗細 大小 格式；大小和格式必須都有，缺乏任何一個都不行；

元素的顯示方式：
一、塊級--block；獨佔一行，支持寬高；
二、行內--inline；和其餘行內元素在一行顯示，不支持寬高；
三、行內塊級--inline-block，既有行內元素特性，又有塊級元素的特性；一樣在一行中顯示，而且支持寬高；
display:block/inline/inline-block；
以上爲默認文檔流（標準文檔流）下的狀況；

在有連接的狀況下，a標記沒法繼承父級的color樣式；

僞類選擇器：
a:link--連接的本來的樣式（沒有訪問過）；一旦訪問事後就失效；
a:hover--鼠標移入時的樣式；
a:active--鼠標按下時的樣式（鼠標沒有鬆開）；
a:viseted--連接訪問事後的樣式；
L--H--V--A

浮動：讓默認（標準）文檔流下的元素漂浮起來水平排列；
float--left左浮動；
right右浮動；
none不浮動；
浮動排列的順序不會改變，默認時誰在第一個，浮動就會排在第一個；

浮動的影響：
一、行內元素浮動以後能夠支持寬高；
二、文本會給浮動的元素讓位；能夠製做文本繞排的效果；
三、在父級沒有給高度的狀況下，子級浮動後父級會沒有高度；

清除浮動：
一、在父級內容的最後添加一個空的div，添加clear屬性；
clear--left清除左浮動；
right清除右浮動；
both清除全部（左/右）浮動；
clear是清除上一個元素帶來的影響；
不推薦使用，由於會在頁面上添加太多的無用標籤，讓頁面的佈局變得更復雜；

二、給父級設置overflow：hidden；
會觸發bfc（block formatting context）塊級格式化上下文；
不推薦使用，由於這個屬性和定位一塊兒使用時會產生問題；

三、使用僞元素after
.clearfix:after {
content:"";/*內容爲空*/
height:0;/*高度爲0*/
line-height:0;/*行高爲0*/
display:block;/*塊級元素*/
visibility:hide;/*隱藏*/
clear:both;/*清除浮動*/
}
.clearfix {
zoom:1;/*IE678*/
}

四、使用雙僞元素after和before
.clearfix:afer,.clearfix:before {
content:"";
display:table;
clear:both;
}
.clearfix {
zoom:1;
}
以上四種方式推薦使用第三種；

列表樣式：list-style

定位：
一、靜態定位--static；按照標準文檔流進行佈局；

二、相對定位--relative；相對自身；以自身的坐上角（座標點）爲參考；會保留原來的位置不被其餘元素侵佔；

三、絕對定位--absolute；參考的是頁面的左上角；絕對定位位置不會被保留；
若是父級有定位，則參考父級的座標點；若是父級沒有定位，則會一級一級向上查找，直到html標籤，中途有定位就會參照這個定位元素的座標點；

四、固定定位--fixed；相對於瀏覽器窗口的左上角；