你們好，我是ChrisChenJL·宸叡，一個立志奔向Java的自由少年。css

本文內容可能有一點點的多，建議你們點贊+收藏，也能夠關注博主本人哦~html

之後有須要的時候能夠翻出來看一下，我寫的筆記就會變得有意義啦~

api

文章目錄

1、CSS簡介
- 一、什麼是CSS
- 二、CSS組成
- 三、註釋
2、CSS分類
- 一、行內樣式表（內聯樣式表）
- 二、內部樣式表
- 三、外部樣式表
- 四、樣式表的優先級
3、CSS選擇器
- 一、原生選擇器
- 二、原生選擇器的優先級
- 三、衍生選擇器（語法糖）
- 四、其餘類型選擇器（瞭解便可）
4、CSS文字屬性
- 一、font-family 屬性（字體類別）
- 二、font-size 屬性（文字大小）
- 三、font-variant 屬性（小型大寫字母替換）
- 四、font-style 屬性（文字傾斜）
- 五、font-weight 屬性（文字加粗）
- 六、文字的複合屬性（我的不建議使用）
5、CSS顏色&背景屬性
- 一、color 屬性（元素顏色）
- 二、background-color 屬性（背景顏色）
- 三、background-image 屬性（背景圖像）
- 四、background-repeat 屬性（背景重複）
- 五、background-attachment 屬性（背景附件）
- 六、background-position 屬性（背景位置）
- 七、背景圖像的複合屬性
- 八、顏色的表示方法
- - 1）英文關鍵字方式
  - 2）RBG顏色值
6、CSS文本屬性
- 一、word-spacing 屬性（單詞間隔）
- 二、letter-spacing 屬性（字符間隔）
- 三、text-decoration 屬性（文字修飾）
- 四、text-align 屬性（水平對齊方式）
- 五、vertical-align 屬性（垂直對齊方式）
- 六、text-transform 屬性（文本轉換）
- 七、text-indent 屬性（文本縮進）
- 八、line-height 屬性（行高）
- 九、white-space 屬性（處理空白）
7、CSS超連接僞類
- 一、a:link（正常狀態，未訪問過的連接）
- 二、a:visited（用戶已訪問過的連接）
- 三、a:hover（鼠標懸停狀態）
- 四、a:active（鼠標點擊的那一刻）
- 五、cursor 屬性（鼠標懸停樣式）
8、CSS盒子模型
- 一、什麼是盒子模型
- 二、Content（內容區）
- - 1）width 屬性（寬）& height 屬性（高）
  - 2）overflow 屬性（溢出內容處理）
- 三、Padding（內邊距）
- 四、Border（邊框）
- 五、Margin（外邊距）
9、CSS控制顯示類
- 一、塊級標籤
- 二、行級標籤
- 三、visibility 屬性（元素訪問性/可見性）
- 四、display 屬性（控制顯示類/顯示）
10、CSS文檔流
- 一、普通流
- 二、浮動流
- 三、定位流
11、CSS浮動
- 一、什麼是浮動
- 二、float 屬性（浮動）
- 三、clear 屬性（清除浮動）
- 四、清除浮動的集中常見作法
12、CSS定位
- 一、position 屬性（定位方式）
- 二、元素位置屬性（定位偏移量）
- 三、定位的類型
- 四、z-index 屬性（定位層級）
十3、總結

1、CSS簡介

一、什麼是CSS

層疊樣式表 (Cascading Style Sheets，簡稱CSS)。瀏覽器

樣式表是在網頁中用來控制內容展現效果的最有效方式。ssh

樣式定義如何顯示 HTML 元素，美化HTML元素的外觀，例如設置背景顏色和字體等
對網頁內容元素進行佈局和定位
實現動畫效果以及2D/3D轉換
樣式一般存儲在樣式表中
配合HTML/JS實現特效
對HTML元素進行響應式佈局

響應式佈局：針對於不一樣的終端，展現不一樣的效果；例如手機端/PC端/IPad等佈局

二、CSS組成

1）選擇器

樣式表中用於指定某個或者某些元素的方式測試

2）屬性

針對於指定的內容設置其某種展現效果字體

3）屬性值

針對於指定的內容設置其某種展現效果的具體某一種動畫

三、註釋

/**/：以「/*」開頭，以「*/」結束，將須要註釋的內容寫在這個兩個關鍵字中間，這個註釋與HTML/XML中的「」意義相同，可是不能穿插使用。CSS必須用這種註釋才能夠，同時也支持多行。url

2、CSS分類

一、行內樣式表（內聯樣式表）

行內樣式表也被稱做內聯樣式表，若是須要給某一個元素加樣式，須要在相關的標籤內使用樣式（style）屬性。Style 屬性能夠包含任何 CSS 屬性。即直接在這個元素的標籤上加一個style屬性

例：<p style="color:red; background-color: orange;">ChrisChenJL·宸叡</p>

上面的例子中，爲段落標籤加了一個文字顏色樣式和背景顏色樣式，將文字顏色變爲紅色，將背景顏色變爲橙色。可是這樣的寫法，僅對於當前的段落標籤中的內容是有效的。

注意：因爲要將表現和內容混雜在一塊兒，內聯樣式會損失掉樣式表的許多優點。請慎用這種方法

<!-- color:內容（文字）顏色 background-color:背景顏色 -->
<p style="color:red; background-color: orange;">ChrisChenJL·宸叡</p>

二、內部樣式表

內部樣式表也被稱做「嵌入式樣式表」，將樣式表的內容單獨定義在HTML文件中的某個部分，整個html頁面均可使用內部樣式表（嵌入式樣式表）中的內容。

你可使用 <style></style> 標籤在文檔頭部定義內部樣式表

<style></style>標籤，是樣式表標籤。若是咱們須要在html頁面中直接書寫css代碼，那麼就須要使用到這一組標籤。樣式表的內容直接定義在這組標籤中便可

type屬性：用來告訴瀏覽器，這裏面要寫的是什麼內容。基本上如今能夠省略，可是在開發習慣上仍是很是建議你們加上這個內容。

