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、顯示規(guī)則
??????????????????????????? 屬性：table-layout
??????????????????????????? 取值：
???????????????????????????????????? 1、auto
?????????????????????????????????????????????? 自動表格布局
?????????????????????????????????????????????? 由內(nèi)容來決定單元格大小
?????????????????????????????????????????????? 傳統(tǒng)表格布局
?????????????????????????????????????????????? 速度較慢
???????????????????????????????????? 2、fixed
?????????????????????????????????????????????? 固定表格布局
?????????????????????????????????????????????? 由設(shè)定的值來決定單元格大小
?????????????????????????????????????????????? 加載速度較快，不夠靈活
*****************************
1、浮動(重難點)
2、顯示
3、列表
4、定位(重難點)
*****************************
1、浮動
???????? 1、定位
?????????????????? 1、什么是定位
??????????????????????????? 元素該出現(xiàn)在網(wǎng)頁的哪個位置處
?????????????????? 2、定位方式
??????????????????????????? 1、普通流定位
??????????????????????????? 2、浮動定位
??????????????????????????? 3、相對定位
??????????????????????????? 4、絕對定位
??????????????????????????? 5、固定定位
?????????????????? 3、普通流定位
??????????????????????????? 又稱為 文檔流定位
??????????????????????????? 網(wǎng)頁元素默認定位方式
??????????????????????????? 頁面元素
???????????????????????????????????? 塊級元素-從上到下的方式排列
???????????????????????????????????? 行內(nèi)元素-從左到右的方式排列
???????????????????????????
??????????????????????????? <body>
???????????????????????????????????? <div id="d1">Hello</div>
???????????????????????????????????? <div id="d2">World</div>
???????????????????????????????????? <span>Hello</span>
???????????????????????????????????? <span>World</span>
??????????????????????????? </body>
?????????????????? 4、浮動定位
??????????????????????????? 1、什么是浮動定位
???????????????????????????????????? 如果將元素的定位方式設(shè)定為浮動定位的話，那么它將具備以下特征
???????????????????????????????????? 1、浮動元素 會被排除在文檔流之外-脫離文檔流，不占據(jù)頁面空間，其他未浮動元素要上前補位
???????????????????????????????????? 2、浮動元素會停靠在父元素的左邊或右邊，或平級的其他已浮動元素的邊緣上
???????????????????????????????????? 3、浮動元素依然位于包含框之內(nèi)
???????????????????????????????????? 4、浮動定位解決的問題-讓多個塊級元素在一行內(nèi)顯示
??????????????????????????? 2、屬性
???????????????????????????????????? 屬性：float
???????????????????????????????????? 取值：
?????????????????????????????????????????????? 1、none
??????????????????????????????????????????????????????? 默認值，無浮動定位
?????????????????????????????????????????????? 2、left
??????????????????????????????????????????????????????? 左浮動，讓元素停靠在父元素的左邊，或緊挨著左側(cè)已有的浮動元素
?????????????????????????????????????????????? 3、right
??????????????????????????????????????????????????????? 右浮動，讓元素停靠在父元素的右邊，或緊挨著右側(cè)已有的浮動元素
?????????????????? 5、浮動引發(fā)的特殊效果
??????????????????????????? 1、當父元素的寬度已顯示不下所有的已浮動子元素時，那么最后一個子元素將換行顯示
??????????????????????????? 2、元素一旦浮動起來之后，元素的寬度將變成自適應(內(nèi)容決定寬度)，前提：不指定元素寬度的情況下
??????????????????????????? 3、元素一旦浮動起來之后，都將變成塊級元素，尤其對行內(nèi)元素影響較大
???????????????????????????????????? 塊級元素：允許修改尺寸
???????????????????????????????????? 行內(nèi)元素：不允許修改尺寸
??????????????????????????? 4、文本，行內(nèi)元素，行內(nèi)塊元素時采用環(huán)繞的方式來排列的，是不會被浮動元素壓在底下的。
?????????????????? 6、清除浮動影響
??????????????????????????? 屬性：clear
??????????????????????????? 取值：
???????????????????????????????????? 1、none
?????????????????????????????????????????????? 默認值，不做任何清除操作
???????????????????????????????????? 2、left
?????????????????????????????????????????????? 清除該元素左邊(上邊)的浮動元素所帶來的影響
???????????????????????????????????? 3、right
?????????????????????????????????????????????? 清除該元素右邊的浮動元素所帶來的影響
???????????????????????????????????? 4、both
?????????????????????????????????????????????? 清除該元素兩邊的浮動元素所帶來的影響
?????????????????? 7、浮動元素對父元素所帶來的影響
??????????????????????????? 由于浮動元素脫離文檔流，所以不占據(jù)父元素空間。如果一個元素中所有的子元素全部都浮動了的話，那么該元素的高度將變成0
??????????????????????????? 解決方案：
??????????????????????????? 1、直接設(shè)置父元素高度
???????????????????????????????????? 弊端：必須要知道父元素高度是多少
??????????????????????????? 2、設(shè)置父元素也浮動
???????????????????????????????????? 弊端：對后續(xù)元素會帶來位置的影響
??????????????????????????? 3、為父元素設(shè)置 overflow 屬性
???????????????????????????????????? 取值：hidden 或 auto
???????????????????????????????????? 弊端：如果有內(nèi)容要以溢出的方式顯示的話，也一同被隱藏了。
??????????????????????????? 4、在父元素中，追加空子級塊級元素，并設(shè)置其clear屬性值為 both
2、顯示
???????? 1、顯示方式
?????????????????? 1、what
??????????????????????????? 每個元素都有自己的顯示方式，顯示方式?jīng)Q定了元素的顯示特點
?????????????????? 2、屬性
??????????????????????????? 屬性：display
?
??????????????????????????? 取值：
???????????????????????????????????? 1、none
?????????????????????????????????????????????? 不顯示元素--隱藏
?????????????????????????????????????????????? 特點：脫離文檔流--不占據(jù)頁面空間
???????????????????????????????????? 2、block
?????????????????????????????????????????????? 像塊級元素一樣顯示元素
?????????????????????????????????????????????? 場合：將行內(nèi)元素變?yōu)閴K級元素
???????????????????????????????????? 3、inline
?????????????????????????????????????????????? 像行內(nèi)元素一樣顯示元素
?????????????????????????????????????????????? 注意：不要塊級元素(div/p..)改變成行內(nèi)元素
???????????????????????????????????? 4、inline-block
?????????????????????????????????????????????? 像行內(nèi)塊元素一樣顯示元素
?????????????????????????????????????????????? 行內(nèi)塊：多個元素會在一行內(nèi)顯示，但是允許修改尺寸
?????????????????????????????????????????????? 場合：將行內(nèi)元素改變?yōu)樾袃?nèi)塊，以便修改尺寸
???????? 2、顯示效果
?????????????????? 1、元素可見性
??????????????????????????? 屬性：visibility
??????????????????????????? 取值：
???????????????????????????????????? 1、visible
?????????????????????????????????????????????? 默認值，元素可見
???????????????????????????????????? 2、hidden
?????????????????????????????????????????????? 元素不可見,但依然占據(jù)頁面空間
???????????????????????????????????? 3、collapse
?????????????????????????????????????????????? 用在表格元素上，刪除一行或一列時不影響整體表格布局
??????????????????????????? 面試：dispaly:none 與 visibility:hidden之間的區(qū)別
???????????????????????????????????? display:none;脫離文檔流,所以不占空間
???????????????????????????????????? visibility:hidden;沒有脫離文檔流，所以元素隱藏，空間保留
?????????????????? 2、透明度
??????????????????????????? 屬性：opacity
??????????????????????????? 取值：0.0(完全透明) ~ 1.0(完全不透明)
?????????????????? 3、垂直對齊
??????????????????????????? 屬性：vertical-align
??????????????????????????? 作用：
???????????????????????????????????? 1、設(shè)置td中的內(nèi)容垂直對齊方式
???????????????????????????????????? 2、設(shè)置 img 或 行內(nèi)塊元素周圍(左右兩邊)的文本 的垂直對齊方式
??????????????????????????? 取值：
???????????????????????????????????? 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 : 默認值，標識位于列表項區(qū)域之外
??????????????????????????? inside : 標記放在列表項區(qū)域之內(nèi)
???????? 4、列表屬性
?????????????????? 屬性：list-style
?????????????????? 取值：type url position;
?
?????????????????? 常用方式：list-style:none;
?
轉(zhuǎn)載于:https://www.cnblogs.com/Hale-Proh/p/7199533.html
總結(jié)
- 上一篇： 精益项目管理的可行性分析
- 下一篇： AliSQL 20170716版本发布