如何實現(xiàn)一個自適應(yīng)div，寬高比始終為4:3

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

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

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

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

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

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

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

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

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

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

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

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

　　實現(xiàn)垂直居中的幾種方法，不知道寬高的情況下如何實現(xiàn)元素水平垂直居中?

　　- **實現(xiàn)垂直居中的幾種方式**：

　　- 1.單行文本垂直居中：當此標簽高度和行高的值相等時;

　　- 2.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;margin-top:-高度的一半;}

　　- 3.定位： 父元素{position:relative;} 子元素{position:absolute;top:0;bottom:0;margin:auto;}

　　- 4.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;transform:translateY(-50%);}

　　- 5.彈性盒：父元素{display:flex;align-items:center;}

　　- **不知道寬高的情況下如何實現(xiàn)元素水平垂直居中**:

　　- 1.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

　　- 2.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

　　- 3.彈性盒： 父元素{display:flex;} 子元素{margin:auto;}

　　- 4.彈性盒： 父元素{display:flex;justify-content:center;align-items:center;}

　　雙飛翼布局跟圣杯布局

　　- 圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。

　　- 圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div并排，以形成三欄布局。不同在于解決”中間欄div內(nèi)容不被遮擋“問題的思路不一樣：

　　- 圣杯布局，為了中間div內(nèi)容不被遮擋，將中間div設(shè)置了左右padding-left和padding-right后，將左右兩個div用相對布局position: relative并分別配合right和left屬性，以便左右兩欄div移動后不遮擋中間div。

　　- 雙飛翼布局，為了中間div內(nèi)容不被遮擋，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。多了1個div，少用大致4個css屬性(圣杯布局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對布局position: relative及對應(yīng)的right和left共4個屬性，一共6個;

　　- 而雙飛翼布局子div里用margin-left和margin-right共2個屬性，6-2 =4)，個人感覺比圣杯布局思路更直接和簡潔一點。簡單說起來就是”雙飛翼布局比圣杯布局多創(chuàng)建了一個div，但不用相對布局了“，而不是你題目中說的”去掉relative"就是雙飛翼布局“

　　- 注意：實際開發(fā)的時候雙飛翼圣杯布局實際就是兩欄或者是三欄布局,為了提高開發(fā)效率可以選擇直接使用彈性盒子直接實現(xiàn)也是非常高效的

　　說說移動端Web分辨率

　　· 分辨率有兩種，分別是屏幕分辨率和圖像分辨率。

　　o 屏幕分辨率：是指一個屏幕上可以顯示多少信息，通常以像素為單位來衡量。例如，分辨率1920 ×1080表示水平方向含有1920個像素，垂直方向含有1080個像素，兩者相乘可知，屏幕上總共有2 073 600個像素點。在屏幕的大小相同的情況下，如果屏幕的分辨率低(如640 ×480)，則屏幕上顯示的像素少，單個像素尺寸比較大，看起來會有種顆粒感;如果屏幕的分辨率高(如1920 ×1080)，則屏幕上顯示的像素多，單個像素尺寸比較小，看起來會比較清晰。

　　o 圖像分辨率，在同一臺設(shè)備上，圖片的像素點和屏幕的像素點通常是一一對應(yīng)的。圖片的分辨率越高，圖片越清晰;圖片的分辨率越低，圖片越模糊。例如，一張圖片分辨率是500 ×200，這就表示這張圖片在屏幕上按1:1顯示時，水平方向有500個像素點(色塊)，垂直方向有200個像素點(色塊)。

　　更多關(guān)于html5培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。