大家好，我是ChrisChenJL·宸叡，一個立志奔向Java的自由少年，

本文內容可能有一點點的多，建議大家點贊+收藏，也可以關注博主本人哦~

以后有需要的時候可以翻出來看一下，我寫的筆記就會變得有意義啦~

文章目錄

一、CSS簡介
- 1、什么是CSS
- 2、CSS組成
- - 1）選擇器
  - 2）屬性
  - 3）屬性值
- 3、注釋
二、CSS分類
- 1、行內樣式表（行內樣式表）
- 2、內部樣式表
- 3、外部樣式表
- 4、樣式表的優先級
三、CSS選擇器
- 1、原生選擇器
- - 1）元素選擇器（標簽選擇器）
  - 2）類選擇器
  - - a.單個類選擇器
    - b.多個類選擇器
    - c.多類選擇器
  - 3）ID選擇器
  - 4）ID選擇器與類選擇器的區別
  - - a.區別1
    - b.區別2
    - c.區別3
    - d.區別4
    - e.區別5
- 2、原生選擇器的優先級
- 3、衍生選擇器（語法糖）
- - 1）后代選擇器（隔代關系）
  - 2）派生選擇器（直接后代）
  - 3）選擇器分組（各自）
- 4、其他型別選擇器（了解即可）
- - 1）通配符選擇器
  - 2）相鄰兄弟選擇器
  - 3）屬性選擇器
四、CSS文字屬性
- 1、font-family 屬性（字體類別）
- 2、font-size 屬性（文字大小）
- 3、font-variant 屬性（小型大寫字母替換）
- 4、font-style 屬性（文字傾斜）
- 5、font-weight 屬性（文字加粗）
- 6、文字的復合屬性（個人不建議使用）
五、CSS顏色&背景屬性
- 1、color 屬性（元素顏色）
- 2、background-color 屬性（背景顏色）
- 3、background-image 屬性（背景影像）
- 4、background-repeat 屬性（背景重復）
- 5、background-attachment 屬性（背景附件）
- 6、background-position 屬性（背景位置）
- 7、背景影像的復合屬性
- 8、顏色的表示方法
- - 1）英文關鍵字方式
  - 2）RBG顏色值
六、CSS文本屬性
- 1、word-spacing 屬性（單詞間隔）
- 2、letter-spacing 屬性（字符間隔）
- 3、text-decoration 屬性（文字修飾）
- 4、text-align 屬性（水平對齊方式）
- 5、vertical-align 屬性（垂直對齊方式）
- 6、text-transform 屬性（文本轉換）
- 7、text-indent 屬性（文本縮進）
- 8、line-height 屬性（行高）
- 9、white-space 屬性（處理空白）
七、CSS超鏈接偽類
- 1、a:link（正常狀態，未訪問過的鏈接）
- 2、a:visited（用戶已訪問過的鏈接）
- 3、a:hover（滑鼠懸停狀態）
- 4、a:active（滑鼠點擊的那一刻）
- 5、cursor 屬性（滑鼠懸停樣式）
八、CSS盒子模型
- 1、什么是盒子模型
- 2、Content（內容區）
- - 1）width 屬性（寬）& height 屬性（高）
  - 2）overflow 屬性（溢位內容處理）
- 3、Padding（內邊距）
- 4、Border（邊框）
- - 1）單一屬性
  - 2）復合屬性
  - 3）指定樣式屬性的復合屬性
  - 4）border-style 屬性（邊框樣式）
  - 5）border-`xx`-`xx`-radius（邊框弧度）
  - 6）box-shadow: 屬性（邊框陰影）
- 5、Margin（外邊距）
九、CSS控制顯示類
- 1、塊級標簽
- 2、行級標簽
- 3、visibility 屬性（元素訪問性/可見性）
- 4、display 屬性（控制顯示類/顯示）
十、CSS檔案流
- 1、普通流
- 2、浮動流
- 3、定位流
十一、CSS浮動
- 1、什么是浮動
- 2、float 屬性（浮動）
- 3、clear 屬性（清除浮動）
- 4、清除浮動的集中常見做法
- - 1）方法一
  - 2）方法二
  - 3）方法三
十二、CSS定位
- 1、position 屬性（定位方式）
- 2、元素位置屬性（定位偏移量）
- 3、定位的型別
- - 1）相對定位
  - 2）絕對定位
  - 3）固定定位
  - 4）粘性定位
- 4、z-index 屬性（定位層級）
十三、總結

一、CSS簡介

1、什么是CSS

層疊樣式表 (Cascading Style Sheets，簡稱CSS)，

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

樣式定義如何顯示 HTML 元素，美化HTML元素的外觀，例如設定背景顏色和字體等
對網頁內容元素進行布局和定位
實作影片效果以及2D/3D轉換
樣式通常存盤在樣式表中
配合HTML/JS實作特效
對HTML元素進行回應式布局

