如何實現一個自適應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

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

　　- **實現垂直居中的幾種方式**：

　　- 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;}

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

　　- 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;}

　　雙飛翼布局跟圣杯布局

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

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

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

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

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

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

　　說說移動端Web分辨率

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

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

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

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