css 5
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、普通流定位
??????????????????????????? 又稱為 文檔流定位
??????????????????????????? 網頁元素默認定位方式
??????????????????????????? 頁面元素
???????????????????????????????????? 塊級元素-從上到下的方式排列
???????????????????????????????????? 行內元素-從左到右的方式排列
???????????????????????????
??????????????????????????? <body>
???????????????????????????????????? <div id="d1">Hello</div>
???????????????????????????????????? <div id="d2">World</div>
???????????????????????????????????? <span>Hello</span>
???????????????????????????????????? <span>World</span>
??????????????????????????? </body>
?????????????????? 4、浮動定位
??????????????????????????? 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
2、顯示
???????? 1、顯示方式
?????????????????? 1、what
??????????????????????????? 每個元素都有自己的顯示方式，顯示方式決定了元素的顯示特點
?????????????????? 2、屬性
??????????????????????????? 屬性：display
?
??????????????????????????? 取值：
???????????????????????????????????? 1、none
?????????????????????????????????????????????? 不顯示元素--隱藏
?????????????????????????????????????????????? 特點：脫離文檔流--不占據頁面空間
???????????????????????????????????? 2、block
?????????????????????????????????????????????? 像塊級元素一樣顯示元素
?????????????????????????????????????????????? 場合：將行內元素變為塊級元素
???????????????????????????????????? 3、inline
?????????????????????????????????????????????? 像行內元素一樣顯示元素
?????????????????????????????????????????????? 注意：不要塊級元素(div/p..)改變成行內元素
???????????????????????????????????? 4、inline-block
?????????????????????????????????????????????? 像行內塊元素一樣顯示元素
?????????????????????????????????????????????? 行內塊：多個元素會在一行內顯示，但是允許修改尺寸
?????????????????????????????????????????????? 場合：將行內元素改變為行內塊，以便修改尺寸
???????? 2、顯示效果
?????????????????? 1、元素可見性
??????????????????????????? 屬性：visibility
??????????????????????????? 取值：
???????????????????????????????????? 1、visible
?????????????????????????????????????????????? 默認值，元素可見
???????????????????????????????????? 2、hidden
?????????????????????????????????????????????? 元素不可見,但依然占據頁面空間
???????????????????????????????????? 3、collapse
?????????????????????????????????????????????? 用在表格元素上，刪除一行或一列時不影響整體表格布局
??????????????????????????? 面試：dispaly:none 與 visibility:hidden之間的區別
???????????????????????????????????? display:none;脫離文檔流,所以不占空間
???????????????????????????????????? visibility:hidden;沒有脫離文檔流，所以元素隱藏，空間保留
?????????????????? 2、透明度
??????????????????????????? 屬性：opacity
??????????????????????????? 取值：0.0(完全透明) ~ 1.0(完全不透明)
?????????????????? 3、垂直對齊
??????????????????????????? 屬性：vertical-align
??????????????????????????? 作用：
???????????????????????????????????? 1、設置td中的內容垂直對齊方式
???????????????????????????????????? 2、設置 img 或 行內塊元素周圍(左右兩邊)的文本 的垂直對齊方式
??????????????????????????? 取值：
???????????????????????????????????? top/middle/bottom
???????????????????????????????????? baseline:默認值，基線對齊
?
???????????????????????????????????? 注意：
?????????????????????????????????????????????? 基線對齊方式，會將圖片擴大3px
???????? 3、光標
?????????????????? 屬性：cursor
?????????????????? 取值：
??????????????????????????? 1、default
??????????????????????????? 2、pointer
???????????????????????????????????? 小手
??????????????????????????? 3、crosshair
???????????????????????????????????? +
??????????????????????????? 4、text
???????????????????????????????????? I
??????????????????????????? 5、wait
???????????????????????????????????? 等待
??????????????????????????? 6、help
???????????????????????????????????? ?
3、列表
???????? 1、列表項標識
?????????????????? 屬性：list-style-type
?????????????????? 取值：
??????????????????????????? 1、none : 無標記
??????????????????????????? 2、disc
??????????????????????????? 3、circle
??????????????????????????? 4、square
??????????????????????????? 5、... ...
???????? 2、列表項圖像
?????????????????? 屬性:list-style-image
?????????????????? 取值:url()
???????? 3、列表項位置
?????????????????? 屬性:list-style-position
?????????????????? 取值：
??????????????????????????? outside : 默認值，標識位于列表項區域之外
??????????????????????????? inside : 標記放在列表項區域之內
???????? 4、列表屬性
?????????????????? 屬性：list-style
?????????????????? 取值：type url position;
?
?????????????????? 常用方式：list-style:none;
?
轉載于:https://www.cnblogs.com/Hale-Proh/p/7199533.html
總結
- 上一篇： 精益项目管理的可行性分析
- 下一篇： Vim技能修炼教程(16) - 浮点数计