麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 2022常見前端基礎面試題(含答案)五

2022常見前端基礎面試題(含答案)五

來源:千鋒教育
發布人:wjy
時間: 2022-08-11 16:18:19 1660205899

  如何實現一個自適應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培訓的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
主站蜘蛛池模板: 香蕉视频在线观看免费国产婷婷 | 青青国产在线播放| 波多野结衣欲乱上班族| 黄色日韩| 日本免费区| aaaa欧美高清免费| 风间由美juy135在线观看 | 国产麻豆剧果冻传媒一区| 黄色一级二级| 免费网站看v片在线a| 啪啪电影院| 免费女人18毛片a级毛片视频| 免费精品99久久国产综合精品| 久久99精品国产麻豆不卡| 一级看片| 国产欧美精品一区二区色综合| 欧美野性肉体狂欢大派对| 久久国产精品二国产精品 | 两个小姨子在线观看| 男的把j放进女人下面视频免费| 999国产精品999久久久久久| 欧美色欧美亚洲另类二区| 国产精品一区二区久久不卡| a级毛片高清免费视频| 中文字幕一区精品| 女人扒开裤子让男人桶| 波多野电影| 欧美成人aa久久狼窝动画| 国产v亚洲v欧美v专区| 欧美高清在线精品一区| 亚洲成av人影片在线观看| 日本人与黑人xxxx| 337p中国人体啪啪| 91精品国产免费| 大ji巴c死你h| 国产成人三级经典中文| 爱情岛论坛首页永久入口| 一级毛片看**在线视频| 18女人毛片水真多免费| 18gay台湾男同亚洲男同| 国产孕交|