css 快速總結回顧

css樣式太多，一般來說，非專業前端不能全部瞭解清楚。本文對一些基礎常用的知識做一個備份回顧，是比較基礎的，能看明白css的大概意思，對一個現成的頁面能做簡單的一些調整即可。

新增樣式

內部樣式表

寫在當前html中，用style標籤包裹。

外部樣式表（推薦）

在其他資料夾中建立一個css檔案，在第一行新增@charset "utf-8" 解決亂碼問題。

在使用頁面head標籤中新增link標籤，rel="stylesheet"。

行內樣式

直接標籤中新增 style=""

選擇器

元素選擇器

直接選擇一類元素，一般用在：a去掉下劃線、li去掉識別符號等。

div {
     width:200px 
;      
}
<div>1<div>

id選擇器

選擇有具體id的元素，一般用在網頁中大板塊選擇。

#nav {  
}
div#nav {
     /* id為nav的div標籤 */
}
<div id="nav"><div>

類選擇器

常用，標籤用class屬性引用，同時應用多個樣式用空格隔開。

.nav {
}
.content {
}
div.nav {
     /* 類名為nav的div標籤 */
}
<div class="nav content"><div>
<div class="nav"><div>

萬用字元/通用選擇器

用*號代替所有元素，一般用來去掉所有的元素預設間距。

* {  
}

子代選擇器

選擇器新增 > 符號來選擇前者的子元素。只有一層巢狀。

.nav > div { 
}
.nav > .content > div {
}

後代選擇器

選擇器新增空格符號來選擇前者的所有後代元素。多層巢狀。

.nav div {    
}

群組選擇器

選擇器新增 , 符號來選擇多個。

.nav ， .content {
}

偽類選擇器

用:號來設定某些行為的樣式。

.nav:hover {
}

優先順序、權值

元素選擇器：1

類選擇器：10

id選擇器：100

行業樣式：1000

手動更改權值（直接最大）：!important

多個選擇器累加權值，群組選擇器不累加，權值高的生效，相同權值後定義生效。

樣式

文字屬性

font-size ：瀏覽器預設字型大小為16px，允許設定的最小字型12px。

font-family：字型，中文加引號，英文多個單詞加引號，多個字型依次查詢電腦裡面有沒有安裝。

color：顏色，rgb每位255 或者 #6位（大寫）或3位（小寫）16進位制。

font-weight，字型粗細，bold加粗，normal正常，100-900。

font-style，italic傾斜字型，oblique文字傾斜。

font，簡寫屬性，[加粗] [傾斜] 字號/[行高] 字型，字號和字型是必備的。

text-intent，首行縮排，px或者em。

text-decoration，underline下劃線，overline上劃線，line-through刪除線，none沒有線。

line-height，行高設定成容器高度，可以垂直居中，僅文字，圖片不行。

text-align，文字和圖片的水平對齊方式，需要在容器上設定，容器內的元素變化。left左，right右，center水平居中，justify兩端對齊（justify不會分散文字，一般中英文混合，右端對不齊，使用justify就可以對齊）。

vertical-align，垂直對齊方式，預設為baseline基線對齊，top上，bottom下，middle居中。容器中文字是不能居中的（table可以設定表格文字垂直位置，input、img可以設定旁邊的文字垂直位置），主要是解決圖片在容器中下方多出3-6px的問題（設定為非基線對齊）。

letter-spacing，字間距，英文字母和漢字的字距。

word-spacing，詞間距，控制英文單詞的間距。

列表屬性

list-style-type，改變列表識別符號樣式，none去掉（一般都是全部去掉），circle空心圓，square實心方塊，disc實心圓，decimal數字等等。

list-style-img，改變列表識別符號為圖片，url(./1.png)。

list-style-position，改變列表識別符號的位置，inside識別符號在內部。

邊框屬性

border，三個屬性：粗細線型（直線solid 虛線dashed 點狀線dotted 雙線double）顏色。這是4個方向的邊框，依次4個邊框的設定：border-top，border-bottom，border-left，border-right。

屬性繼承

所有元素可濰承：visibility、cursor。

內聯元素可健承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

塊狀元素可繼承：text-indent、text-align。

列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可繼承：border-collapse。

簡單說，不需要全部背下來，text-、font-、line-開頭一般可以繼承，color可以繼承（a標籤不能）。

轉換元素型別

display，元素分為兩大類，塊級元素和行業元素。display可以轉換這些元素型別，屬性規定元素應該生成的框的型別，常用的值有下面幾個：

