1、漸變

（1）什麼是漸變？

“漸變”指的是兩種或多種顏色之間的平滑過渡。

aa——漸變可指定多箇中間顏色值（色標）；

bb——漸變可以用在任何適用背景圖片的地方：線性漸變、徑向漸變、重複漸變。

（2）漸變語法

在CSS3中使用background-image屬性進行設定

取值為：linear-gradient（線性漸變）、radial-gradient（徑變漸變）

repeating-llinear-gradient（重複線性漸變）、repeating-radial-gradient（重複徑向漸變）

注意：

   線性漸變第一個引數表示的是線性方向（to bottom/top/left/right）

   徑向漸變第一個引數是圓點向四周發散，圓點的位置（size-如“100px at left bottom”）

2、設定文字

（1）文字樣式

font-size/font-family/font-weight

（2）文字格式

line-height——設定行高（用法：在設定文字框居中時，height與line-height值相同）

text-decoration——下劃線（值為underline/none）

text-align——文字排列（left/right/center）

text-indent——首行縮排（單位為em，一個em表示縮排的幾個字）

text-shadow——文字陰影（h-shadow v-shadow blur color）

（3）文字溢位屬性

  注意：僅在“overflow:hidden”的情況下，才會有文字溢位的發生。

white-space——空格（nowrap[文字不換行]、normal[正常]）

text-overflow——文字溢位（clip[裁剪]、ellipsis[在隱藏部分之前顯示，值對橫向的溢位有用]）

（4）長單詞換行屬性

word-wrap——單詞換行（normal[正常，長單詞不換行]、break-word[長單詞會換行]）

word-break——控制長單詞的換行方式（break-all[無視單詞，隨意換行]、normal、keep-all[長單詞不換行]）

（5）文字間距

word-spacing——英文單詞與單詞之間的間距

letter-spacing——英文字母與字母的間距+中文漢字與漢字之間的間距

3、表格常用樣式

（1）垂直方向對齊

vertical-align:top/middle/bottom

（2）合併邊框

border-collapse:collapse;

    作用：讓table的雙線邊框合併成單線。

（3）邊框邊距——border-spacing

作用：設定相鄰單元格的邊框間的距離。

注意：僅限於分隔單元格邊框，即border-collapse屬性為separate值的情況下，也稱為邊框分離模式

取值：若為一個值，水平、垂直方向值相同的間距；若為兩個值，第一個水平，第二個垂直。

（3）表格標題位置——caption-side

（4）表格佈局固定或不固定

table-layout（固定：fixed，較為高效；不固定：預設，較為靈活）

案例見github網址：

https://github.com/Itcast-ZhaoXiaoyan/Web-Case-Code/commit/b64e42b033c6f4448de405b12a48e7090a4b99eb

4、定位概述

    定位：定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。

（1）普通流定位（預設定位方式）

對於塊級元素，會出現換行（例如：p、div）；

對於內聯元素，將會在一行從左到右排列水平佈置。

（2）浮動定位

定義：將元素排除在普通流之外，即元素脫離標準文件流

float:left/right

注意：其元素不會超過父元素的內邊緣。

（3）相對定位

（4）絕對定位

5、顯示方式

“一切皆為框”：頁面上所有的元素艘可以顯示為框。

（1）塊級元素——<div>、<h1>、<p>等，一塊內容，即“塊框”

（2）內聯元素/行內元素——<span>、<a>等，一行內容，即“行內框”

除了預設的顯示效果之外，可以使用display屬性來修改元素框的顯示方式，即改變生成的型別。

第一種——display

    display作用：行內元素、塊內元素相互轉換

取值：

a、display:none——表示隱藏元素，元素框徹底消失

（讓框及所有內容就不再顯示，不佔用文件中的空間）

b、display:inline-block——轉換為行內塊(例如針對a標籤)

注意：在低版本IE下，只支援行內元素變成行內塊後，在同一行顯示；

如果是塊元素變成的行內塊在低版本IE下依然會換行。

c、display:block——讓行內元素（比如<a>元素）表現得像塊級元素一樣

d、display:inline——讓塊級元素（比如<p>元素）表現得像內聯元素一樣

第二種——visibility

該屬性規定元素是否可見

a、visibility:visible——預設值，元素可見

b、visibility:hidden——元素不可見，但是依然佔據空間

c、visibility:collapse——用在元素表格時，可刪除一行或一列，且不影響表格的佈局

第三種——opacity

opacity:value

   value規定不透明度，從0.0（完全透明）到1.0（完全不透明）

第四種——vertical-align

設定單元格中的單元格內容的垂直對齊方式

（對於行內塊級元素，如<img>，可設定垂直對齊方式）

注意：定義行內元素的基線相對於該元素所在行的基線的垂直對齊

a、vertical-align:baseline——預設，元素放置在父元素的基線上

b、vertical-align:top——把元素的頂端與行中最高元素的頂端對齊

c、vertical-align:bottom——把元素的頂端與最低元素的頂端對齊

d、vertical-align:middle——把次元素放置在父元素的中部

（注意：若行內元素定義了vertical-align，則可以定義margin-top，並不會影響其他元素）

6、游標

滑鼠樣式cursor:pointer/help/wait/n-resize

(nn上 ne右 ns下 nw左)

案例：https://github.com/Itcast-ZhaoXiaoyan/Web-Case-Code/tree/master/nav