text/css屬性值：表明內容是樣式表。

注意：使用內部樣式表須要在每一個網頁中單獨定義，而且做用範圍也只對當前網頁有效。

<style type="text/css"> h1 {  color: hotpink; } h2 {  color: yellowgreen; } </style>
<body>
	<!-- 使h1標籤中內容顏色爲 粉紅色 使h2標籤中內容顏色爲 草綠色 -->
	<h1>ChrisChenJL</h1>
	<h2>宸叡</h2>
</body>

三、外部樣式表

外部樣式表也被稱做「外聯樣式表」，將樣式表的內容定義在一個單獨的「.css」文件中，若是有html頁面須要使用這個樣式表文件中的內容，那麼直接在html文件中單獨引用這個樣式表文件便可使用這個文件中所定義的樣式表內容。

注意：外部樣式表的定義，直接在文件中定義選擇器和樣式屬性內容，不須要且必定不要再加<style></style>標籤。

當樣式須要應用於不少頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的狀況下，你能夠經過改變一個文件來改變整個站點的外觀。每一個頁面使用 <link> 標籤連接到樣式表。 <link> 標籤在（文檔的）頭部位置。

格式：<link rel="stylesheet" href=" /*css文件的位置*/ ">

<link/>標籤：用於在html文件中引用一個須要使用的樣式表。屬於<head>標籤的子標籤，即定義在<head></head>中

href屬性：定義引用內容的路徑，能夠是絕對路徑或者相對路徑。

type屬性：設定引用的內容的MIME類型，也就是告訴瀏覽器應該以什麼方式解讀這個文件（可不寫）

rel屬性：規定當前文檔與被連接文檔之間的關係

stylesheet屬性值：指示這個引用的文件是一個樣式表文件

<head>
	<meta charset="UTF-8">
    <title>Chris</title>
	<!--引用外部樣式表，link + Tab 輸入外部樣式表的路徑-->
    <link rel="stylesheet" type="text/css" href="css/my.css">
<head>

注意：

一個html文件能夠同時引用多個外部樣式表，同理一個外部樣式表文件能夠被多個html文件引用

文件不能包含任何的 html 標籤。樣式表應該以 .css 擴展名進行保存。

不要在屬性值與單位之間留有空格（如：「margin-left: 20 px」），正確的寫法是「margin-left: 20px」。

四、樣式表的優先級