block，元素顯示為塊級元素，比如a標籤這種，設定為block後可以像div一樣設定寬高，還可以獨佔一行。

inline，元素顯示為行內元素，比如div設定為inline後，就變的跟span差不多了，不能設定寬高，也不獨佔一行，多個還加一個空格。

inline-block，元素顯示為行內塊元素，首先說明，像img這種既能設定尺寸也具有行內元素特點的叫行內塊元素，比如一組a標籤設定為行內塊之後可以像浮動一樣。

none，元素消失。

其他

背景圖

background-img，url()。

background-repeat，背景圖是否重複，預設值repeat，no-repeat不重複，repeat-x水平重複，repeat-y垂直重複。

background-position，背景圖定位，0（left、right、center） 0（top、bottom、center）。

background-size，背景圖尺寸，100px 100px。

background，簡寫（常見），按順序加空格，背景定位和背景尺寸加一個/隔開。

透明度

background，rgba，第4位為透明度，0.6為百分之60透明，沒有繼承性。opacity，0.6百分之60透明，有繼承性。

溢位

overflow，預設值visible溢位可見，hidden溢位隱藏，scroll滾動條，auto自動。單行文字省略效果：

div {
    width:200px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

能設定寬高的元素

所有塊級元素，行內元素：img、input、button。

單位

px，畫素。

em，父元素字型大小的倍數，如果沒有設定父元素字型的大小就是自己字型的大小。

佈局

浮動

float，left向左浮動，right向右浮動。脫離文件流，空出的位置，其他塊級元素會補位，只會補位，浮動元素不會覆蓋補位的元素內部的文字乃至div等元素。

浮動停止的條件：

1、碰到父元素邊界；

2、碰到其他浮動元素；

浮動之後父容器高度會塌陷，解決高度塌陷一般有三個辦法：

1、給父容器設定固定高度，不是很靈活。

2、overflow，hidden，子元素參與高度計算，一般來說不是預設值都可以。但是會隱藏溢位元素。

3、萬能清除浮動法，即解決塌陷又顯示溢位。

clear，浮動元素的補位元素設定這個屬性會清除浮動元素效果，不會補位。left清除左浮動，right清除右浮動，both都清除。

/*追加一個元素*/
.clear-fix:after {
    content: "";
    display: block; /*轉換為塊級元素*/
    clear: both; /*清楚浮動*/
}

盒模型/框模型

簡單說，就是一個塊級元素，以框框（Border）為界，可以設定框框外面跟其他元素的4個方向的距離（Margin），和框框裡面跟內部內容（Content）4個方向的距離（Padding）。

margin-top，上外邊距。margin-bottom，下外邊距。margin-left，左外邊距。margin-right，右外邊距。

margin，一個值上下左右，兩個值上下、左右，三個值上、左右、下，四個值上、下、左、由。

塊級元素的水平居中，margin-left:auto 、margin-right:auto。上下即使auto也不能居中。

使用margin遇到的問題：

1、垂葉方向外邊距合併，在沒有浮動的情況下會遇到，以大值為淮。

2、不能設署尺寸的行內元素（例如span、a），無法設署垂直方向外邊距。

3、內外巢狀的div，如果不存在浮動，父無素沒有上邊框，給子元素設定上外邊距會預設作用於父元素（外邊距傳遞問題）。可以給父元素設定內邊距來解決。

padding-top，上內邊距。padding-bottom，下內邊距。padding-left，左內邊距。padding-right，右內邊距。

padding，設定同margin。

使用padding遇到的問題：

1、不能設署尺寸的行內元素（例如span、a）設署垂直方向內邊距不會影響元素的位置。元素會撐大，但是佔的位置不會改變。

2、元素新增內邊距後尺寸會變大。

定位

position:relative，相對定位

參與物：元素本身。

是否脫離文件流：不脫離。

偏移距窗：（向著中心點方向移動為正值）

top，參考自己的頂部向下移動。

bottom，參考自己的底部向上移動。

left，參考自己的左側向右移動。

right，參考自己的右側向左移動。

position:absolute，絕對定位

參考物：外層具有position屬性的元素，如果沒有找到最終參考瀏覽器空白文件區域定位。

是否脫離文件流：脫離。

偏移距離：（向著中心點方向移動為正值）

top，參考物的頂部距離元素的頂部。

bottom，參考物的底部距離元素的底部。

left，參考物的左側距離元素的左側。

right，參考物的右側距離元素的右側。

position:fixed，固定定位

參考物：瀏覽器空白文件區域。