回應式布局：針對于不同的終端，展示不同的效果；例如手機端/PC端/IPad等

2、CSS組成

1）選擇器

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

2）屬性

針對于指定的內容設定其某種展示效果

3）屬性值

針對于指定的內容設定其某種展示效果的具體某一種

3、注釋

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

二、CSS分類

1、行內樣式表（行內樣式表）

行內樣式表也被稱作行內樣式表，如果需要給某一個元素加樣式，需要在相關的標簽內使用樣式（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>

2、內部樣式表

內部樣式表也被稱作“嵌入式樣式表”，將樣式表的內容單獨定義在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>

3、外部樣式表

外部樣式表也被稱作“外聯樣式表”，將樣式表的內容定義在一個單獨的“.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” ，

4、樣式表的優先級

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

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

<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>

三、CSS選擇器

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

只有內部、外部樣式表涉及到選擇器
選擇器的作用是根據不同的條件指定到不同的元素

1、原生選擇器

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屬性來參考，

2、原生選擇器的優先級

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>

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

強調的是選擇器與選擇器之間的關系，

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
	    <!--Chris2、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>
	<!--Chris1、Chris2顏色都變為綠色-->
    <h1>Chris1</h1>
    <h2>Chris2</h2>
</body>

4、其他型別選擇器（了解即可）

1）通配符選擇器

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

語法格式：*{...}，* 代表所有標簽，所有內容
*
{
/* 樣式表定義內容 */
}
注意：* 可以代表一切

例：u標簽下字體顏色紅色，p標簽下字體綠色，所有字體為方正少兒簡體

<head>
    <style>
        /*  通配符選擇器
            “ * ” 可以代表所有標簽
        */
        *
        {
            font-family: 方正少兒簡體;
        }
        u>*
        {
            color: red;
        }
        p>*
        {
            color: green;
        }
    </style>
</head>
<body>
	<!--Chris1/2/3/4 字體都是方正少兒簡體-->
	<u>
		<!--Chris1、Chris2顏色為紅色-->
	    <em>Chris1</em>
	    <strong>Chris2</strong>
	</u>
	<p>
		<!--Chris3、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>

四、CSS文字屬性

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

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

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

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

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

font-family 屬性可以同時設定一個或者多個字體名稱值，當設定多個字體名稱值的情況下，瀏覽器會從第一個值開始采取，如果不認識這個值則會采取下一個值，直到遇到瀏覽器所識別的有效值為止，

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

font-size 屬性用于設定文字大小，

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

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

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

font-variant 屬性設定小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小，

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

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

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

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

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

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

font-weight 屬性設定文本文字的粗細，

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

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

6、文字的復合屬性（個人不建議使用）

通過設定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如果不寫這兩項，其他的即使寫上了也沒有什么作用，
另外必須嚴格遵守順序

五、CSS顏色&背景屬性

1、color 屬性（元素顏色）

color 屬性指定文本的顏色，

color 屬性值：

關鍵字屬性值（color: red;）
RGB色值表（color: #FFE1FF;）

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

background-color 屬性：用于指定某個元素的背景顏色，在css中使用此屬性不僅可以設定網頁的背景顏色也可以設定文字的背景顏色，

background-color 屬性值：

關鍵字屬性值（background-color: red;）
RGB色值表（background-color: #FFE1FF;）

3、background-image 屬性（背景影像）

background-image屬性：用于設定元素的背景影像，影像可以是絕對路徑或者相對路徑，

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

4、background-repeat 屬性（背景重復）

background-repeat 屬性：用于設定圖片是否平鋪，并且可以設定如何平鋪，

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

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

background-attachment 屬性：可以設定背景影像隨著物件（內容）滾動還是固定不動，

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

6、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	右下位置

7、背景影像的復合屬性

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;
注意：順序不要亂！

8、顏色的表示方法

1）英文關鍵字方式

英文關鍵字方式即使以顏色的英文名稱進行命名，基本上每一種顏色都有英文名稱，可是針對于色彩的明暗和深度細微的內容，顏色名稱無法完全標識，

2）RBG顏色值

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

六、CSS文本屬性

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

經過博主實際測驗，單詞間隔屬性可能僅對于英文內容有所效果，可以增加或減少單詞與單詞之間的空白（空格間距），

默認取值是 normal 也就是正常間隔，也可以設定為長度單位的值，并且可以使用負值

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

此屬性經過博主實際測驗，對于英文和中文都同樣生效，可以增加或減少字符間的空白（字符間距）

同上，也可以使用負值，

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

text-decoration 屬性 定義對于一些文字展示出來的效果，例如下劃線、上劃線、洗掉線等，

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

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

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

text-align 屬性：用于設定文本內容的水平對齊方式，

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

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

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

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

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

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

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

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

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

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