行內>外部=內部(內外取決於順序）

注意：內部樣式表和外部樣式表誰定義的位置更加靠後，誰優先級就更高

<head>
    <!-- 外部樣式 style.css -->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <!-- 設置：h3{color:blue;} -->
    <style type="text/css"> /* 內部樣式 */ h3{ color:green;} </style>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"/>-->
</head>
<body>
<!-- 行內>外部=內部(內外取決於順序） 內部樣式表和外部樣式表誰定義的位置更加靠後，誰優先級就更高 -->
    <h3 style="color: #bb0000">ChrisChenJL·宸叡</h3>
    <h3>ChrisChenJL·宸叡</h3>
</body>

3、CSS選擇器

將指定的樣式表定義內容定義做用於指定的元素的媒介，就叫作選擇器。

只有內部、外部樣式表涉及到選擇器

選擇器的做用是根據不一樣的條件指定到不一樣的元素

一、原生選擇器

1）元素選擇器（標籤選擇器）

元素選擇器是根據標籤的名稱選擇須要修飾的元素。定義了元素選擇器後，全部使用此標籤名稱定義的內容都會聽從此選擇器內定義的樣式內容。也被稱爲標籤選擇器。

語法格式：S{...}，S爲選擇器名
標籤名稱
{
/* 樣式表定義內容 */
}

例：將p標籤中的文字定義爲紅色，黑體，32px

<head>
	<style> p {  color:red; font-family:黑體; font-size:32px; } </style>
</head>
<body>
	<p>ChrisChenJL·宸叡</p>
</body>

2）類選擇器

如今存在一個html文檔，裏面存在多個段落標籤。咱們並不想對於當前頁面中全部p標籤都生效，只對其一部分進行樣式的設定。那麼類選擇器是最適合的。

語法格式：.S{...}，S爲選擇器名
.類選擇器名稱
{
/* 樣式表內容 */
}

a.單個類選擇器

例：設置高度爲200px，寬度爲500px，背景顏色紅色

<head>
    <style> .s1 {  height:200px; width:500px; background-color: red; } </style>
</head>
<body>
	<p class="s1">你好</p>
</body>

b.多個類選擇器

<head>
    <style> .a {  color: yellowgreen; } .b {  font-family: 華文彩雲; } </style>
</head>
<body>
	<h1 class="a b">ChrisChenJL·宸叡</h1>
<body>

如上所示，class屬性中，能夠同時引用多個類選擇器，多個選擇器間的引用使用空格分隔。兩個詞組的順序能夠隨意

c.多類選擇器

<head>
    <style> .a {  color: yellowgreen; } .b {  font-family: 華文彩雲; } .a.b {  font-size: 100px; } </style>
</head>
<body>
	<h1 class="a">ChrisChenJL</h1>
	<h1 class="b">宸叡</h1>
	<h1 class="a b">ChrisChenJL·宸叡</h1>
</body>

如上所示，若是有一個元素，同時引用了a、b兩個類選擇器，那麼這個元素會同時聽從這三個選擇器中定義的樣式屬性內容。

3）ID選擇器

在某些方面，ID選擇器與類選擇器的使用上極其相似，不過有一些重要差異。除了定義方式和引用方式上的區別之外，還有一些其餘方面的區別，後面會講到。

語法格式：#S{...}，S爲選擇器名
#id選擇器名稱
{
/* 樣式表中定義的內容 */
}

例：設定引樣式爲文字顏色黃綠，背景顏色紅色，字體42px

<head>
    <style> #ab {  color: yellowgreen; background-color:red; font-size:42px; } </style>
</head>
<body>
	<h1 id="ab">ChrisChenJL·宸叡</h1>
</body>

4）ID選擇器與類選擇器的區別

a.區別1

在一個html頁面中，ID選擇器會使用一次，而且僅僅一次

一般狀況下一個html頁面全部的元素id值都是不一樣的，即原則上來講，若是在同一個html文檔中，若是出現了兩個元素的id值徹底相同的狀況，那麼這個html文檔是不嚴謹的。

b.區別2

ID選擇器不能同時引用多個，也不能結合使用

正由於有了區別1的存在，因此id選擇器不能象類選擇器那樣迭代使用。另外html的標準規定，元素的id屬性值中不能包含空格，這也做爲沒法同時引用多個的重要緣由之一。

c.區別3

ID能包含更多定義

相似於類，能夠獨立於元素來選擇 ID。有些狀況下，您知道文檔中會出現某個特定 ID 值，可是並不知道它會出如今哪一個元素上，因此您想聲明獨立的 ID 選擇器。

例如，您可能知道在一個給定的文檔中會有一個 ID 值爲 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項仍是一個小節標題。您只知道每一個文檔都會有這麼一個最重要的內容，它可能在任何元素中，並且只能出現一個。

d.區別4

在定義上的不一樣

定義的時候，類選擇器使用" . "爲開頭定義，而id選擇器使用" # "爲開頭來定義。

e.區別5

在引用方式上的不一樣

引用的時候類選擇器使用class屬性進行引用，而ID選擇器使用id屬性來引用。

二、原生選擇器的優先級

ID> 類 >元素

<head>
    <style> /*元素選擇器*/ h1 {  color: yellowgreen; } /*ID選擇器*/ #ab {  color: hotpink; } /*類選擇器*/ .ab {  color: purple; } </style>
</head>
<body>
	<!-- ID> 類 >元素 -->
	<h1 id="ab" class="ab">ChrisChenJL·宸叡</h1>
</body>

三、衍生選擇器（語法糖）

強調的是選擇器與選擇器之間的關係。

1）後代選擇器（隔代關係）

指定目標選擇器必須處在某個選擇器對應的元素內部。後代選擇器主要用來選擇某個元素的全部後代元素（兒子、孫子、重孫子…）

語法格式：A B{...}，A、B爲HTML元素/標籤，表示對處於A中的B有效
[選擇器名稱] [選擇器名稱] …
{
/* 樣式表定義內容 */
}
注意:父元素與子元素之間至少有一個空格，能夠有不少空格，建議使用一個空格便可

例：將.a下存在的.b文字顏色變爲巧克力色

<head>
    <style> .a .b {  color: chocolate; } </style>
</head>
<body>
<p class="a">Chris1</p>
<em class="a">
    <u>
        <p class="c">Chris2
        <!--Chris3顏色變爲chocolate-->
        <p class="b">Chris3</p>
        </p>
    </u>
</em>
</body>

2）派生選擇器（直接後代）

指定目標選擇器必須處在某個選擇器對應的元素內部。與後代選擇器的區別是，後代選擇器選的是全部子元素（兒子、孫子、重孫子…），而派生選擇器只選第一級子元素（只選兒子不選孫子）內的全部內容

語法格式：A>B{...}，A、B爲HTML元素/標籤，表示對處於A下一級的B有效
[選擇器名稱]>[選擇器名稱]>…
{
/* 樣式表定義內容 */
}
注意:

父元素與子元素之間最好不使用空格，一個「 > 」便可

派生選擇器選擇的是子元素內的全部內容

例：將.a下一級.b中的文字顏色變爲綠色

<head>
    <style> .a>.b {  color: green; } </style>
</head>
<body>
	<span class="a">
	    Chris1
	    <!--Chris二、Chris3變爲綠色-->
	    <span class="b">
	        Chris2
	        <span class="c">Chris3</span>
	    </span>
	</span>
	<span class="b">Chris4</span>
</body>

3）選擇器分組（各自）

若是你須要對於多個選擇器，定義成同一個樣式，能夠選擇使用選擇器分組。至關於定義了多個樣式內容相同的多個選擇器，「,」爲選擇器分組。

這些選擇器是並列關係，也就是說都是同樣的，與順序無關，並且使用選擇器分組，能夠同時分組多種選擇器；即並非只有都是標籤選擇器能夠定義在一個選擇器分組中。

語法格式：A,B{...}，A、B能夠爲不一樣的選擇器
[選擇器名稱],[選擇器名稱],…
{
/* 樣式表定義內容 */
}
注意：使用選擇器分組的時候須要使用半角逗號 「 , 」來對每一個選擇器名稱進行分割。若是不使用逗號而使用空格則又會具有其餘的意義。

例：將h1，h2標籤中的文字顏色變爲綠色

<head>
	<style> /* body>h1,h2 也可*/ h1,h2 {  color: green; } </style>
</head>
<body>
	<!--Chris一、Chris2顏色都變爲綠色-->
    <h1>Chris1</h1>
    <h2>Chris2</h2>
</body>

四、其餘類型選擇器（瞭解便可）

1）通配符選擇器

通配選擇器用一個星號（*）表示。單獨使用時，這個選擇器能夠與文檔中的任何元素匹配，就像一個通配符。

語法格式：*{...}，* 表明全部標籤，全部內容
*
{
/* 樣式表定義內容 */
}
注意：* 能夠表明一切

例：u標籤下字體顏色紅色，p標籤下字體綠色，全部字體爲方正少兒簡體

<head>
    <style> /* 通配符選擇器 「 * 」 能夠表明全部標籤 */ * {  font-family: 方正少兒簡體; } u>* {  color: red; } p>* {  color: green; } </style>
</head>
<body>
	<!--Chris1/2/3/4 字體都是方正少兒簡體-->
	<u>
		<!--Chris一、Chris2顏色爲紅色-->
	    <em>Chris1</em>
	    <strong>Chris2</strong>
	</u>
	<p>
		<!--Chris三、Chris4顏色爲綠色-->
	    <em>Chris3</em>
	    <strong>Chris4</strong>
	</p>
</body>

2）相鄰兄弟選擇器

若是須要選擇緊接在一個元素後面的另外一個元素，而且兩者在同一個父元素下，可使用相鄰兄弟選擇器。這兩個相鄰元素必定是同級元素

語法格式：A+B{...}，A，B是兩個相鄰的同級元素
A+B
{
/* 樣式表定義內容 */
}
注意：

具有相同的父元素

緊接相鄰

指定元素以後，不是以前

例：將strong標籤後面的span標籤中的文字顏色變爲綠色，將em標籤後面的span標籤中的文字顏色變爲紅色

<head>
    <style> strong+span {  color: green; } em+span {  color: red; } </style>
</head>
<body>
    <strong>Chris1</strong>
    <!--Chris2爲綠色-->
    <span>Chris2</span>

    <em>Chris3</em>
    <!--Chris4爲紅色-->
    <span>Chris4</span>
</body>

3）屬性選擇器

元素選擇器實際上是屬性選擇器的一個特例，在屬性選擇器基礎上還能對選擇器描述得更具體

語法格式: 元素名稱[屬性名="屬性值"]{…}
元素名稱[屬性名=「屬性值」]
{
/* 樣式表定義內容 */
}
注意：

屬性值部分是可選擇的

並無獲得全部瀏覽器支持，所以不建議使用

<head>
    <style> [align="middle"][name="2"] {  color: red; } .a[align="middle"][name] {  color: green; } </style>
</head>
<body>
	<!--Chris1文字爲紅色-->
    <h1 align="middle" name="2">Chris1</h1>
    <h1 align="right" name="1">Chris2</h1>
    <h1>Chris3</h1>
    <!--Chris4文字爲綠色-->
    <h1 class="a" align="middle" name="1">Chris4</h1>
</body>

4、CSS文字屬性

CSS文字屬性定義字體，加粗，大小，文字等樣式。

使用這些與文字相關的屬性，對文字字體等相關的樣式的展現效果進行規劃。

一、font-family 屬性（字體類別）

font - family 屬性指定一個元素的字體。

屬性值的狀況	示例
值狀況1	[字體名稱]
值狀況2	[字體名稱1],[字體名稱2],[字體名稱3]…

font-family 屬性能夠同時設置一個或者多個字體名稱值。當設置多個字體名稱值的狀況下，瀏覽器會從第一個值開始採起，若是不認識這個值則會採起下一個值，直到遇到瀏覽器所識別的有效值爲止。

二、font-size 屬性（文字大小）

font-size 屬性用於設置文字大小。

屬性值	說明
xx-small	絕對字體尺寸：最小
x-small	絕對字體尺寸：較小
small	絕對字體尺寸：小
medium	絕對字體尺寸：正常默認值
large	絕對字體尺寸：大
x-large	絕對字體尺寸：較大
xx-large	絕對字體尺寸：最大
larger	相對字體尺寸：相對於父對象中字體尺寸進行相對增大
smaller	相對字體尺寸：相對於父對象中字體尺寸進行相對減少
length	可採用百分比或長度值，不可爲負值，其百分比取值是基於父對象中的字體尺寸

三、font-variant 屬性（小型大寫字母替換）

font-variant 屬性主要用於定義小型大寫字母文本。

font-variant 屬性設置小型大寫字母的字體顯示文本，這意味着全部的小寫字母均會被轉換爲大寫，可是全部使用小型大寫字體的字母與其他文本相比，其字體尺寸更小。

屬性值	說明
normail	正常（默認值）
small-caps	小寫轉換爲大寫

四、font-style 屬性（文字傾斜）

font-style 屬性指定文本的文字傾斜樣式。

屬性值	說明
normail	正常的字體（默認值）
italic	斜體展現
oblique	偏傾斜（不是那麼斜）

注意：<em></em>標籤的實現原理是其中附帶的 font-style: italic 樣式，使其擁有了字體傾斜的效果。（預約義樣式表）

五、font-weight 屬性（文字加粗）

font-weight 屬性設置文本文字的粗細。

屬性值	說明
normail	正常粗細（默認值）
lighter	特細字體
bold	粗體展現
bolder	偏傾斜特粗字體
(number)100 ~ 900	通常狀況下采起整百的數字

注意：<strong></strong>標籤的實現原理是其中附帶的 font-weight: bold 樣式，使其擁有了字體加粗的效果。（預約義樣式表）

六、文字的複合屬性（我的不建議使用）

經過設置font的複合屬性能夠簡化代碼，也就是說只是用一個屬性針對於字體的各個方面進行設置。

複合屬性格式：
font:屬性值1 屬性值2 屬性值3;(注意使用空格分割)

其順序爲：
font:
[font-style](字體樣式)
[font-variant](小型大寫字母)
[font-weight](字體粗細)
[font-size](字體大小)
[line-hight](行高)
[font-family](字體系列)
若是某個值不須要設置，那麼能夠不寫，可是順序是不能亂的。

順序示例：
font : font-style font-variant font-weight font-size line-height font-family;

注意：

font屬性中必須具有font-size和font-family若是不寫這兩項，其餘的即便寫上了也沒有什麼做用。

另外必須嚴格遵照順序

5、CSS顏色&背景屬性

一、color 屬性（元素顏色）

color 屬性指定文本的顏色。

color 屬性值：

關鍵字屬性值（color: red;）

RGB色值表（color: #FFE1FF;）

二、background-color 屬性（背景顏色）

background-color 屬性：用於指定某個元素的背景顏色，在css中使用此屬性不只能夠設置網頁的背景顏色也能夠設置文字的背景顏色。

background-color 屬性值：

關鍵字屬性值（background-color: red;）

RGB色值表（background-color: #FFE1FF;）

三、background-image 屬性（背景圖像）

background-image屬性：用於設置元素的背景圖像，圖像能夠是絕對路徑或者相對路徑。

寫法：background-image:url(圖片路徑);

四、background-repeat 屬性（背景重複）

background-repeat 屬性：用於設置圖片是否平鋪，而且能夠設置如何平鋪。

屬性值	說明
no-repeat	不進行平鋪
repeat-x	只在水平方向上平鋪
repeat-y	只在垂直方向上平鋪

五、background-attachment 屬性（背景附件）

background-attachment 屬性：能夠設置背景圖像隨着對象（內容）滾動仍是固定不動。

屬性值	說明
scroll	隨着圖像滾動，是默認選項
fixed	背景圖像固定在頁面上不動，只有其餘的內容隨着滾動條滾動

六、background-position 屬性（背景位置）

background-position 屬性：用於設定背景圖片的所處位置，這個屬性只能應用於塊級元素和替換元素（替換元素包括：img、input、textarea、select、object）

取值方式	取值	說明
數字取值	x(數值)	設置網頁的橫向位置，能夠是全部的尺度單位
	y(數值)	設置網頁的縱向位置，能夠是全部的尺度單位
百分比取值	0% 0%	左上位置
	50% 0%	靠上居中位置
	100% 0%	右上位置
	0% 50%	靠左居中位置
	50% 50%	正中間位置
	100% 50%	靠右居中位置
	0% 100%	左下位置
	50% 100%	靠下居中位置
	100% 100%	右下位置
關鍵字取值	top left	左上位置
	top center	靠上居中位置
	top rihgt	右上位置
	left center	靠左居中位置
	center center	正中間位置
	right center	靠右居中位置
	bottom left	左下位置
	bottom center	靠下居中位置
	bottom right	右下位置

七、背景圖像的複合屬性

background 屬性：取值能夠包括：背景顏色、背景圖像、背景重複、背景附件、背景位置，各個屬性之間可使用空格進行分割。

複合屬性格式：
background: 屬性值1 屬性值2 屬性值3;(注意使用空格分割)

其順序爲：
background:
[background-color](背景顏色)
[background-image](背景圖像)
[background-repeat](背景重複)
[background-attachment](背景附件)
[background-position](背景位置)
若是某個值不須要設置，那麼能夠不寫，可是順序是不能亂的。

順序示例：
background : background-color background-image background-repeat background-attachment background-position;

注意：順序不要亂！

八、顏色的表示方法

1）英文關鍵字方式

英文關鍵字方式即便以顏色的英文名稱進行命名，基本上每一種顏色都有英文名稱。但是針對於色彩的明暗和深度細微的內容，顏色名稱沒法徹底標識。

2）RBG顏色值

也許你們很早就知道，光的三元色爲 Red（紅色），Blue（藍色），Green（綠色）。使用這三種顏色進行不通配比的混合能夠合成生活中咱們可能看到的任何一種顏色。將這三種顏色的配比以16進制的方式表示出來就是RGB顏色值。

6、CSS文本屬性

一、word-spacing 屬性（單詞間隔）

通過博主實際測試，單詞間隔屬性可能僅對於英文內容有所效果，能夠增長或減小單詞與單詞之間的空白（空格間距）。

默認取值是 normal 也就是正常間隔，也能夠設置爲長度單位的值，而且可使用負值

二、letter-spacing 屬性（字符間隔）

此屬性通過博主實際測試，對於英文和中文都一樣生效。能夠增長或減小字符間的空白（字符間距）

同上，也可使用負值。

三、text-decoration 屬性（文字修飾）

text-decoration 屬性 定義對於一些文字展現出來的效果，例以下劃線、上劃線、刪除線等。

屬性值	說明
none	默認值，表明不進行任何形式的修飾
underline	下劃線，會對於所修飾的內容在展現上帶有下劃線效果
overline	上劃線，會對於所修飾的內容在展現上帶有上劃線效果
line-through	刪除線，會對於所修飾的內容在展現上帶有刪除線的效果
blink	文字閃爍

注意：<u></u>標籤的實現原理是其中附帶的 text-decoration: underline 樣式，使其擁有了下劃線的效果。（預約義樣式表）
標籤

四、text-align 屬性（水平對齊方式）

text-align 屬性：用於設置文本內容的水平對齊方式。

屬性值	說明
left	向左對齊
right	向右對齊
center	居中對齊
justify	兩端對齊

五、vertical-align 屬性（垂直對齊方式）

vertical-align 屬性：用於設置文本內容的垂直對齊方式

屬性值	說明
baseline	默認瀏覽器的垂直對齊方式
sub	文字的下標
super	文字的上標
top	垂直靠上對其
text-top	使元素和上級元素的字體向上對齊
middle	垂直居中對齊
text-bottom	使元素和上級元素字體向下對齊

六、text-transform 屬性（文本轉換）

text-transform 屬性：專用於轉換文本中英文字母的大小寫

屬性值	說明
none	（默認值）不進行文本轉換
capitalize	將內容中每一個單詞首字母轉換爲大寫
uppercase	將內容中全部的英文字母都轉換爲大寫
lowercase	將內容中全部的英文字母都轉換爲小寫

七、text-indent 屬性（文本縮進）

text-indent 屬性規定文本塊中首行文本的縮進

屬性值	說明
數值（length）	定義固定的縮進。默認值：0
百分比（%）	縮進一段基於當前行的長度爲單元的距離

八、line-height 屬性（行高）

line-height 屬性：設置段落中行與行之間的距離。值能夠是長度，倍數和百分比，這裏咱們先暫時只瞭解長度單位的方式（最經常使用）。

屬性值	說明
normail	默認值，設置合理的行間距
(length)	設置固定的行間距（單位 px ）

九、white-space 屬性（處理空白）

white-space 屬性：用於設置頁面內容中空白的處理方式，默認有三個值。

屬性值	說明
normail	（默認值）將內容中連續的多個空白部分合並
pre	將內容中全部的空白部分都原樣的保留下來
nowrap	強制在同一行內展現全部的文本內容，直到結束或者換行（`<br/>`）

7、CSS超連接僞類

超連接僞類樣式：指的是對於超連接的各類狀態進行必定設置。這些狀態大概分爲：點擊以前、鼠標懸浮狀態下、點擊時、點擊以後。咱們能夠經過超連接僞類樣式針對於這些狀態下的超連接進行必定的樣式修飾。

一、a:link（正常狀態，未訪問過的連接）

當一個超連接初次展現的時候，這個時候是默認的狀態，尚未進行過任何的操做，使用選擇器：a:link

二、a:visited（用戶已訪問過的連接）

當超連接點擊以後，其樣式會與從前有所區別，使用選擇器：a:visited

三、a:hover（鼠標懸停狀態）

當你的鼠標懸浮於超連接上方，可是尚未任何操做的時候，使用選擇器：a:hover

四、a:active（鼠標點擊的那一刻）

這裏說明的是當你的鼠標按下了超連接，可是尚未擡起來的時候所約束的樣式，使用選擇器：a:active

連接樣式的順序記憶：
L(link)OV(visited)E and H(hover)A(active)TE

五、cursor 屬性（鼠標懸停樣式）

設置鼠標的展現形態，可是須要注意的是，在不一樣的瀏覽器和不一樣的操做系統中展現效果會有所不一樣，可是其展現效果所表明的意義是不變的。

屬性值	說明
url	能夠引用一個圖片設置鼠標的展現效果，可是若是使用這個屬性的時候通常會再定義一種普通光標，防止url一旦無效的時候沒有可用的光標來展現
default	瀏覽器默認的狀態，一般在大多數的瀏覽器中展現的效果都是一個箭頭
auto	根據瀏覽器的不一樣而定，這個取值是聽從在瀏覽器中定義的光標樣式
crosshair	光標呈現爲一個十字線
pointer	光標呈現爲一個指示到連接的指針（小手樣式）
move	光標標識此對象可能被移動
text	光標指示文本
wait	在老版本的系統中此光標展現效果如同一個沙漏圖標，新系統中有滾動圖標。通常表示正在忙
help	幫助類型的圖標樣式，通常展現效果爲一個問號

8、CSS盒子模型

一、什麼是盒子模型

CSS盒子模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

Margin（外邊距） - 清除邊框外的區域，外邊距是透明的。

Border（邊框） - 圍繞在內邊距和內容外的邊框。

Padding（內邊距） - 清除內容周圍的區域，內邊距是透明的。

Content（內容區） - 盒子的內容，顯示文本和圖像。

二、Content（內容區）

咱們只使用圖片標籤來講，若是你想使用圖片標籤，那麼必然是想展現一個圖像。那麼你所展現圖像就是內容，而爲了所展現具體的內容所佔用的一塊區域，咱們稱之爲內容區。也是咱們所能直觀看到的一個部分；能夠說內容區是盒子模型中必要的一個部分。

1）width 屬性（寬）& height 屬性（高）

width 屬性：針對於內容區的寬度進行設置，最常使用的是像素單位。
height 屬性：針對於內容區的高度進行設置，最常使用的是像素單位。

2）overflow 屬性（溢出內容處理）

overflow 屬性：若是咱們內容區的大小已經沒法知足容納下咱們規劃的內容，這個時候咱們所展現的內容會擠出到內容區和內邊距之外的空間域之外的空間，這些擠出來的部分，咱們稱之爲「內容溢出」。而這個屬性是針對於溢出部分的內容進行設置的屬性。

屬性值	說明
visible	（默認值）任憑內容溢出，內容有多少就展現多少，隨意溢出
hidden	溢出部分的內容會被隱藏，只展現沒有溢出部分的內容
scroll	內容會被剪裁，可是瀏覽器會在內容區展現一個滾動條，使得用戶能夠經過拖拽滾動天來正常預覽到全部內容部分
auto	根據實際內容是否有溢出的狀況，自行決定是否出現滾動條來實現拖動展現所有內容
inherit	使得當前元素的內容溢出屬性值，跟從父元素的設置

三、Padding（內邊距）

內邊距所指的是元素的內容區距離元素的邊框之間的那一塊空間，通邊框同樣，元素上方、右方、左方、下方都可距離邊框部分有必定的空間。

針對於內邊距調整的有以下的幾個屬性：

屬性	說明
padding-top屬性	設置元素上方內邊距的大小，最經常使用取值以像素爲單位
padding-right屬性	設置元素右方內邊距的大小，最經常使用取值以像素爲單位
padding-bottom屬性	設置元素下方內邊距的大小，最經常使用取值以像素爲單位
padding-left屬性	設置元素左方內邊距的大小，最經常使用取值以像素爲單位
padding複合屬性	可使用這個複合屬性針對於元素的四邊內邊距進行統一的設置，根據值的個數不一樣，所設定的內容有所區別
	一個值：設置元素上下左右四個方向的樣式
	兩個值：第一個值是元素上方和下方的內邊距，第二個值爲元素左方和右方的內邊距
	三個值：第一個值是元素上方的內邊距，第二個值爲元素左方和右方內邊距，第三個值爲元素下方的內邊距
	四個值：四個值分別對應元素的上方、下方、左方、右方的內邊距

四、Border（邊框）

邊框所指的就是元素的四周邊框。在HTML中不少塊級元素都有邊框。而一個元素一般是矩形的，既然是矩形就涉及到四個邊；分別是上、右、下、左。

1）單一屬性

總共的屬性以下：

屬性	屬性值	說明
上方邊框的屬性	border-top-width	上邊框的寬度，一般以像素值爲單位
	border-top-style	上邊框的展現樣式，有幾個固定的取值
	border-top-color	上邊框的顏色，取顏色值單位
下方邊框的屬性	border-bottom-width	下邊框的寬度，一般以像素值爲單位
	border-bottom-style	下邊框的展現樣式，有幾個固定的取值
	border-bottom-color	下邊框的顏色，取顏色值單位
左方邊框的屬性	border-left-width	左邊框的寬度，一般以像素值爲單位
	border-left-style	左邊框的展現樣式，有幾個固定的取值
	border-left-color	左邊框的顏色，取顏色值單位
右方邊框的屬性	border-right-width	右邊框的寬度，一般以像素值爲單位
	border-right-style	右邊框的展現樣式，有幾個固定的取值
	border-right-color	右邊框的顏色，取顏色值單位

2）複合屬性

經過如上的方式能夠正常的操做邊框，可是已經至關的麻煩。至少代碼量是至關的龐大。因此咱們可使用複合屬性針對於邊框進行設置：

屬性	說明
上邊框的複合屬性	`border-top: width style color;`
下邊框的複合屬性	`border-bottom: width style color;`
左邊框的複合屬性	`border-left: width style color;`
右邊框的複合屬性	`border-right: width style color;`

3）指定樣式屬性的複合屬性

border-style：
border-color：
border-width：

這些屬性能夠給出1~4個值，不一樣的值表明的順序以下：

一個值：設置上下左右四個方向的樣式。
兩個值：第一個值表明上下的樣式，第二個值表明左右的樣式。
三個值：第一個值表明上的樣式，第二個表明左右的樣式，第三個表明下的樣式。
四個值：上、右、下、左

4）border-style 屬性（邊框樣式）

border-style 屬性：邊框樣式屬性，主要針對於邊框的展現效果進行一些設置，其默認取值包括但不限於以下的幾個：

屬性值	說明
none	默認值，無邊框
dotted	以小圓點組成的邊框
dashed	以虛線構成的邊框
solid	以實線構成的邊框
double	以雙實線構成的邊框
groove	邊框具備立體感的凹槽
ridge	邊匡成脊形
inset	使整個邊框凹陷，即在邊框內嵌入一個立體邊框
outset	使整個邊框凸起，即在邊框外嵌入一個立體邊框

5）border-`xx`-`xx`-radius（邊框弧度）

角邊框是指經過使用樣式屬性針對於塊元素的角產生一些弧度。塊元素都是矩形的，因此涉及到四個角。咱們能夠針對每個角進行設置。

屬性值	說明
border-top-left-radius	設置左上角的弧度，單位爲距離
border-top-right-radius	設置右上角的弧度，單位爲距離
border-bottom-right-radius	設置右下角的弧度，單位爲距離
border-bottom-left-radius	設置左下角的弧度，單位爲距離
border-radius	複合屬性，同時設定多個角的弧度

6）box-shadow: 屬性（邊框陰影）

box-shadow 屬性：針對於內容的邊框背後產生必定的陰影效果。自己就是一個複合屬性，值的順序以下：

單位爲長度，設定橫向（正爲右、負爲左）的陰影距離。
單位爲長度，設定縱向（正爲下、負爲上）的陰影距離。
單位爲長度，設定陰影的虛化程度。
單位爲顏色，設置陰影所採起的主顏色。

五、Margin（外邊距）

外邊距位於元素的最外圍，其並非一條線而是通內邊距同樣是一塊距離。外邊距使得和自制件沒必要緊湊的拼接在一塊兒，是CSS佈局的一個重要手段。設置外邊距的屬性有以下幾項：

屬性	說明
margin-top屬性	設置元素的上方外邊距大小，一般以像素爲單位
margin-right屬性	設置元素的右方外邊距大小，一般以像素爲單位
margin-bottom屬性	設置元素的下方外邊距大小，一般以像素爲單位
margin-left屬性	設置元素的左方外邊距大小，一般以像素爲單位
margin複合屬性	這是一個複合屬性，能夠同時針對於元素的四周外邊距進行統一的設置，根據其取值個數的不一樣，所設置的方向有所區別。各個值之間以空格做爲分割
	一個值：設置元素上方和下方的外邊距
	兩個值：第一個值設置元素上方和下方的外邊距，第二個值設置的是元素左方和右方的外邊距
	三個值：第一個值設置元素上方的外邊距，第二個值設置的是元素左方和右方的外邊距，第三個值設置的是元素下方的外邊距大小
	四個值：四個值分別對應設置元素的上方、右方、下方、左方的外邊距大小

9、CSS控制顯示類

一、塊級標籤

默認在新的一行上開始，而且直接佔據一整行，與內容多少無關。
高度、行高、外邊距、內邊距等均可以自行控制。
寬度默認始終直接佔據父容器的寬度。
能夠容納其餘內聯元素或塊級元素。

塊級標籤也被稱爲：塊級元素，塊元素等

二、行級標籤

默認狀況下與其餘元素在同一行上展現。
高、行高、內外邊距一部分能夠自行控制。
寬度默認只與內容有關。
只能容納文本或者其餘的行內元素。

行級標籤也被稱爲：內聯元素、行內元素、行級標籤等

三、visibility 屬性（元素訪問性/可見性）

visibility 屬性：設置是否顯示元素。

屬性值	說明
visible	設置對象可見默認值
hidden	設置對象隱藏不可見，可是佔據原有的空間

四、display 屬性（控制顯示類/顯示）

display 屬性：控制元素內容的顯示類型。

屬性值	說明
none	將對象直接隱藏，而且不佔據原有空間
inline	將元素指定爲內聯元素
block	將元素指定爲塊元素
inline-block	將元素指定爲內聯塊元素

你會發現，經過這個控制顯示類的屬性能夠將元素的類型進行轉換。

10、CSS文檔流

文檔流描述的就是元素在頁面上默認的排列順序，即元素在空間上的佔用規則。

也就是說，若是你不使用某些樣式或者屬性進行人工干預的時候，默認狀況下元素的堆疊排列尤爲本身的規則和順序，這種規則和順序咱們稱之爲「默認文檔流」

默認文檔流所描述的內容是：將整個瀏覽器窗口自上而下按照一行一行地分割成不一樣的行，而且每一行中的元素內容按照從左到右的順序堆疊排列。這就是默認文檔流所約束的內容。

不是全部的元素都佔據文檔流的

網頁中絕大多數元素，都有其本身的樣子和展現效果也會默認佔據必定的空間，即便這必定的空間能夠人工干預。可是也有一些內容是不佔用文檔流的。

例如表單中的隱藏域<input type="hidden"/>在頁面上沒有任何的展現效果。

干預

咱們也可使用某些方式干預，使得默認狀況下佔據文檔流的元素變得不佔用文檔流，或者更準確地說脫離了文檔流的約束。

後面咱們立刻就要說到的定位屬性就是其中一種。

一、普通流

默認的網頁內容排版佈局，普通流所規定的是網頁中的內容行級內容按照從左到右的順序排列，塊級內容按照從上到下的順序排列。即默認狀況下元素的佔用規則。

塊元素：高度看內容，寬度佔據一整行
行元素：高度看內容，寬度看內容

二、浮動流

經過設定浮動能夠設置內容向指定的方向排列，即元素在浮動的時候所聽從的文檔流。

塊元素：默認內容撐開寬度
行元素：能夠支持寬高

三、定位流

經過定位方式規定元素應該處於的位置，即元素在定位的時候所聽從的文檔流。

11、CSS浮動

一、什麼是浮動

CSS的 float屬性（浮動屬性），可使得元素向左或者右移動，而且其周圍的元素也會從新排列。一般狀況下浮動常常用於圖像，但其在佈局的過程當中也一樣重要。

二、float 屬性（浮動）

float 屬性：控制元素的浮動方向

屬性值	說明
left	使得元素向左方浮動
right	使得元素向右方浮動

三、clear 屬性（清除浮動）

clear 屬性：清除浮動的屬性，所謂的清除浮動，並非清除自身的浮動，而是清除因其餘元素的浮動致使的對自身的展現效果的影響。

屬性值	說明
left	清除向左的浮動效果
right	清除向右的浮動效果
both	清除兩側的浮動效果

四、清除浮動的集中常見作法

1）方法一

使用空標籤的方式清除浮動，在浮動元素後面加一個div，樣式屬性爲：height:0; font-size:0; clear:both;

原理：若是一個內容浮動，會對其餘內容產生影響，那麼這種影響必定是智能對於其後面的元素產生，對於此元素以前的內容是不會有影響的。這個時候咱們加了一個空的div元素，使其內容區高度爲0，字號爲0，清除兩邊的浮動
這樣作的緣由：在IE6中的一個特色：IE6最小高度爲19像素，當元素高度不足19像素的時候，IE6會給其19像素的高。

2）方法二

使用換行來清除浮動效果

在浮動元素下面添加：<br clear="all"/>
在浮動元素下面添加：<br style="clear:both;"/>

3）方法三

僞類選擇器來實現（主流方法）

.clear{zoom: 1;}
.clear:after{content:''; display:block; clear:both}

12、CSS定位

一、position 屬性（定位方式）

position 屬性：使用定位方式屬性能夠控制瀏覽器如何定位html元素

屬性值	說明
static	默認值，若是咱們的position的屬性值設置爲static，那麼咱們能夠認爲這個元素根本沒有定位。
absolute	使用絕對定位，須要同時使用left、right、top、bottom等屬性進行定位。（經常使用）
fixed	固定定位，當前瀏覽器窗口滾動的時候元素不跟着滾動
relative	採用相對定位，對象不可重疊。（經常使用）
sticky	粘性定位的元素是基於用戶的滾動位置，在 `position: relative` 與 `position: fixed` 定位之間切換。

二、元素位置屬性（定位偏移量）

元素位置屬性與定位方式共同決定元素的具體位置。

top屬性：auto|長度值|百分比（經常使用）

right屬性：auto|長度值|百分比

bottom屬性：auto|長度值|百分比

left屬性：auto|長度值|百分比（經常使用）

注意：auto表明的是採起默認值；長度值包括數字和單位，也可使用百分比來設置。

三、定位的類型

1）相對定位

設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它本來所佔的空間仍保留。

所相對的是元素本來應該所處的位置

不影響元素自己的特性

不使元素脫離文檔流

若是沒有定義偏移量，對元素自己沒有任何影響。

2）絕對定位

設置爲絕對定位的元素框從文檔流徹底刪除，並相對於其包含塊定位，包含塊多是文檔中的另外一個元素或者是初始包含塊。

元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

使得元素徹底脫離文檔流（可使用兩個div演示）

使內嵌（說白了就是行級標籤）支持寬高（可使用行級標籤演示）

塊標籤內容撐開寬度（可使用塊標籤進行演示）

若是有定位父級，相對於父級發生偏移，若是沒有父級相對於整個窗口進行偏移。(能夠結合實際例子演示)

絕對定位一般配合相對定位一同使用。

注意：若是往後你須要使用絕對定位，那麼你必定要搞清楚，絕對定位究竟是基於什麼去進行定位的

3）固定定位

固定定位所指的是將一個元素固定在瀏覽器當前窗口的指定位置，不隨着瀏覽器滾動條的滾動而隨之滾動。也能夠經過偏移量對其進行設置。

IE6不支持固定定位方式

使用頻率並不高

始終是針對於整個文檔定位（整個瀏覽器窗口）

4）粘性定位

粘性定位基於用戶滾動位置來定位，在未滾動出目標區域時，它的行爲就像position: relative;它的表現就像 position: fixed;，它會固定在目標位置。元素定位表現爲在跨越特定閾值前爲相對定位，以後爲固定定位。

這個特定閾值指的是 top, right, bottom 或 left 之一。換而言之，指定 top, right, bottom 或 left 四個閾值其中之一纔可以使粘性定位生效。不然其行爲與相對定位相同。

四、z-index 屬性（定位層級）

z-index 屬性：定位層級屬性，放置一個number的值，能夠有負數；定位元素默認後者高於前者；

說白了就是誰遮擋在誰的前面。（可使用四個DIV加上絕對定位的方式演示一下）

十3、總結

本系列博文主要用於博主本人平常的複習，既能夠做爲筆記保存，又能夠隨時翻看進行復盤使用。

也但願在將來的某一刻能夠幫得上你們~

博主萌新一枚，理解淺顯，不足之處望各位大佬多多指教，嘿嘿~謝謝你們 ᕦ(･ㅂ･)ᕤ

Web前端之CSS