CSS漸變、文本、表格、浮動

1.漸變

1.漸變指的是多種顏色平緩變化的一種顯示效果

2.主要因素：色標（一種顏色 及其 出現的位置），一個漸變是由多個色標組成(至少兩個)

三、漸變分類

（1）線性漸變：以直線的方向來填充漸變色

（2）徑向漸變：以圓形的方式實現的填充效果

（3）重複漸變：將線性漸變 或 徑向漸變 重複幾回實現出來

4.線性漸變

屬性：background-image

取值：linear-gradient(angle,color-point1,color-point2,...);

（1）angle

表示漸變填充的方向或角度

取值：

  關鍵字： to top / right / bottom / left  從下向上 / 左向右 / 上向下 / 右向左 填充漸變色  

  角度值：

  0deg：從下向上填充漸變色等同於 to top

  90deg：從左向右填充漸變色等同於 to right

  180deg：從上向下填充漸變色等同於 to bottom

  270deg：從右向左填充漸變色等用於 to left

線性漸變角度值：

（2）color-point

表示漸變裏各個顏色出現的位置

取值：顏色以及位置的組合，中間用空格隔開

一、red 0%
	在填充方向的開始位置處顏色爲 紅色
二、green 50%
	到填充方向一半的位置處，顏色變爲綠色
三、blue 200px
	到填充方向的200px的位置處，顏色變爲藍色

//從下向上，顏色由紅色向綠色漸變
background:linear-gradient(to top,red 0%,green 100%);
//從左下角開始，顏色由紅色到綠色漸變，到50px的位置處變爲綠色，並開始由綠色到藍色漸變
background:linear-gradient(45deg,red 0px,green 50px,blue 100%);

5.瀏覽器兼容性

各瀏覽器的新版本都支持漸變屬性
對於不支持的瀏覽器版本，能夠經過增長瀏覽器前綴的方式，讓瀏覽器支持漸變

   Firefox : -moz-

  Chrome & Safari : -webkit-

  Opera : -o-

  IE : -ms-

#container .btn-submit{
	background:linear-gradient(0deg,red,blue);

	background:-moz-linear-gradient(0deg,red,blue);

	background:-webkit-linear-gradient(0deg,red,blue);

	background:-o-linear-gradient(0deg,red,blue);

	background:-ms-linear-gradient(0deg,red,blue);
}

二、文本格式化屬性

1.字體屬性

（1）指定字體

屬性：font-family

取值：用  , 隔開的字體名稱列表

font-family:"微軟雅黑",Arial;
font-family:"microsoft yahei",Arial,"simhei","宋體"

（2）字體大小

屬性：font-size

取值：以 px 或 pt 爲單位的數字

（3）字體加粗

屬性：font-weight

取值：

一、bold ：加粗
二、normal ：正常
三、value 
	無單位的數字
	等同於 normal
	等同於 bold

//介於正常體與粗體之間
font-weight:700;

（4）字體樣式

屬性：font-style

取值：

    normal：正常顯示

    italic：斜體顯示

（5）小型大寫字母

將小寫字符變爲大寫，但大小與小寫字符一致

屬性：font-variant

取值： 

    normal：正常

    small-caps：小型大寫字符

（6）字體屬性

簡寫方式

屬性：font

取值：style variant weight size family ;

注意：使用簡寫屬性時，必需要設置family的值，不然無效

2.文本屬性

（1）文本顏色

屬性：color

（2）文本排列

做用：指定文本、行內、行內塊元素的水平對齊方式

屬性：text-align

取值：left / center / right / justify（兩端對齊）

（3）文字修飾

屬性：text-decoration

取值：

一、none : 無任何的線條修飾
二、underline : 下劃線修飾
三、line-through : 刪除線
四、overline : 上劃線

（4）行高

做用：一行數據所佔高度

屬性：line-height

取值：以 px 爲單位的數值

注意：若是行高設置的比文字的高度高的話，該行文本將在指定行高範圍內垂直居中顯示

line-height:30px;
//行高是font-size的1.5倍
line-height:1.5;

（5）首行文本縮進

屬性：text-indent

取值：以 px 爲單位的數值

（6）文本陰影

屬性：text-shadow

取值：h-shadow  v-shaow  blur  color

3.表格

1.表格的經常使用屬性

（1）邊距屬性：padding

（2）邊框屬性：border

（3）尺寸屬性：width ， height

（4）文本格式化屬性：font-* ， text-* ， line-height

（5）背景屬性：顏色，圖片，漸變

（6）vertical-align

  做用：指定單元格數據的垂直對齊方式

  取值：

一、top ：上對齊
二、middle ：居中對齊
三、bottom ：下對齊

2.表格的特用屬性

（1）邊框合併

  屬性：border-collapse

  取值：

一、separate  默認值，即分離邊框模式
二、collapse  邊框合併

（2）邊框邊距

  做用：設置單元格之間或單元格與表格之間的距離

  屬性：border-spacing

  取值：

一、給定一個值 ：水平和垂直的間距相同
二、給定兩個值 ：
	第一個值 表示的是水平間距
	第二個值 表示的是垂直間距

　注意：只有在分離邊框模式下，邊框邊距纔有效

（3）標題位置

  屬性：caption-side

  取值：

top ：默認值，標題在表格內容之上
bottom ：標題在表格內容之下

（4）顯示規則

  做用：用來幫助瀏覽器指定如何佈局一張表，也就是指定 td 尺寸的計算方式

  屬性：table-layout

  取值：

一、auto
	默認值，即自動錶格佈局，列的尺寸其實是由內容來決定的
二、fixed
	固定表格佈局，列的尺寸由設定的值爲準的

 4.浮動定位

1.語法

屬性：float

取值：

一、none
	默認值，即無任何浮動效果
二、left
	左浮動，讓元素停靠在父元素的左邊，或挨着左側已有的浮動元素
三、right
	右浮動，讓元素停靠在父元素的右邊，或挨着右側已有的浮動元素

2.浮動引起的特殊效果

（1）當父元素顯示不下全部已浮動子元素時，最後一個將換行，可是，有可能被卡住

（2）元素一旦浮動起來後，寬度將之內容爲主(未指定寬度狀況下)

（3）元素一旦浮動起來後，將變爲塊級元素；容許修改尺寸，能正常處理垂直方向外邊距

（4）文本，行內元素，行內塊元素是採用環繞的方式來排列的，是不會被浮動元素壓在底下的，而會巧妙的避開浮動元素

3.清除浮動所帶來的影響

元素一旦浮動起來以後，就會對後續的元素帶來必定的位置影響(後續元素要上前佔位)，若是後續元素不想被影響的話(不想佔位)，那麼就能夠經過清除浮動的方式來解決

屬性：clear

取值：

一、none
	默認值，不作任何的清除浮動操做
二、left
	清除當前元素前面元素左浮動所帶來的影響
三、right
	清除當前元素前面元素右浮動所帶來的影響
四、both
	清除當前元素前面元素任何一種浮動所帶來的影響