auto:? ? ? ? ?
自動(dòng)適應(yīng)的意思活喊,比如“marjin:0 autao”的意思為上下邊距為0挽放,左右自動(dòng)適應(yīng)的意思,也就實(shí)現(xiàn)了居中的效果骡技。
autao在css中往往都是默認(rèn)值鸣个。
*? :? ? 所有標(biāo)簽都有的屬性。內(nèi)外邊距為0.? ? ? ?
? *{ margin:0; padding:0;} 這樣 可以很好的避免標(biāo)簽的默認(rèn)內(nèi)外補(bǔ)丁 所產(chǎn)生的差異布朦。&:? ? ? ? ? ? 表示在嵌套層次中bai回溯一層囤萤,即du&:before相當(dāng)于zhi.clearfix:before,&:after相當(dāng)于.clearfix:after是趴。<label> <label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記)涛舍。text-align text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。<input type="submit"> <input type="submit"> 定義了提交按鈕.<input type="checkbox"> <input type="checkbox"> 定義了復(fù)選框. z-index: 100; z-index: 100;可以防止兩個(gè)定位重疊相互遮擋z值越大唆途,越靠前富雅。鼠標(biāo)移動(dòng)到圖片會(huì)放大的代碼參考:
!DOCTYPE html>?
<html>?
? ? <head>? ?
? ? <meta charset="UTF-8">?
? ? ? ? <title>
</title>? ? ? ?
<style type="text/css">
? ? ? ? ? ?
div{? ? ? ? ? ? ? ? ?
width: 300px;? ? ? ? ? ? ? ? ? height: 300px;? ? ? ? ? ? ? ? ? border: #000 solid 1px;? ? ? ? ? ? ? ? ? margin: 50px auto;? ? ? ? ? ? ? ? ? overflow: hidden;? ? ? ? ? ? ? }? ? ? ? ? ? ? div img{? ? ? ? ? ? ? ? ? cursor: pointer;? ? ? ? ? ? ? ? ? transition: all 0.6s;? ? ? ? ? ? ? }? ? ? ? ? ? ? div img:hover{? ? ? ? ? ? ? ? ? transform: scale(1.4);? ? ? ? ? ? ? }? ? ? ? ? </style>? ? ? </head>? ? ? <body>? ? ? ? ? <div>? ? ? ? ? ? ? <img src="img/focus.png" />? ? ? ? ? </div>? ? ? </body>? </html>? 其中:transition: all 0.6s;表示所有的屬性變化在0.6s的時(shí)間段內(nèi)完成。transform: scale(1.4);表示在鼠標(biāo)放到圖片上的時(shí)候圖片按比例放大1.4倍transform與transition的區(qū)別是:一個(gè)是轉(zhuǎn)換肛搬,一個(gè)是過(guò)渡overflow:hidden;隱藏溢出內(nèi)容没佑。autoplay="autoplay"視頻自動(dòng)播放去除自動(dòng)播放就是去掉controls給父級(jí)設(shè)置font-size: 0;去div縫隙 object-fit: cover;圖片裁切