字體屬性
粗細(xì)font-weight
設(shè)置文字是否加粗顯示 慨畸。 有兩種類型 :?jiǎn)卧~類型莱坎、數(shù)字類型
單詞類型 | 屬性值 | 說(shuō)明
| normal | 默認(rèn)值,定義批準(zhǔn)的字體
| bold | 定義粗體字符 寸士,b strong標(biāo)簽 的默認(rèn)值
| bolder | 定義更粗的字體
| ligher | 定義更細(xì)的字體
數(shù)字類型 100-900之間的整百數(shù)字檐什。數(shù)字越大文字顯示越粗。 400==normal 700==bold
字體風(fēng)格font-style
設(shè)置字體是否斜體顯示弱卡。
| 屬性值 | 說(shuō)明
|normal | 設(shè)置正規(guī)的字體 乃正, 大多是標(biāo)簽的默認(rèn)值
| italic | 設(shè)置斜體的文字 ,主要針對(duì)英文婶博,要求英文以字體中的斜體樣式顯示
| oblique | 設(shè)置斜體的文字 瓮具, 只是將文字傾斜顯示 , 與字體無(wú)關(guān)
**行高 line-height **
設(shè)置的是一行文字實(shí)際占有的高度凡人,文字字號(hào)在行高中是垂直居中的名党。
| px 像素值 | 設(shè)置的行高的具體像素值
| 百分比數(shù)值 | 設(shè)置的本身字號(hào)像素值的百分比
字體綜合font
1.字號(hào) 、 字體
2.字號(hào) /行高 挠轴、字體 重點(diǎn)是字號(hào)和行高之間使用 /
3.加粗和斜 體兩個(gè)值之間可以互 換位置 传睹、 字號(hào)、行高忠荞、字體不能更改位置蒋歌。
文字屬性
水平對(duì)齊text-align
設(shè)置文本水平方向的對(duì)齊
| 屬性名 | 作用 |
| left | 居中對(duì)齊帅掘,大部分標(biāo)簽的默認(rèn)值
| center | 居中對(duì)齊
| right | 居右對(duì)齊
文本修飾 text-decoration
設(shè)置文本整體是否有線條的修飾效果
| 屬性名 | 作用 |
| none | 沒(méi)有修飾, 大部分標(biāo)簽的默認(rèn)值
| overline | 上劃線
| line-through | 中劃線堂油,刪除線<del> 標(biāo)簽的默認(rèn)值
| underline | 下劃線修档,<a>標(biāo)簽的默認(rèn)值
**縮進(jìn) text-indent **
設(shè)置段落首行是否進(jìn)行縮進(jìn)
| px 單位 | 表示首行縮進(jìn)多少像素
| em單位 | 首行縮進(jìn)幾個(gè)中文字符的位置
| 百分比 | 表示縮進(jìn)文字所在標(biāo)簽的父級(jí)標(biāo)簽width 屬性值的百分比
盒模型屬性
書寫元素內(nèi)容區(qū)域 width+height
盒子可以實(shí)體化的區(qū)域 width + height + padding + border
盒子實(shí)際占位的位置 width + height + padding + border + margin
寬度width 高度height
設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度
| auto | 默認(rèn)值,瀏覽器可計(jì)算出實(shí)際的寬度
| px | 像素值定義的寬度
| % | 定義參考父元素寬度width 的百分比寬度
內(nèi)邊距padding 府框、 外邊距margin
內(nèi)邊距padding:設(shè)置的是元素的邊框內(nèi)部到寬高區(qū)域之間的距離吱窝。
外邊距margin: 設(shè)置的是盒子與盒子之間的距離。
四值法 上右下左 padding : 10px 20px 30px 40px;
三值法 上 左右 下
二值法 上下 左右
單值法 四個(gè)值相同
邊框border
設(shè)置的是內(nèi)邊距外面的邊界區(qū)域 作為盒子的實(shí)體化的最外層
border :“寬度 線 顏色 “
border-style | 屬性值 | 說(shuō)明
| none | 定義無(wú)邊框
| solid | 定義實(shí)線
| dashed | 定義虛線 在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線
| dotted | 定義點(diǎn)狀邊框迫靖,在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線
| double | 定義為雙線院峡,雙線的邊框的寬度等于 border-width的值
| groove | 定義3D凹槽邊框,其效果取決于border-color 的值
| ridge | 定義3D壟裝邊框系宜,其效果區(qū)域于border-color 的值
| inset | 定義3D內(nèi)容凹陷效果照激,其效果取決于border-color 的值
| outset | 定義3D內(nèi)容凸出效果,其效果取決于border-coloe 的值
盒模型屬性
清除默認(rèn)樣式
1.大部分容器標(biāo)簽都有默認(rèn)邊距盹牧,要么用標(biāo)簽選擇器的并集方式俩垃,要么通配符清除。
2.<ul>和<li>兩種列表有默認(rèn)的列表前綴汰寓,清除list-style屬性
3.<a>標(biāo)簽的默認(rèn)樣式口柳,順帶設(shè)置頁(yè)面中常用的a的公共樣式:color和text-decorstion
4.清除默認(rèn)加粗效果:設(shè)置font-weight
height應(yīng)用
根據(jù)不同的需求,高度屬性可以設(shè)置也可以不設(shè)置有滑。
如果設(shè)置了高度跃闹,盒子占有的高度位置就確定了,后面的同級(jí)元素就會(huì)緊挨著加載毛好。
如果不設(shè)置高度望艺,會(huì)根據(jù)標(biāo)簽內(nèi)容高度自動(dòng)撐開(kāi)。
以<div>標(biāo)簽為例睛榄,根據(jù)情況不同選中是否設(shè)置高度荣茫。
overflow屬性
設(shè)置了高度的盒子想帅,如果內(nèi)部元素的加載高度超過(guò)了父級(jí)场靴,會(huì)出現(xiàn)溢出效果。
| visible | 默認(rèn)值港准,可見(jiàn)的可視的旨剥,一處部分顯示的 |
| hidden | 溢出部分直接隱藏,隱藏超過(guò)邊框范圍的內(nèi)容 |
| scroll | 溢出的部分出現(xiàn)滾動(dòng)條浅缸,可以拖動(dòng)滾動(dòng)條看到溢出部分轨帜,多出盒子高度的部分不顯示,不論有 沒(méi)有溢出衩椒,水平和垂直方向都會(huì)出現(xiàn)滾動(dòng)條
| auto | 自動(dòng)的蚌父,如果沒(méi)有溢出就正常顯示哮兰。如果有溢出,溢出的方向自動(dòng)出現(xiàn)滾動(dòng)條
文本居中
文本水平居中 text-align 垂直居中 line-height
元素水平居中 margin:0 auto苟弛; 垂直居中 給父級(jí)元素設(shè)置相同的上下邊距
父子盒模型
父元素的width >= 所有子元素width + padding + border + margin
margin塌陷現(xiàn)象
margin塌陷現(xiàn)象:在垂直方向如果有兩個(gè)元素的外邊距有相遇的喝滞,瀏覽器中加載的 真正的外邊距不是兩個(gè)間距的加和,而是兩個(gè)邊距中值較大的膏秫,邊距值小的塌陷到 了邊距值大的值內(nèi)部
同級(jí)元素塌陷: 大的margin吃掉小的
父子元素塌陷 :
解決margin塌陷問(wèn)題的方法
1.同級(jí)元素:如果兩個(gè)元素垂直方向有間距右遭,只需要設(shè)置給一個(gè)元素,不要進(jìn)行拆分缤削。
2.父子元素:讓兩個(gè)邊距不要相遇,中間可以使用父元素border或padding 將邊距分隔開(kāi)哨鸭;更加常用的方法,父子盒子模型之間的距離就不要用兒子的margin去踹出來(lái),而是父級(jí)的padding擠出來(lái)兼贡;
另外注意:水平方向的margin沒(méi)有塌陷效果
標(biāo)準(zhǔn)文檔流
標(biāo)準(zhǔn)文檔流:指得是元素排版布局過(guò)程中,元素會(huì)默認(rèn)自動(dòng)從左往右拥诡,從上往下的流式排版方式颈畸。前面內(nèi)容發(fā)生了變化,后面的內(nèi)容位置也會(huì)隨著發(fā)生變化
微觀現(xiàn)象
1.空白折疊現(xiàn)象眯娱。
2.文字類的元素如果排在一行會(huì)出現(xiàn)一種高低不齊礁苗、底邊對(duì)齊效果。
3.自動(dòng)換行徙缴,元素內(nèi)一行內(nèi)容寫滿元素的width時(shí)會(huì)自動(dòng)進(jìn)行換行试伙。[圖片上傳失敗...(image-5327c1-1604048626452)]
元素等級(jí)
塊級(jí)元素:大部分容器級(jí)標(biāo)簽包括p標(biāo)簽都是塊級(jí)元素,比如div,h1-h6,p,pre,ul,ol,li,form,table,label
行內(nèi)元素:大部分的文本及標(biāo)簽比如 a,span于样,i(斜體),em(強(qiáng)調(diào)),sub(下標(biāo))疏叨,sup(上標(biāo)) 等。
行內(nèi)塊元素: (img穿剖,button,input蚤蔓,textarea,select), img等
顯示模式display
display 屬性更改的顯示模式并沒(méi)有改變標(biāo)準(zhǔn)流本質(zhì)性質(zhì)
| 屬性值 | 作用
| block | 表示元素要以塊級(jí)元素模式加載,具備塊級(jí)特點(diǎn)
| inline | 表示元素要以行內(nèi)元素模式加載糊余,具備行內(nèi)特點(diǎn)
|inline-block| 表示標(biāo)簽及行內(nèi)塊模式加載秀又,具備行內(nèi)塊特點(diǎn)
| none | 表示標(biāo)簽及內(nèi)容直接隱藏,讓出原有標(biāo)準(zhǔn)流的位置
脫離標(biāo)準(zhǔn)流
標(biāo)簽元素脫離標(biāo)準(zhǔn)流的方法包括:浮動(dòng)啄刹、絕對(duì)定位涮坐、固定定位
浮動(dòng)屬性
浮動(dòng)定義
1.浮動(dòng) (float):讓元素脫離標(biāo)準(zhǔn)流凄贩,同一級(jí)的浮動(dòng)的元素可以并排在一排顯示
float : right / left
浮動(dòng)的性質(zhì)
1.浮動(dòng)的元素脫離標(biāo)準(zhǔn)流
標(biāo)準(zhǔn)文檔流特點(diǎn):區(qū)分行塊誓军。 塊級(jí)元素:可以設(shè)置寬高,必須獨(dú)占一行疲扎。 行內(nèi)元素:不能設(shè)置寬高昵时,可以并排一行捷雕。
浮動(dòng)的元素脫離了標(biāo)準(zhǔn)流的限制,具備行塊二象性壹甥,浮動(dòng)的元素可以設(shè)置寬高救巷,還 可以并排一行,而且不會(huì)有空白折疊現(xiàn)象句柠,如果元素不設(shè)置寬高浦译,可以被元素內(nèi)容 自動(dòng)撐開(kāi)。
2.浮動(dòng)的元素依次貼邊
浮動(dòng)前 [圖片上傳失敗...(image-60ce52-1604048626452)]
浮動(dòng)后:并排一排溯职,父元素寬度足夠
[圖片上傳失敗...(image-cbc99e-1604048626452)]
3.浮動(dòng)的元素沒(méi)有margin塌陷
margin 塌陷現(xiàn)象出現(xiàn)在標(biāo)準(zhǔn)流中的精盅,浮動(dòng)元素已經(jīng)脫離標(biāo)準(zhǔn)流,不再具有margin塌陷現(xiàn)象
4.浮動(dòng)的元素讓出標(biāo)準(zhǔn)流元素
元素浮動(dòng)之后谜酒,脫離了標(biāo)準(zhǔn)流叹俏,會(huì)將原來(lái)占有的標(biāo)準(zhǔn)流位置讓給后面的一個(gè)同級(jí)元素
在IE6、7瀏覽器中僻族,有兼容問(wèn)題
5.字圍現(xiàn)象
[圖片上傳失敗...(image-7d2a8f-1604048626452)]
浮動(dòng)問(wèn)題
浮動(dòng)的問(wèn)題一:標(biāo)準(zhǔn)流中的元素粘驰,不設(shè)置高度的情況下,都能被內(nèi)部的標(biāo)準(zhǔn)流元素自動(dòng)撐高述么。如果內(nèi)部的子元素進(jìn)行了浮動(dòng)蝌数,浮動(dòng)的子元素是撐不高標(biāo)準(zhǔn)流父親的。[圖片上傳失敗...(image-f12338-1604048626452)]
浮動(dòng)的問(wèn)題二:父元素沒(méi)有高度度秘,會(huì)影響后面元素的標(biāo)準(zhǔn)流位置籽前,如果福哦的那個(gè)的子元素足夠高,有可能影響到后面浮動(dòng)的貼邊敷钾。
[圖片上傳失敗...(image-7923f-1604048626452)]
清除浮動(dòng)方法
清除浮動(dòng)一:給標(biāo)準(zhǔn)流的父元素強(qiáng)制給一個(gè)合適的高度height
問(wèn)題:父元素高度不是自適應(yīng)阻荒,一旦子元素高度變化挠锥,問(wèn)題可能再次出現(xiàn)。
清除浮動(dòng)二:clear屬性
清除標(biāo)簽元素自身受到前面的浮動(dòng)元素的影響侨赡。
| left | 清除前面左浮動(dòng)帶來(lái)的影響
| right | 清除前面有浮動(dòng)帶來(lái)的影響
| both | 清除前面所有浮動(dòng)帶來(lái)的影響
解決:浮動(dòng)元素影響后面元素標(biāo)準(zhǔn)流位置和貼邊蓖租。
問(wèn)題:父元素不能高度自適應(yīng),后面父元素之間如果有margin效果不正確羊壹。
清除浮動(dòng)三:隔墻法
外墻法:在兩個(gè)大的父盒子之間蓖宦,添加一個(gè)空的<div>標(biāo)簽,標(biāo)簽上帶有clear:both屬性
內(nèi)墻法:在父元素內(nèi)部油猫,所有的浮動(dòng)子元素后面添加一個(gè)空的 <div> 元素稠茂,標(biāo)簽高 度為 0,添加 clear 屬性。
清除浮動(dòng)四:偽類
.clearfix:after{
content:"0"; /*添加一個(gè)文字內(nèi)容*/
display:block; /*將文字轉(zhuǎn)化為塊級(jí)元素*/
height:0; /*將盒子高度固定為0睬关,避免影響父盒子高度*/
clear:both; /*清除前面浮動(dòng)影響*/
visibility:hidden; /*將創(chuàng)建的元素占位置隱蔽*/
}
清除浮動(dòng)五:溢出隱藏
overflow:hidden
總結(jié) 如果父元素高度是固定的诱担,建議使用height屬性解決
如果父元素告訴需要自適應(yīng),建議使用overflow屬性解決浮動(dòng)問(wèn)題
CSS偽類選擇器
要想讓每個(gè)偽類的狀態(tài)正常加載电爹,書寫順序必須是:訪問(wèn)前l(fā)ink蔫仙、訪問(wèn)后visited、 鼠標(biāo)移上hover丐箩、鼠標(biāo)點(diǎn)擊active摇邦。
a:link{ color : gray } /*訪問(wèn)前狀態(tài)*/
a:visited{ color :cyan } /*訪問(wèn)后狀態(tài)*/
a:hover{ color : red } /*鼠標(biāo)懸浮狀態(tài)*/
a:active{ color : yellow } /*鼠標(biāo)點(diǎn)擊狀態(tài)*/
背景屬性
-背景顏色 background-color
-背景圖片 background-image 屬性 url(圖片路徑)
-背景重復(fù) background-repeat
| repeat | 重復(fù),默認(rèn)屬性值屎勘,表示會(huì)使用背景重復(fù)加載填滿整個(gè)盒子背景區(qū)域
| no-repeat| 不重復(fù)涎嚼,不論背景圖是否大于盒子范圍,都只加載依次圖片
| repeat-x | 水平重復(fù)挑秉,使用背景圖片水平重復(fù)加載鋪滿第一行法梯,垂直方向不重復(fù)
| repeat-y | 垂直重復(fù),使用背景圖片垂直重復(fù)加載鋪滿第一列犀概,水平方向不重復(fù)
-背景定位 background-position 主要用于設(shè)置不重復(fù)的圖片在背景區(qū)域的加載開(kāi)始位置
單詞表示法 水平方向可選單詞:left立哑、center、right
垂直方向可選單詞:top姻灶、center铛绰、bottom
像素表示法 水平 垂直 border以內(nèi)的
百分比表示法 100%代表的數(shù)值
水平方向,等價(jià)于盒子的border以內(nèi)的背景區(qū)域?qū)挾葴p去圖片的寬度产喉。
垂直方向捂掰,等價(jià)于盒子的border以內(nèi)的背景區(qū)域高度減去圖片的高度。
-背景附著 background-attachment
| scroll | 滾動(dòng)的曾沈,表示背景圖片與盒子保持相對(duì)位置不變这嚣,隨著頁(yè)面的滾動(dòng)而滾走
| fixed | 固定的,背景圖的定位的參考點(diǎn)從盒子border塞俱,以內(nèi)的左上頂點(diǎn)變?yōu)榱藶g覽器窗口的左 上頂點(diǎn)姐帚,頁(yè)面滾動(dòng)時(shí),瀏覽器窗口的左上頂點(diǎn)是不變的障涯,導(dǎo)致背景圖固定在瀏覽器窗口 的某個(gè)位置罐旗,不會(huì)隨著頁(yè)面滾動(dòng)而滾走
background 屬性可以將五個(gè)單一屬性的值進(jìn)行合寫。 屬性值:可以有 1-5 個(gè)屬性值唯蝶,值之間用空格進(jìn)行分隔九秀,背景定位的兩個(gè)屬性值算作 一個(gè)屬性值,不能被分開(kāi)也不能顛倒順序粘我。五個(gè)屬性值之間可以互換位置鼓蜒。
background :url(image) no-repeat center top fixed #fff;
-背景縮放background-size 設(shè)置<img>的尺寸
| px值 | 1-2個(gè)像素值,只設(shè)置1個(gè)值,垂直方向等比例拉伸友酱;設(shè)置2個(gè)值晴音,按照設(shè)置值 加載
| 百分比 | 同像素值設(shè)置方法相同柔纵,設(shè)置百分比時(shí)缔杉,數(shù)值參照盒子的寬、高屬性
| cover | 自動(dòng)調(diào)整縮放比例搁料,把背景圖像擴(kuò)展至足夠大或详,以使背景圖像完全覆蓋背景區(qū) 域。如有溢出部分則會(huì)被隱藏郭计。
| contain | 自動(dòng)調(diào)整縮放比例霸琴,把圖像圖像擴(kuò)展至最大尺寸,保證圖片始終完整顯示在背 景區(qū)域
定位屬性position
| relative | 相對(duì)定位
| absolute | 絕對(duì)定位
| fixed | 固定定位
-相對(duì)定位 relative
相對(duì)定位的元素不能脫離標(biāo)簽的原始狀態(tài)(標(biāo)準(zhǔn)流昭伸、浮動(dòng)),不會(huì)讓出原來(lái)占有的位置
-絕對(duì)定位 absolute 脫離標(biāo)準(zhǔn)文檔流
子絕父相 梧乘、 子絕父絕 、 子絕父固
-固定定位 fixed 脫離標(biāo)準(zhǔn)文檔流
-壓蓋順序 z-index
HTML5
新增語(yǔ)義化標(biāo)簽
[圖片上傳失敗...(image-974217-1604048626452)]
HTML5新增多媒體標(biāo)簽
<audio>音頻標(biāo)簽 ogg mpeg wav
大眾寫法
<audio src="文件地址" controls="controls"></audio>
兼容寫法
<audio controls="controls">
<source sec='happy.mp3' type='audio/mpeg'>
<source sec='happy.mp3' type='audio/ogg或者wav'>
</audio>
| 屬性 | 值 | 描述
| autoplay| autoplay| 如果出現(xiàn)該屬性庐杨,則音頻在就緒后馬上播放
| controls | controls | 如果出現(xiàn)該屬性选调,則向用戶顯示控件,比如播放按鈕
| loop | loop | 如果出現(xiàn)該屬性灵份,則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放仁堪。
| preload | preload | 如果出現(xiàn)該屬性,則音頻在頁(yè)面加載時(shí)進(jìn)行加載填渠,并預(yù)備播放弦聂。如果使用 "autoplay",則忽略該屬性氛什。
| src | url | 要播放的音頻的 URL莺葫。
<video> 視頻標(biāo)簽 ogg mp4 webm
大眾寫法
<video src="文件地址" controls="controls"></video>
兼容寫法
<video controls="controls">
<source sec='happy.mp4' type='audio/mp4'>
<source sec='happy.mp4' type='audio/ogg或者WebM'>
</video>
[圖片上傳失敗...(image-361a85-1604048626452)]
| 屬性 | 值 | 描述
|autoplay | autoplay | 視頻就緒自動(dòng)播放(谷歌瀏覽器需要添加muted來(lái)解決自動(dòng)播放問(wèn)題)
| controls | controls | 向用戶顯示播放控件
| loop | loop |放完是否繼續(xù)播放該視頻,循環(huán)播放
| preload | auto |(預(yù)先加載視頻)
none(不應(yīng)加載視頻) 規(guī)定是否預(yù)加載視頻(如果有了autoplay 就忽略該屬性)
| src | url | 視頻url地址
| width | pixels(像素) |設(shè)置播放器寬度
| height | pixels(像素) |設(shè)置播放器高度
| poster | Imgurl | 加載等待的畫面圖片
| muted | muted | 靜音播放
HTML5新增表單標(biāo)簽
屬性值 描述
type="email" 限制用戶輸入必須為Email類型
type="url" 限制用戶輸入必須為URL類型
type="date" 限制用戶輸入必須為日期類型
type="time" 限制用戶輸入必須為時(shí)間類型
type="month" 限制用戶輸入必須為月類型
type="week" 限制用戶輸入必須為周類型
type="number" 限制用戶輸入必須為數(shù)字類型
type="range" 滑動(dòng)條
type="tel" 手機(jī)號(hào)碼
type="search" 搜索框
type="color" 生成一個(gè)顏色選擇表單
<datalist> 標(biāo)簽
? <datalist> 標(biāo)簽規(guī)定了 <input> 元素可能的選項(xiàng)列表枪眉。
? <datalist>元素包含了一組<option>元素徙融,這些元素表示預(yù)定義可選值,在<input>元素輸入
過(guò)程中瑰谜,會(huì)自動(dòng)響應(yīng)<option>元素的值欺冀。
? 綁定的<input>標(biāo)簽必須設(shè)置 list 屬性,屬性值等于<datalist>標(biāo)簽的 id 屬性值萨脑。
新增表單屬性
屬性 值 描述
required required 表單擁有該屬性表示其內(nèi)容不能為空隐轩,必填
placeholder 提示文本 表單的提示信息,存在默認(rèn)值將不顯示
autofocus autofocus 自動(dòng)聚焦屬性渤早,頁(yè)面加載完成自動(dòng)聚焦到指定表單职车,一般頁(yè)面中放1個(gè)
autocomplete off / on 當(dāng)用戶在字段開(kāi)始鍵入時(shí),瀏覽器基于之前鍵入過(guò)的值,應(yīng)該顯示出在字段中填 寫的選項(xiàng)悴灵。
默認(rèn)已經(jīng)打開(kāi)扛芽,如 autocomplete=”on “
關(guān)閉 autocomplete =”off”
-需要放在表單內(nèi)同時(shí)加上name屬性
-同時(shí)成功提交
multiple multiple 可以多選文件提交
CSS3
css3新增選擇器
子級(jí)選擇器
子級(jí)選擇器用于選取帶有特定父元素的元素 書寫語(yǔ)法element1>element2
[圖片上傳失敗...(image-bb266d-1604048626452)]
兄弟選擇器
--相鄰兄弟選擇器 用于選擇緊接在另一個(gè)元素后的兄弟元素,而且二者有相同的父元素积瞒。
| element1+element2 | 匹同一個(gè)父元素中緊跟在element1后面的一個(gè)element2元素
--其他兄弟選擇器 匹配同一個(gè)父元素中在element1后面的所有element2元素
| elemenet~element2 | 匹配同一個(gè)父元素中elemenet1后面的所有element2元素
結(jié)構(gòu)偽類選擇器
E:first-child 匹配父元素中的第一個(gè)子元素E
E:last-child 匹配父元素中最后一個(gè)E元素
E:nth-child(n) 匹配父元素中的第n個(gè)子元素E even偶數(shù) odd奇數(shù) 這個(gè)是父親節(jié)點(diǎn)下的第幾個(gè)
E:first-of-type 指定類型E的第一個(gè)
E:last-of-type 指定類型E的最后一個(gè)
E:nth-of-type(n) 指定類型E的第n個(gè) 這個(gè)是元素的第幾個(gè)在元素下選取
偽元素選擇器
E::before 在 E 元素內(nèi)部的前面插入一個(gè)元素
E::after 在 E 元素內(nèi)部的后面插入一個(gè)元素
E::first-letter 選擇到了 E 容器內(nèi)的第一個(gè)字母
E::first-line 選擇到了 E 容器內(nèi)的第一行文本
偽元素的注意事項(xiàng)
? 偽元素只能給雙標(biāo)簽添加川尖,不能給單標(biāo)簽添加
? 偽元素的冒號(hào)前不能有空格,如 E ::before 這個(gè)寫法是錯(cuò)誤的
? 偽元素里面必須寫上屬性 content:"";
? before 和 after 創(chuàng)建一個(gè)元素茫孔,但是屬于行內(nèi)元素叮喳。
? 因?yàn)樵?DOM 里面看不見(jiàn)剛才創(chuàng)建的元素,所以我們稱為偽元素缰贝。
屬性選擇器
E[att] 選擇具有att屬性的E元素
E[att="val"] 選擇具有att屬性且屬性值等于val的E元素
E[att^="val"] 匹配具有att屬性馍悟、且值以val開(kāi)頭的E元素
E[att$="val"] 匹配具有att屬性、且值以val結(jié)尾的E元素
E[att*="val"] 匹配具有att屬性剩晴、且值中含有val的E元素
基礎(chǔ)選擇器:id選擇器 > 類選擇器 > 標(biāo)簽選擇器 > *
偽類選擇器和屬性選擇器的權(quán)重等于類選擇器
偽元素選擇器的權(quán)重等于標(biāo)簽選擇器
box-sizing屬性
content-box 標(biāo)準(zhǔn)模式 盒子總體大小為 width(height) + padding + border
border-box 怪異模式 盒子總體大小為 width 和 height
[圖片上傳失敗...(image-cdef05-1604048626452)]
邊框圓角 border-radius
| x-radius / y-radius | / 分割兩部分屬性值锣咒,前面為水平半徑,后面為垂直半徑赞弥, 得到的是橢圓角毅整。
| radius | 一個(gè)屬性值,則水平和垂直都設(shè)置為同一個(gè)值嗤攻,得到的是 圓角毛嫉。
文字陰影text-shadow
| 屬性值 | 簡(jiǎn)介
| h-shadow | 必需糙俗。水平陰影的位置锻霎。允許負(fù)值蔚出。
| v-shadow | 必需剪菱。垂直陰影的位置章办。允許負(fù)值剃氧。
| blur | 可選娱据。模糊的距離仅叫。
| color | 可選房交。陰影的顏色彻舰。
邊框陰影box-shadow
| 屬性值 | 簡(jiǎn)介
|h-shadow | 必需。水平陰影的位置候味。允許負(fù)值刃唤。
|v-shadow | 必需。垂直陰影的位置白群。允許負(fù)值尚胞。
|blur | 可選。模糊距離帜慢。
|spread | 可選笼裳。陰影的尺寸唯卖。
|color | 可選。陰影的顏色躬柬。
|inset |可選拜轨。將外部陰影改為內(nèi)部陰影。
過(guò)渡屬性 transition
transition:過(guò)度的屬性 過(guò)渡時(shí)間 運(yùn)動(dòng)曲線 延時(shí)時(shí)間允青;
屬性 描述
transition 簡(jiǎn)寫屬性橄碾,用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。
transition-property 規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱昧廷。
transition-duration 定義過(guò)渡效果花費(fèi)的時(shí)間堪嫂。默認(rèn)是 0偎箫。
transition-timing-function 規(guī)定過(guò)渡效果的時(shí)間曲線木柬。默認(rèn)是 "ease"。
transition-delay 規(guī)定過(guò)渡效果何時(shí)開(kāi)始淹办。默認(rèn)是 0眉枕。
--transition-property過(guò)渡的屬性
? none 表示沒(méi)有屬性過(guò)渡
? all 表示所有變化的屬性都過(guò)渡
? 屬性名 使用具體的屬性名,多個(gè)屬性名中間逗號(hào)分隔
--時(shí)間
以秒為單位 0s必須加單位
--transition-timing-function 時(shí)間曲線
2D轉(zhuǎn)換 transform
對(duì)元素進(jìn)行移動(dòng)怜森、縮放速挑、旋轉(zhuǎn)、拉長(zhǎng)或拉伸副硅。配合過(guò)渡和即將學(xué)習(xí)的動(dòng)畫知識(shí)姥宝,可 以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。
位移translate()
translate(x,y) x,y分別為水平和垂直方向位移的距離恐疲,可以為px值或百分比腊满, 區(qū)分正負(fù)
translate(x) 只有一個(gè)數(shù)值,表示水平方向的位移
translate(y) 只有一個(gè)數(shù)值培己,表示垂直方向的位移
縮放 scale()
值 說(shuō)明
scale(x, y) x,y分別為改變?cè)氐膶挾群透叨鹊谋稊?shù)
scale(n) 只有一個(gè)值碳蛋,表示寬度和高度同時(shí)縮放n倍
scaleX(n) 改變?cè)氐膶挾?br>
scaleY(n) 改變?cè)氐母叨?/p>
旋轉(zhuǎn) rotate(deg)
deg為度數(shù)單位,正數(shù)表示順時(shí)針旋轉(zhuǎn)省咨,負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)
傾斜 skew()
transform: skew(數(shù)字deg,數(shù)字deg)
兩個(gè)屬性值分別表示水平和垂直方向傾斜的角度肃弟,屬性值可以為正可以為負(fù),第二個(gè) 數(shù)值不寫默認(rèn)為0
transform--origin 屬性
設(shè)置調(diào)整元素的水平和垂直方向原點(diǎn)的位置
x 定義 X 軸的原點(diǎn)在何處零蓉◇允埽可能的值:left 、center敌蜂、right箩兽、像素值、百分比
y 定義 Y 軸的原點(diǎn)在何處紊册”纫蓿可能的值:top快耿、center、bottom芳绩、像素值掀亥、百分比
3D轉(zhuǎn)換
[圖片上傳失敗...(image-ac107d-1604048626452)]
透視屬性 perspective
作用:設(shè)置在 z 軸的視線焦點(diǎn)的觀察位置,從而實(shí)現(xiàn) 3D 查看效果妥色。
屬性值:像素值搪花,數(shù)值越大,觀察點(diǎn)距離 z 軸原點(diǎn)越遠(yuǎn)嘹害,圖形效果越完整且接近原始尺寸撮竿。 注意:透視屬性需要設(shè)置給 3D 變化元素的父級(jí)
3D 旋轉(zhuǎn)
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)笔呀。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)幢踏。
[圖片上傳失敗...(image-e781c5-1604048626452)]
3D 位移
translateX(x) 設(shè)置 X 軸的位移值。
translateY(y) 設(shè)置 Y 軸的位移值许师。
translateZ(z) 定義3D位移房蝉,設(shè)置Z軸的位移值。
屬性值為像素值或百分比微渠,正負(fù)表示位移的方向搭幻。正值向?qū)?yīng)軸的正方向移動(dòng),負(fù)值向?qū)?yīng) 軸的負(fù)方向移動(dòng)逞盆。
transform-style屬性
用于設(shè)置被嵌套的子元素在父元素的 3D 空間中顯示檀蹋,子元素會(huì)保留自己的 3D 轉(zhuǎn)換坐標(biāo)軸。
屬性值:
flat:所有子元素在 2D 平面呈現(xiàn)
preserve-3d:保留 3D 空間
瀏覽器兼容
Internet Explorer 10云芦、Firefox 以及 Opera 支持 transform 屬性俯逾。
Chrome 和 Safari 需要前綴 -webkit-。
Internet Explorer 9 需要前綴 -ms-焕数。