-
定位(position)
- relative :控件依舊占據(jù)文檔流位置,但是顯示的效果類似absolute,但是占據(jù)文檔流位置 所以會(huì)影響后面元素的位置记劈。
-
z-index
- 用于position非static的元素上,默認(rèn)是0。
-
clip:rect(top,right,bottom,left)
-
四個(gè)值分別是剪裁出發(fā)點(diǎn)
clip示意圖 - 圖片從中心漸變打開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .donuts{ width: 500px; height: 500px; position: absolute; clip:rect(0 500px 500px 0); background: black; color: white; margin: 100px ; transition: clip linear 2s; } </style> </head> <body> <img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt=""> <img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt=""> <img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt=""> <img class="donuts" src="http://img.hb.aicdn.com/577bb1aed67d6a979b9ba46bf9e8491cb98a4f3f195a0-LPL1qm_fw658" alt=""> <script> setTimeout(function () { var list = document.querySelectorAll(".donuts"); list[0].style.clip = "rect(0 500px 0 0)"; list[1].style.clip = "rect(0 0 500px 0)"; list[2].style.clip = "rect(500px 500px 500px 0)"; list[3].style.clip = "rect(0 500px 500px 500px)"; },2000); </script> </body> </html>結(jié)果
淡出效果 -
-
vertical-align
- display:table-cell(單元格特性)的元素設(shè)置vertical-align:middle可以讓內(nèi)容(包括塊級(jí)元素)垂直居中
- 內(nèi)聯(lián)元素(包括inline-block)設(shè)置vertical-align:middle可以使該元素在行內(nèi)居中對(duì)齊并巍。
- 注意,如果外層容器是塊級(jí)元素如果設(shè)置了高度目木，則需要設(shè)置line-height和高度一樣，如果沒有設(shè)置高度懊渡，lineHeight則和容器內(nèi)元素最高的那個(gè)一樣高刽射，再設(shè)置容器內(nèi)的所有內(nèi)聯(lián)元素的vertical-align:middle就可以使他們都在行里居中對(duì)齊！
圖片解析
沒行高
有行高 -
塊級(jí)元素垂直居中
- 設(shè)置父元素為display:table-cell;然后父元素設(shè)置vertical-align:middle;
-
缺點(diǎn)
多重容器嵌套時(shí)剃执，高寬不能用百分比相對(duì)父級(jí)元素
-
缺點(diǎn)
- 設(shè)置父元素position:relative;子元素為絕對(duì)定位;然后用top:50%;transform:translateY(-50%)設(shè)置定位.
-
缺點(diǎn)
不占常規(guī)流
-
缺點(diǎn)
- 設(shè)置父元素position:relative;子元素為絕對(duì)定位;然后用top:0;bottom:0;margin:auto 0;設(shè)置定位
-
缺點(diǎn)
不占常規(guī)流
一定要設(shè)置子元素高度誓禁，不能讓子元素來撐高度，因?yàn)椴辉O(shè)置高度的話,瀏覽器會(huì)自動(dòng)計(jì)算其高度
-
缺點(diǎn)
- 設(shè)置父元素為display:table-cell;然后父元素設(shè)置vertical-align:middle;
-
塊級(jí)元素水平居中
- margin:0 auto;
塊級(jí)元素絕對(duì)定位(水平肾档、垂直)居中
// !!!父元素首先要設(shè)置非static的定位
position:absolute;left:0;right:0;margin:0 auto;//相對(duì)父元素水平居中
position:absolute;top:0;bottom:0;margin:auto 0;//相對(duì)父元素垂直居中
position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;//相對(duì)父元素水平垂直居中
// 瀏覽器會(huì)自動(dòng)計(jì)算出絕對(duì)定位元素的margin值摹恰。
// 設(shè)置上下、左右為0的情況下如果元素沒有設(shè)置高度或者寬度的話怒见，瀏覽器會(huì)給元素計(jì)算寬高俗慈。
// 如果設(shè)置了高寬并且如果設(shè)置margin:auto的話，瀏覽器則會(huì)自動(dòng)計(jì)算元素的margin值遣耍，如果沒設(shè)置auto,則不計(jì)算margin值闺阱。
-
box-shadow,text-shadow,filter:drop-shadow
- box-shadow比text-shadow多的屬性:外延,inset
- 默認(rèn)第一個(gè)參數(shù)是右邊陰影，第二個(gè)是西邊陰影配阵，負(fù)數(shù)相反
- drop-shadow參數(shù)和text-shadow是一樣的,它的作用把顯示出來的形狀投影馏颂，所以是可以投影不規(guī)則圖形。
[圖片上傳失敗...(image-a60deb-1514149374837)]
-
float圖文混排
- 圖片浮動(dòng),文字不浮動(dòng)棋傍，就會(huì)出現(xiàn)圖文混排的效果救拉。
[圖片上傳失敗...(image-4e0135-1514149374837)] - 注意,文字默認(rèn)的word-wrap是會(huì)撐開容器的，所以要設(shè)置該屬性為break-word,遇到邊框就會(huì)進(jìn)行換行瘫拣。
- 容器內(nèi)部元素如果浮動(dòng)的話亿絮，容器就不會(huì)被撐開，可以使用overflow:hidden麸拄，強(qiáng)行讓容器計(jì)算高度派昧，或者在浮動(dòng)下方添加一個(gè)元素設(shè)置clear:both。清除當(dāng)前行的浮動(dòng)
- 圖片浮動(dòng),文字不浮動(dòng)棋傍，就會(huì)出現(xiàn)圖文混排的效果救拉。
-
background-position
- 表示圖片從哪個(gè)點(diǎn)顯示拢切，默認(rèn)是從左上角頂點(diǎn)開始顯示
- 傳兩個(gè)數(shù)值蒂萎，xx xx代表left xx top xx(距離左邊和上邊距離)然后定位到一個(gè)點(diǎn)，圖片會(huì)從這個(gè)點(diǎn)開始顯示下去
- 傳四個(gè)值則,right xx bottom xx可以自己設(shè)置頂點(diǎn)位置淮椰，但是兼容性不好五慈。
-
background-attachment
- fixed表示背景以瀏覽器作為參照物固定,上下滾動(dòng)內(nèi)容圖片不跟隨滾動(dòng)
- 默認(rèn)值是scroll 表示上下滾動(dòng)時(shí)，背景隨之滾動(dòng)
-
background-clip
- 默認(rèn)是border-box 表示背景從邊框開始往外剪裁
- content-box 表示背景從內(nèi)容開始往外剪(剪掉內(nèi)外邊距)
- padding-box 表示從內(nèi)邊距開始剪裁
-
white-space
- normal
遇到邊框不換行合并空格 不合并換行 - pre
遇到邊框不換行不合并空格 - nowrap
遇到邊框不換行合并空格和換行 強(qiáng)制在一行內(nèi)把所以內(nèi)聯(lián)內(nèi)容顯示完主穗。 - pre-wrap
遇到邊框換行不合并空格 - pre-line
遇到邊框換行合并空格 不合并換行
- normal
-
選擇器
- E~F 會(huì)命中E下面的所有F兄弟節(jié)點(diǎn)
- E+F 只會(huì)命中在E的下一個(gè)兄弟節(jié)點(diǎn)F
-
text-overflow (文字超出時(shí)的顯示狀態(tài))
- 必須和white-space,overflow一起使用
- clip 默認(rèn) 隱藏超出文字部分
- ellipsis 超出文字部分用省略號(hào)代替
- 必須和white-space,overflow一起使用
-
zoom
- 按數(shù)值比例縮放元素
-
cursor
- 鼠標(biāo)移動(dòng)到元素時(shí)的狀態(tài)
-
box-sizing 盒模型的高寬屬性組成模式
- content-box ”高寬屬性“僅為內(nèi)容高寬泻拦，不包括內(nèi)邊距邊框
- border-box “高寬屬性”包括內(nèi)邊距和邊框的寬度
-
transform-origin 形變作用點(diǎn)
- 默認(rèn)center center 中心點(diǎn)
- 可以任意調(diào)兩個(gè)方向作為形變轉(zhuǎn)換點(diǎn) 例:left bottom
-
transform
- rotate(xxdeg)繞著Z軸旋轉(zhuǎn) = rotateZ()
- rotateX(xxdeg)繞著X軸
- rotateY(xxdeg)繞著Y軸
-
perspective 透視距離
- 給父元素設(shè)置透視距離后，子元素的形變動(dòng)畫會(huì)變成3d的
-
媒體查詢
- 設(shè)置某個(gè)條件狀態(tài)下元素的狀態(tài)
@media all and (min-width: 200px) and (max-width: 2500px){ .f{ background: gold; } } -
設(shè)置容器背景等比例縮放
-
圣杯布局等各種布局
