CSS基本屬性

文字屬性

color:字型顏色。
font-size:字型大小。
font-family：字型大小。 
text-align:文字水平對齊方式。取值：left center right
text-decoration:定義穿過文字的一條線。取值：line-through：穿過文字  underline：文字下   none：標準文字
font-style：italic:斜體文字。
font-weight：字型粗細。
line-height：行高。
letter-spacing:指定字元間距  適用於中文。
word-spacing:指定字元間距  單詞間。
text-indent:首行縮排。

需注意：這裡的首行縮排最好使用em作為單位，1em=當前1個文字尺寸。可以避免因為文字樣式的改變導致縮排變大或變小。

背景屬性

background-color：背景顏色。
background-image：背景圖片。值：url（圖片路徑）。
background-repeat：背景重複。取值：no-repeat 不重複   repeat-x 水平重複   repeat-y  垂直重複
background-size：背景尺寸。值：寬（xpx） 高（ypx）
background-position：背景位置。值：水平  垂直

需注意：背景圖片的優先順序高於背景顏色，背景圖片不佔標籤空間。

CSS列表

list-style-type:設定列表項標誌型別。如之前的無序列表項圖示是小黑點，可以改變為小圓圈。
list-style-image:用圖片替換列表項標誌。
list-style-position:控制列表項標誌位置。取值：outside 列表項圖示不與文字在一起  inside 列表項圖示與文字緊隨
list-style:簡寫屬性，可直接羅列所需列表項屬性，無順序。

CSS偽類

作用：表示標籤的一種特殊狀態，為處在不同狀態的標籤設定樣式。例如：滑鼠移動或者點選標籤之後。

偽類語法如下：

:link 普通連結（未訪問）。
:visited  訪問過的連結。
:hover  滑鼠移動到標籤上的狀態。
:active  滑鼠點選後的狀態。
:focus  鍵盤輸入焦點（輸入框）修改樣式。
透明度（CSS屬性，不侷限於偽類）
opacity  規定標籤透明度。 取值：0.0（完全透明）-> 1.0（完全不透明）

需注意：“:visited”是瀏覽器通過訪問歷史記錄知道這個標籤是否已經訪問過了的，它只能設定字型的顏色。 當設定帶有超連結的標籤時，標籤使用是有順序的：visited——>hover——>active

行級、塊級、行級塊標籤

重點：我們要清除的理解關於行級、塊級、行級塊的概念，因為只有理解這幾種標籤的區別和不同，你才能學懂下面要講的漂浮float和定位position。

行級標籤

無論行級標籤中的內容有多少都只會佔據自身的大小，不會霸道的直接佔據一行，但是它也有點小固執，它只想顧好自己的一畝三分地，即使你給它設定更大的寬、高值它都不變。

塊級標籤

塊級標籤就像是一個需要人哄著的孩子。不管它有多少內容都會牢牢的佔據一行，雷打不動。但是它不倔強，只要你勸他，給他設定寬width、高height值它就會改變。

需注意：

預設寬：與父級標籤相同。
預設高：“0”或者“與內容高度一致”

行級塊標籤

行級塊標籤算是三兄弟當中最最聽話的了，它既不會霸道的佔據一行，又可以給它設定大小。

注意：

一般使用塊級標籤包含行標籤。
<a></a>可以包含任何標籤，但不可以包含<a></a>本身。
p標籤不能包含塊級標籤。

兩個純淨的標籤

我們知道在之前學習的各種屬性標籤中既有像標題標籤、p標籤這樣的塊級標籤，也有像b標籤，i標籤這樣的行級標籤，但是這些標籤或多或少都會有自己的樣式或者自帶的邊距之類的，這就給我們CSS的設定樣式和定位造成了一定的影響，因此，下面將介紹兩個純淨無暇的標籤。

div標籤

純淨的塊級標籤。

塊級標籤，可以放置任何標籤。
沒有預設樣式，給什麼屬性就變成什麼樣式。
可以用來進行網頁佈局。

span標籤

純淨的行級標籤。

行級標籤。
沒有預設樣式，給什麼屬性就變成什麼樣式。
是用來選中文件文字的。

Display

作用：

通過display樣式修改標籤型別。

display：

block; ：設定標籤為塊級標籤。
inline; ：設定標籤為行級標籤。
inline—block; ：設定標籤為行級塊標籤。
none; ： 讓標籤在網頁上消失，不佔用網頁空間。

盒子模型

一個盒子模型（標籤）是由四個部分組成：

內容區（content)

內邊距（padding）

邊 框（border）

外邊距（margin）

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-GI532FmX-1601982612661)(C:\Users\caichunlei2017\AppData\Roaming\Typora\typora-user-images\1601981083820.png)]

內容區-content

標籤中的內容都儲存在內容區中。（例如：文字，子標籤等）

width和height只是內容區的大小，不是整個標籤的大小。若沒有內邊距和邊框，那麼內容區的大小就是標籤的大小。width和height只適用於塊級標籤。

內邊距-padding

內容區到邊框之間的距離，會影響標籤的大小。

padding-left/right/bottom/top
padding:10px;上下左右內邊距相同。
padding:10px 5px;上下內邊距  左右內邊距。
padding:10px 9px 8px 7px;上 下 左 右。

邊框-border

在標籤周圍建立邊框，是標籤可見的最外部。

border-top/left/bottom/right  邊框線
線條設定取值：color 線條顏色  width 線寬  style  線的型別
線的型別：solid實線  dotted點線  dashed虛線 double雙線 goove槽線
簡寫 例：border-bottom:1px red solid;下框線
		border:1px red solid;全部框線

注意：標籤實際大小=內容區+內邊距+邊框

外邊距-margin

在標籤邊框距周圍標籤的空間。使用margin屬性可以設定外邊距。

margin-top/left/bittom/right  外邊距
margin的值可以為負。
margin-left/right：auto；左右外邊距自動時，左右外邊距達到最大值，水平居中效果。
margin-top/bottom:auto;  設定auto時值一般為0px，因此不建議直接設定為auto，可以設定為具體值。
margin的其它用法基本和padding相同。

清除瀏覽器預設樣式

*{
	margin：0px；
	padding：0px；
}

清除一些標籤自帶的margin和padding。