如何實(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è)面空間如果元素中有文本的話需要給元素添加oveflow:hidden;font-size:0px

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

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

　　- 1.單行文本垂直居中：當(dāng)此標(biāo)簽高度和行高的值相等時(shí);

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

　　- **不知道寬高的情況下如何實(shí)現(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;}

　　雙飛翼布局跟圣杯布局

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

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

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

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

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

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

　　說(shuō)說(shuō)移動(dòng)端Web分辨率

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

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

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

　　更多關(guān)于html5培訓(xùn)的問(wèn)題，歡迎咨詢(xún)千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢(xún)課程顧問(wèn)，獲取試聽(tīng)資格來(lái)試聽(tīng)我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門(mén)到精通。