1、漸變
1、線性漸變
background-image:linear-gradient(angle,color-point,color-point);
ex:background-image:linear-gradient(to bottom,#f9f9f9,#cdcdcd);
2、徑向漸變
background-image:radial-gradient([size at position],color-point,…);
3、重複漸變
屬性：background-image
取值：repeating-linear-gradient()
repeating-radial-gradient()
4、瀏覽器相容性
瀏覽器字首：
firefox ：-moz-
chrome&safari:-webkit-
opera:-o-
ie : -ms-
1、如果瀏覽器不支援屬性的話，那麼將字首新增在屬性名稱前
animation:值;
-webkit-animation:值;
-moz-animation:值;
-o-animation:值;
-ms-animation:值;
2、如果瀏覽器不支援值得話，那麼將字首新增在值前面
background-image:-webkit-linear-gradient();
2、文字格式化
1、字型屬性
font-family
font-size
font-style
font-weight
font-variant
font:style variant weight size family;
2、文字屬性
color
text-align:left/center/right;
text-decoration:none/underline/overline/line-through
line-height
text-indent
text-shadow:h v blur color;
3、**
1、**特有屬性
1、邊框合併
屬性：border-collapse
取值：1、separate ：分離邊框，預設值
2、collapse : 合併邊框
2、邊框邊距
屬性：border-spacing
取值：1個值：水平垂直間距相等
2個值：
第1個值表示水平間距
第2個值表示垂直間距
3、標題位置
屬性：caption-side
取值：1、top:預設值
2、bottom
4、顯示規則
屬性：table-layout
取值：1、auto
自動**布局
由內容來決定單元格大小
傳統**布局
速度較慢
2、fixed
固定**布局
由設定的值來決定單元格大小
載入速度較快，不夠靈活
1、浮動(重難點)
2、顯示
3、列表
4、定位(重難點)
1、浮動
1、定位
1、什麼是定位
元素該出現在網頁的哪個位置處
2、定位方式
1、普通流定位
2、浮動定位
3、相對定位
4、絕對定位
5、固定定位
3、普通流定位
又稱為 文件流定位
網頁元素預設定位方式
頁面元素
塊級元素-從上到下的方式排列
行內元素-從左到右的方式排列
"d1">hello
"d2">world
hello
world
1、什麼是浮動定位
如果將元素的定位方式設定為浮動定位的話，那麼它將具備以下特徵
1、浮動元素 會被排除在文件流之外-脫離文件流，不佔據頁面空間，其他未浮動元素要上前補位
2、浮動元素會停靠在父元素的左邊或右邊，或平級的其他已浮動元素的邊緣上
3、浮動元素依然位於包含框之內
4、浮動定位解決的問題-讓多個塊級元素在一行內顯示
2、屬性
屬性：float
取值：1、none
預設值，無浮動定位
2、left
左浮動，讓元素停靠在父元素的左邊，或緊挨著左側已有的浮動元素
3、right
右浮動，讓元素停靠在父元素的右邊，或緊挨著右側已有的浮動元素
5、浮動引發的特殊效果
1、當父元素的寬度已顯示不下所有的已浮動子元素時，那麼最後乙個子元素將換行顯示
2、元素一旦浮動起來之後，元素的寬度將變成自適應(內容決定寬度)，前提：不指定元素寬度的情況下
3、元素一旦浮動起來之後，都將變成塊級元素，尤其對行內元素影響較大
塊級元素：允許修改尺寸
行內元素：不允許修改尺寸
4、文字，行內元素，行內塊元素時採用環繞的方式來排列的，是不會被浮動元素壓在底下的。
6、清除浮動影響
屬性：clear
取值：1、none
預設值，不做任何清除操作
2、left
清除該元素左邊(上邊)的浮動元素所帶來的影響
3、right
清除該元素右邊的浮動元素所帶來的影響
4、both
清除該元素兩邊的浮動元素所帶來的影響
7、浮動元素對父元素所帶來的影響
由於浮動元素脫離文件流，所以不佔據父元素空間。如果乙個元素中所有的子元素全部都浮動了的話，那麼該元素的高度將變成0
解決方案：
1、直接設定父元素高度
弊端：必須要知道父元素高度是多少
2、設定父元素也浮動
弊端：對後續元素會帶來位置的影響
3、為父元素設定 overflow 屬性
取值：hidden 或 auto
弊端：如果有內容要以溢位的方式顯示的話，也一同被隱藏了。
4、在父元素中，追加空子級塊級元素，並設定其clear屬性值為 both.
CSS中的漸變
兩種或多種顏色間平滑過渡的效果 色標 決定了漸變的每種顏色及其出現的位置 每一種漸變效果都是由多個色標組成的 2個及以上 1.語法 屬性 background image 值 linear gradient 線性漸變 radial gradient 徑向漸變 repeating linear gra...
CSS中浮動與清除float浮動
浮動語法 float none left right float 定義網頁中其它文字如何環繞該元素顯示 浮動的目的 就是讓豎著的東西橫著來 橫向排列元素 有三個取值 left 元素活動浮動在文字左面 right 元素浮動在右面 none 預設值，不浮動。清除浮動clear left right bo...
css的過渡與漸變
漸變 一 線性漸變 從乙個方向到另乙個方向的顏色的變化。標準模式的語法 不新增瀏覽器字首 background linear gradient direction,color stop1,color stop2,說明 direction 預設為to bottom，即從上向下的漸變 stop 顏色的分...