8、line-height 屬性（行高）

line-height 屬性：設定段落中行與行之間的距離，值可以是長度，倍數和百分比，這里我們先暫時只了解長度單位的方式（最常用），

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

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

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

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

七、CSS超鏈接偽類

超鏈接偽類樣式：指的是對于超鏈接的各種狀態進行一定設定，這些狀態大概分為：點擊之前、滑鼠懸浮狀態下、點擊時、點擊之后，我們可以通過超鏈接偽類樣式針對于這些狀態下的超鏈接進行一定的樣式修飾，

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

當一個超鏈接初次展示的時候，這個時候是默認的狀態，還沒有進行過任何的操作，使用選擇器：a:link

2、a:visited（用戶已訪問過的鏈接）

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

3、a:hover（滑鼠懸停狀態）

當你的滑鼠懸浮于超鏈接上方，但是還沒有任何操作的時候，使用選擇器：a:hover

4、a:active（滑鼠點擊的那一刻）

這里說明的是當你的滑鼠按下了超鏈接，但是還沒有抬起來的時候所約束的樣式，使用選擇器：a:active

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

5、cursor 屬性（滑鼠懸停樣式）

設定滑鼠的展示形態，但是需要注意的是，在不同的瀏覽器和不同的作業系統中展示效果會有所不同，但是其展示效果所代表的意義是不變的，

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

八、CSS盒子模型

1、什么是盒子模型

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

Margin（外邊距） - 清除邊框外的區域，外邊距是透明的，
Border（邊框） - 圍繞在內邊距和內容外的邊框，
Padding（內邊距） - 清除內容周圍的區域，內邊距是透明的，
Content（內容區） - 盒子的內容，顯示文本和影像，

2、Content（內容區）

我們只使用圖片標簽來說，如果你想使用圖片標簽，那么必然是想展示一個影像，那么你所展示影像就是內容，而為了所展示具體的內容所占用的一塊區域，我們稱之為內容區，也是我們所能直觀看到的一個部分；可以說內容區是盒子模型中必要的一個部分，

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

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

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

overflow 屬性：如果我們內容區的大小已經無法滿足容納下我們規劃的內容，這個時候我們所展示的內容會擠出到內容區和內邊距以外的空間域以外的空間，這些擠出來的部分，我們稱之為“內容溢位”，而這個屬性是針對于溢位部分的內容進行設定的屬性，

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

3、Padding（內邊距）

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

針對于內邊距調整的有如下的幾個屬性：

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

4、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 屬性：針對于內容的邊框背后產生一定的陰影效果，本身就是一個復合屬性，值的順序如下：

單位為長度，設定橫向（正為右、負為左）的陰影距離，
單位為長度，設定縱向（正為下、負為上）的陰影距離，
單位為長度，設定陰影的虛化程度，
單位為顏色，設定陰影所采取的主顏色，

5、Margin（外邊距）

外邊距位于元素的最外圍，其并不是一條線而是通內邊距一樣是一塊距離，外邊距使得和自制件不必緊湊的拼接在一起，是CSS布局的一個重要手段，設定外邊距的屬性有如下幾項：

屬性	說明
margin-top屬性	設定元素的上方外邊距大小，通常以像素為單位
margin-right屬性	設定元素的右方外邊距大小，通常以像素為單位
margin-bottom屬性	設定元素的下方外邊距大小，通常以像素為單位
margin-left屬性	設定元素的左方外邊距大小，通常以像素為單位
margin復合屬性	這是一個復合屬性，可以同時針對于元素的四周外邊距進行統一的設定，根據其取值個數的不同，所設定的方向有所區別，各個值之間以空格作為分割
	一個值：設定元素上方和下方的外邊距
	兩個值：第一個值設定元素上方和下方的外邊距，第二個值設定的是元素左方和右方的外邊距
	三個值：第一個值設定元素上方的外邊距，第二個值設定的是元素左方和右方的外邊距，第三個值設定的是元素下方的外邊距大小
	四個值：四個值分別對應設定元素的上方、右方、下方、左方的外邊距大小

九、CSS控制顯示類

1、塊級標簽

默認在新的一行上開始，并且直接占據一整行，與內容多少無關，
高度、行高、外邊距、內邊距等都可以自行控制，
寬度默認始終直接占據父容器的寬度，
可以容納其他行內元素或塊級元素，

塊級標簽也被稱為：塊級元素，塊元素等

2、行級標簽

默認情況下與其他元素在同一行上展示，
高、行高、內外邊距一部分可以自行控制，
寬度默認只與內容有關，
只能容納文本或者其他的行內元素，

行級標簽也被稱為：行內元素、行內元素、行級標簽等

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

visibility 屬性：設定是否顯示元素，

屬性值	說明
visible	設定物件可見默認值
hidden	設定物件隱藏不可見，但是占據原有的空間

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

