如何居中一個(gè)浮動元素

　　單純的浮動元素其實(shí)不是很好居中的，除非你再給他嵌套一個(gè)盒子，那這也就不是給浮動盒子居中了;要么就是加相對定位進(jìn)行輔助，具體代碼如下：

　　- 方法一：嵌套一個(gè)父盒子

　　```CSS

　　.container{width:200px;margin:0 auto;} /*設(shè)置父盒子的寬度和子盒子一樣就可以了*/

　　.container .inner{width:200px; float:left}

　　```

　　- 方法二：利用相對定位

　　```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，所以我們可以這樣來做：

　　- 父盒子{position:relative;width:100%;padding-top:75%;height:0;}

　　子盒子{position:absolute;top:0;bottom:0; left:0;right:0}

　　- 用padding來模擬父元素的高度，子元素設(shè)置絕對定位，四個(gè)方向都設(shè)置為0，就會把寬高拉伸開，那么他的寬高就會一直保持比例為4:3了

　　設(shè)置元素顯示隱藏的幾種方式，與區(qū)別?

　　常見隱藏元素的方法有opacity:0; visibility:hidden; display:none; transform:scale(0);height:0px;

　　他們之間的區(qū)別是：

　　opacity：0; 是把透明度設(shè)置為0，但是這個(gè)元素還是真實(shí)存在的，只是看不見了而已，他在頁面中依然占位，所有的點(diǎn)擊事件也都是可以觸發(fā)的;

　　visibility:hidden; 他在頁面中的效果和opacity：0;有一點(diǎn)相似，他也是看不見的，并且在頁面中依然占位，但是不同的是它不能夠觸發(fā)點(diǎn)擊事件;

　　display：none;和他們就不一樣了，它屬于是完全刪除的狀態(tài)，相當(dāng)于不存在于頁面當(dāng)中了，因此它不占位，也不能觸發(fā)點(diǎn)擊事件。

　　transform:scale(0);使用縮放,按照x和y的中心位置進(jìn)行縮小占位置

　　height:0px;的時(shí)候不占頁面空間如果元素中有文本的話需要給元素添加oveflow:hidden;font-size:0px

　　更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來試聽。