如何居中一個(gè)浮動(dòng)元素
單純的浮動(dòng)元素其實(shí)不是很好居中的,除非你再給他嵌套一個(gè)盒子,那這也就不是給浮動(dòng)盒子居中了;要么就是加相對(duì)定位進(jìn)行輔助,具體代碼如下:
- 方法一:嵌套一個(gè)父盒子
```CSS
.container{width:200px;margin:0 auto;} /*設(shè)置父盒子的寬度和子盒子一樣就可以了*/
.container .inner{width:200px; float:left}
```
- 方法二:利用相對(duì)定位
```CSS
.box{width:200px;float:left; position:relative;left:50%; margin-left:-100px}
```
如何實(shí)現(xiàn)一個(gè)自適應(yīng)div,寬高比始終為4:3
- 如果想實(shí)現(xiàn)一個(gè)元素的寬高比例固定,那么就需要讓他們參照同一個(gè)參照物,寬高本身是兩個(gè)方向的,各自參照自己的父元素,所以不太好實(shí)現(xiàn),那么就需要轉(zhuǎn)換思維了,大家都知道我們的padding margin 如果設(shè)置了百分?jǐn)?shù),他們不論是哪個(gè)方向參照的都是父盒子的width,所以我們可以這樣來(lái)做:
- 父盒子{position:relative;width:100%;padding-top:75%;height:0;}
子盒子{position:absolute;top:0;bottom:0; left:0;right:0}
- 用padding來(lái)模擬父元素的高度,子元素設(shè)置絕對(duì)定位,四個(gè)方向都設(shè)置為0,就會(huì)把寬高拉伸開(kāi),那么他的寬高就會(huì)一直保持比例為4:3了
設(shè)置元素顯示隱藏的幾種方式,與區(qū)別?
常見(jiàn)隱藏元素的方法有opacity:0; visibility:hidden; display:none; transform:scale(0);height:0px;
他們之間的區(qū)別是:
opacity:0; 是把透明度設(shè)置為0,但是這個(gè)元素還是真實(shí)存在的,只是看不見(jiàn)了而已,他在頁(yè)面中依然占位,所有的點(diǎn)擊事件也都是可以觸發(fā)的;
visibility:hidden; 他在頁(yè)面中的效果和opacity:0;有一點(diǎn)相似,他也是看不見(jiàn)的,并且在頁(yè)面中依然占位,但是不同的是它不能夠觸發(fā)點(diǎn)擊事件;
display:none;和他們就不一樣了,它屬于是完全刪除的狀態(tài),相當(dāng)于不存在于頁(yè)面當(dāng)中了,因此它不占位,也不能觸發(fā)點(diǎn)擊事件。
transform:scale(0);使用縮放,按照x和y的中心位置進(jìn)行縮小占位置
height:0px;的時(shí)候不占頁(yè)面空間如果元素中有文本的話(huà)需要給元素添加oveflow:hidden;font-size:0px
更多關(guān)于“web前端培訓(xùn)”的問(wèn)題,歡迎咨詢(xún)千鋒教育在線名師。千鋒教育多年辦學(xué),課程大綱緊跟企業(yè)需求,更科學(xué)更嚴(yán)謹(jǐn),每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升,都可以找到適合的班型,千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。