display 屬性：控制元素內容的顯示型別，

屬性值	說明
none	將物件直接隱藏，并且不占據原有空間
inline	將元素指定為行內元素
block	將元素指定為塊元素
inline-block	將元素指定為行內塊元素

你會發現，通過這個控制顯示類的屬性可以將元素的型別進行轉換，

十、CSS檔案流

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

也就是說，如果你不使用某些樣式或者屬性進行人工干預的時候，默認情況下元素的堆疊排列尤其自己的規則和順序，這種規則和順序我們稱之為“默認檔案流”

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

不是所有的元素都占據檔案流的

網頁中絕大多數元素，都有其自己的樣子和展示效果也會默認占據一定的空間，即使這一定的空間可以人工干預，但是也有一些內容是不占用檔案流的，
例如表單中的隱藏域<input type="hidden"/>在頁面上沒有任何的展示效果，

干預

我們也可以使用某些方式干預，使得默認情況下占據檔案流的元素變得不占用檔案流，或者更準確地說脫離了檔案流的約束，
后面我們馬上就要說到的定位屬性就是其中一種，

1、普通流

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

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

2、浮動流

通過設定浮動可以設定內容向指定的方向排列，即元素在浮動的時候所遵從的檔案流，

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

3、定位流

通過定位方式規定元素應該處于的位置，即元素在定位的時候所遵從的檔案流，

十一、CSS浮動

1、什么是浮動

CSS的 float屬性（浮動屬性），可以使得元素向左或者右移動，并且其周圍的元素也會重新排列，通常情況下浮動經常用于影像，但其在布局的程序中也同樣重要，

2、float 屬性（浮動）

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

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

3、clear 屬性（清除浮動）

clear 屬性：清除浮動的屬性，所謂的清除浮動，并不是清除自身的浮動，而是清除因其他元素的浮動導致的對自身的展示效果的影響，

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

4、清除浮動的集中常見做法

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}

十二、CSS定位

1、position 屬性（定位方式）

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

屬性值	說明
static	默認值，如果我們的position的屬性值設定為static，那么我們可以認為這個元素根本沒有定位，
absolute	使用絕對定位，需要同時使用left、right、top、bottom等屬性進行定位，（常用）
fixed	固定定位，當前瀏覽器視窗滾動的時候元素不跟著滾動
relative	采用相對定位，物件不可重疊，（常用）
sticky	粘性定位的元素是基于用戶的滾動位置，在 `position: relative` 與 `position: fixed` 定位之間切換，

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

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

top屬性：auto|長度值|百分比（常用）
right屬性：auto|長度值|百分比
bottom屬性：auto|長度值|百分比
left屬性：auto|長度值|百分比（常用）

注意：auto代表的是采取默認值；長度值包括數字和單位，也可以使用百分比來設定，

3、定位的型別

1）相對定位

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

所相對的是元素原本應該所處的位置
不影響元素本身的特性
不使元素脫離檔案流
如果沒有定義偏移量，對元素本身沒有任何影響，

2）絕對定位

設定為絕對定位的元素框從檔案流完全洗掉，并相對于其包含塊定位，包含塊可能是檔案中的另一個元素或者是初始包含塊，

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

使得元素完全脫離檔案流（可以使用兩個div演示）
使內嵌（說白了就是行級標簽）支持寬高（可以使用行級標簽演示）
塊標簽內容撐開寬度（可以使用塊標簽進行演示）
如果有定位父級，相對于父級發生偏移，如果沒有父級相對于整個視窗進行偏移，(可以結合實際例子演示)
絕對定位通常配合相對定位一同使用，

注意：如果日后你需要使用絕對定位，那么你一定要搞清楚，絕對定位到底是基于什么去進行定位的

3）固定定位

固定定位所指的是將一個元素固定在瀏覽器當前視窗的指定位置，不隨著瀏覽器滾動條的滾動而隨之滾動，也可以通過偏移量對其進行設定，

IE6不支持固定定位方式
使用頻率并不高
始終是針對于整個檔案定位（整個瀏覽器視窗）

4）粘性定位

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

這個特定閾值指的是 top, right, bottom 或 left 之一，換而言之，指定 top, right, bottom 或 left 四個閾值其中之一才可使粘性定位生效，否則其行為與相對定位相同，

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

z-index 屬性：定位層級屬性，放置一個number的值，可以有負數；定位元素默認后者高于前者；

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

十三、總結

本系列博文主要用于博主本人日常的復習，既可以作為筆記保存，又可以隨時翻看進行復盤使用，

也希望在未來的某一刻可以幫得上大家~

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/254114.html

標籤：其他

上一篇：仿360水波評分特效、加速球特效、水波動態加載影片、可改造成圓形進度條，很絲滑！

下一篇：SolidWorks二次開發---獲取配合特征具體資料

Web前端之CSS