如何居中一個浮動元素

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

　　- 方法一：嵌套一個父盒子

　　```CSS

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

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

　　```

　　- 方法二：利用相對定位

　　```CSS

　　.box{width:200px;float:left; position:relative;left:50%; margin-left:-100px}

　　```

　　如何實現一個自適應div，寬高比始終為4:3

　　- 如果想實現一個元素的寬高比例固定，那么就需要讓他們參照同一個參照物，寬高本身是兩個方向的，各自參照自己的父元素，所以不太好實現，那么就需要轉換思維了，大家都知道我們的padding margin 如果設置了百分數，他們不論是哪個方向參照的都是父盒子的width，所以我們可以這樣來做：

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

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

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

　　設置元素顯示隱藏的幾種方式，與區別?

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

　　他們之間的區別是：

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

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

　　display：none;和他們就不一樣了，它屬于是完全刪除的狀態，相當于不存在于頁面當中了，因此它不占位，也不能觸發點擊事件。

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

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

　　更多關于“web前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。