技術標籤：htmlhtmlhtml5cssweb

htmlcss面試基礎題

1. 用css畫一條長100px, 寬0.5px的細線;(移動端)

思路： transform: scaleX()

2. 給body設定背景色, 背景色會影響到body預設的margin區域嗎?

會

3. 頁面body標籤內設定一個盒子,其寬度是螢幕寬的40%,其高度是其寬度的60%(css寫);

4. 有關定位(position)的理解:

- 當父級元素(含祖先元素)沒有設定position的relative和absolute屬性值時;子元素設定了position: absolute,且子元素沒有設定left right top bottom屬性,那麼子元素相對於哪個元素定位(精確到: 是其margin的左上角 還是 padding的左上角 還是 content的左上角)
**父級元素的content左上角**
- 當父級元素(含祖先元素)沒有設定position的relative和absolute屬性值時,子元素設定了position: absolute,且子元素設定了left right top bottom屬性,那麼子元素相對於哪個元素定位(精確到: 是其margin的左上角 還是 padding的左上角 還是 content的左上角)
**html,body的margin區域的左上角**

- 當父級元素(含祖先元素)設定了position的relative和absolute屬性值時;子元素設定了position: absolute,且子元素沒有設定left right top bottom屬性,那麼子元素相對於哪個元素定位(精確到: 是其margin的左上角 還是 padding的左上角 還是 content的左上角)
**父級元素content的左上角 且 子元素沒有把父元素撐開**
- 當父級元素(含祖先元素)設定了position的relative和absolute屬性值時,子元素設定了position: absolute,且子元素設定了left right top bottom屬性,那麼子元素相對於哪個元素定位(精確到: 是其margin的左上角 還是 padding的左上角 還是 content的左上角)
**父級元素padding的左上角**

- 瞭解 粘性定位 (表格 表頭固定; 吸頂)
 

5. 如何使一個盒子水平垂直居中(至少5種)

6. 如何讓一個容器中的一張img圖片垂直居中?

7. 用css寫一個三角形

8. 列舉10個以上的h5事件 不是 HTML5

• onblur 當失去焦點時執行指令碼
• onchange 當元素改變時,並失去焦點執行指令碼
• onclick 當點選滑鼠時執行指令碼
• ondrop 當被拖動元素正在被拖放時執行指令碼
• onended 當媒體已抵達結尾時執行指令碼
• onerror 當在元素載入期間發生錯誤時執行指令碼
• onfocus 當獲得焦點時執行指令碼
• oninput 當元素獲得使用者輸入時執行指令碼
• onkeydown 當按下按鍵時執行指令碼(還沒鬆開時就觸發)
• onkeypress 當按下並鬆開時執行指令碼(必須經歷按下、鬆開這一過程才觸發)
• onkeyup 當鬆開按鍵時執行指令碼(鬆開時即觸發)
• onload 當載入時執行指令碼(文件 css 圖片 js)
• onmousedown 當按下滑鼠按鈕時執行指令碼
• onmousemove 當滑鼠指標移動時執行指令碼
• onmouseout 當滑鼠指標移出元素時執行指令碼
• onmouseover 當滑鼠指標移至元素之上時執行指令碼
• onmouseup 當鬆開滑鼠按鈕時執行指令碼

9. 列舉10個以上的input的type屬性值,並寫明其含義

• color：用於指定顏色的控制元件dao
• date：用於輸入日期的控制元件（年，月，日，不包括時間）
• datetime：基於 UTC 時區的日期時間輸入控制元件（時，分，秒及幾分之一秒）
• datetime-local：用於輸入日期時間控制元件，不包含時區
• email：用於編輯 e-mail 的欄位
• month：用於輸入年月的控制元件，不帶時區
• number: 用於輸入浮點數的控制元件
• range：用於輸入不精確值控制元件
• search：用於輸入搜尋字串的單行文字欄位。換行會被從輸入的值中自動移除
• tel：用於輸入電話號碼的控制元件
• time：用於輸入不含時區的時間控制元件
• url：用於編輯URL的欄位
• week：用於輸入一個由星期-年組成的日期，日期不包括時區

10. rem適配方法如何計算HTML根字號及適配方案

• 1. 通用方案：
  • 1. 設定根 font-size: 625%(或其他自定的值，但換算規則 1rem 不能小於 12px)
  • 2. 通過媒體查詢分別設定每個螢幕的根 font-size
  • 3. 直接除以 2 再除以 100 即可換算為 rem。(原理：移動端 瀏覽器根元素預設是 16px，6.25 X 16 = 100，即設定根元素大小為 100px, 通常設計稿會以 750px 的寬度進行設計，所以在換算時，需再除以 2。)

  優： 有一定適用性，換算也較為簡單
  劣： 有相容性的坑，對不同手機適配不是非常精準；需要設定多個媒體查詢來適應不同手機，單某款手機尺寸不在設定範圍之內，會導致無法適配。

• 2. 網易方案：
  • 1、拿到設計稿除以 100，得到寬度 rem 值 x = 7.5
  • 2、通過給 html 的 style 設定 font-size，把 步驟 1 裡面得到的寬度 rem 值代入 x， document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px’;
  • 3、設計稿 px / 100 即可換算為 rem;

  某元素 50px
  1rem iphone6(375) 50px;
  1rem iphone6 plus(414) 55.2;

  設計稿 給的尺寸是: 750px * 1334px

  優：通過動態根 font-size 來做適配，基本無相容性問題，適配較為精準，換算簡便
  劣：無 viewport 縮放，且針對 iPhone 的 Retina 屏沒有做適配，導致對一些手機的適配不是很到位

• 3. 手淘方案：
  • 1、拿到設計稿除以 10，得到 font-size 基準值
  • 2、引入 flexible
  • 3、不要設定 meta 的 viewport 縮放值
  • 4、設計稿 px/ font-size 基準值，即可換算為 rem

  優：通過動態根 font-size、viewpor、dpr 來做適配，無相容性問題，適配精準。
  劣：需要根據設計稿進行基準值換算，在不使用 sublime text 編輯器外掛開發時，單位計算複雜

2020.12.19 作業題 1 ~ 10題 end

11. CSS中link和@import的區別?

css解析從右往左解析
css 層級結構不要寫太深
原則上是不要超過三層, 層越多解析越慢, 頁面效能就越不好

文件在瀏覽器中解析過程
檔案下載結束 => CSSTree + domTree => CSSTree 和 domTree合併成一個tree => layout(佈局) => paint(繪製)

// 儘量避免下面層級過多及用大量標籤來選擇元素
.container > .box > p > span > i {
}

• 適用範圍不同

  • @import可以在網頁頁面中使用，也可以在CSS檔案中使用，用來將多個 CSS檔案引入到一個CSS檔案中；而link只能將CSS檔案引入到網頁頁面中

• 功能範圍不同

  • link屬於XHTML標籤，而@import是CSS提供的一種方式，link標籤除了可以載入CSS外，還可以定義RSS（定義到達專案的超連結），定義rel連線屬性等，@import就只能載入CSS

• 載入順序不同

  • 當一個頁面被載入的時候，link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯

• 相容性

  • 由於@import是css2.1提出的，所以老的瀏覽器不支援，@import只有在IE5以上的才能識別，而link標籤無此問題

• 控制樣式時的差別

  • 使用link方式可以讓使用者切換CSS樣式.現代瀏覽器如Firefox,Opera,Safari 都支援rel=”alternate stylesheet”屬性(即可在瀏覽器上選擇不同 的風格),當然你還可以使用Javascript使得IE也支援使用者更換樣式

• 權重區別

  • link引入的樣式權重大於@import引入的樣式
  xml裡面用的(瞭解)

12. display: none 與 visibility: hidden的區別

• display:none 的元素不佔據原來的位置， 會導致迴流。

• visibility：hidden 的元素仍會佔據原來的位置，只是在頁面不顯示，會導致重繪。

• 概念補充：

  • 重繪: 當元素的一部分屬性發生改變，如外觀、背景、顏色等不會引起佈局變化，只需要瀏覽器根據元素的新屬性重新繪製，使元素呈現新的外觀叫做重繪。
  • 迴流: 當render樹中的一部分或者全部因為大小邊距等問題發生改變而需要DOM樹重新計算的過程（最耗費效能）

重繪不一定需要重排（比如顏色的改變），重排必然導致重繪（比如改變網頁位置）

13. 什麼會導致元素浮動? 浮動元素會引起什麼問題? 如何清除浮動?

• 浮動定位將元素排除在普通流之外，即元素講脫離文件流，不佔據空間。浮動元素碰到含它的邊框或者浮動元素的邊框停留

• 浮動帶來的主要問題： 父元素的高度無法被撐開，影響與父元素同級的元素

• 如何清除浮動：

  1、使用CSS中的clear:both;（放一個空的div，並設定上述css）
  2、給父元素新增clearfix樣式：
  .clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
  .clearfix{display: inline-block;} /* for IE/Mac */

14. 如何解決 margin ‘塌陷’?

• 外邊距塌陷共有兩種情況：
  • 兩個同級元素，垂直排列，上面的盒子給margin-bottom 下面的盒子給margin-top，那麼他們兩個的間距會重疊，以大的那個計算
  • 兩個父子元素，內部的盒子給margin-top，其父級也會受到影響，同時產生上邊距，父子元素會進行粘連，決絕這種情況的方法為：父級新增一個css屬性，overflow： hidden，禁止超出
  • 解決方案：
    • 1、為父盒子設定border，為外層新增border後父子盒子就不是真正意義上的貼合 （可以設定成透明：border：1px solid transparent）。
    • 2、為父盒子新增overflow：hidden；
    • 3、為父盒子設定padding值；
    • 4、為父盒子新增position：fixed；
    • 5、為父盒子新增 display：table；
    • 6、利用偽元素給子元素的前面新增一個空元素
    • .son:before{ content:""; overflow:hidden; }

15. img的 alt 和 title 有啥區別, 圖片懶載入的原理

• alt 是圖片載入失敗時，顯示在網頁上的替代文字； title 是滑鼠放上面時顯示的文字,title
  是對圖片的描述與進一步說明;

• 嚴格上講，alt是img必要的屬性，而title不是

• 對於網站seo優化來說，搜尋引擎對圖片意思的判斷，主要是靠alt屬性

• 懶載入原理： (應用場景: 大量的圖片列表,初始化顯示一屏多)

  • 先設定圖片的data-set屬性值為其圖片路徑，由於不是src，然後我們計算出頁面scrollTop的高度和瀏覽器的高度之和， 如果圖片舉例頁面頂端的座標Y（相對於整個頁面，而不是瀏覽器視窗）小於前兩者之和，就說明圖片就要顯示出來了，這時候我們再將 data-set 屬性替換為 src 屬性即可，這個時候再去請求圖片資源。
    

  var arr = [‘https://500px.com.cn/community/photo-details/500px1026448044’, ‘https://500px.com.cn/community/photo-details/500px1026448044’];

• 瀑布流佈局

• 預載入
  提前把圖片載入好, 放在快取資料列表內
  提高使用者體驗
  new Image()

• 作業要求: 實現一個圖片懶載入的案例和 一個圖片預載入的案例

• 瞭解下按需載入的概念

16. BFC是什麼? (據說是高薪必問)

• block formatting context (塊級格式化上下文)，是一個獨立的渲染區域

• 佈局規則：

  • 內部的box會在垂直方向，一個接一個地放置
  • box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊
  • 每一個元素的margin的盒子，與包含邊框的盒子的左邊相接觸
  • BFC的區域不會與浮動的盒子重疊
  • BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素
  • 計算BFC的高度時，浮動元素也參與計算

• 哪些元素會生成BFC

  • float屬性值不為 none
  • position屬性值為 absolute 或 fixed
  • display為 inline-block table-cell table-caption(此元素會作為一個表格標題顯示) flex等

17. style標籤寫在body後與body前有什麼區別?

資源載入進來 => CSSDOM + DOM => render tree(css html合成一個tre，然後渲染) => layout => paint

• 由於瀏覽器以逐行方式對html文件進行解析；
• 當解析到寫在尾部的樣式表（外聯或寫在style標籤）會導致瀏覽器停止之前的渲染，等待
• 載入且解析樣式表完成之後重新渲染；
• k在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）；

18. 如何用css在chrome(PC端)中輸出小於12px的字型大小(chrome PC端 預設最小字型是12px)

針對谷歌瀏覽器核心，加webkit字首，用 transform:scale() 這個屬性進行縮放

19. 雪碧圖(精靈圖)是如何使用的,它的優缺點?

• 使用：

  • 是把網站上用到的一些小圖片(如小圖示之類的)整合到一張單獨的較大圖片中，通過背景定位的方式，顯示當前所需要的小圖片

• 優點：

  • 1、減少網頁的http請求，從而加快了網頁載入速度，提高使用者體驗
  • 2、減少圖片的體積，因為每個圖片都有一個頭部資訊，把多個圖片放到一個圖片裡，就會 共用同一個頭資訊，從而減少了位元組數
  • 3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名
  • 4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變

• 缺點：

  • 1、在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂
  • 2、CSS Sprites在開發的時候，要通過photoshop或其他工具測量計算每一個背景單元的精確位置
  • 3、在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片
  • 4、精靈圖不能隨意改變大小和顏色。改變大小會失真模糊，降低使用者體驗，CSS3新屬性可以改變精靈圖顏色，但是比較麻煩，並且新屬性有相容問題

  現在一般用 字型圖示 代替 精靈圖

20. CSS中選擇器的優先順序以及CSS權重如何計算?

!important > 行內樣式(1000) > ID選擇器(100) > 類、屬性和偽類選擇器(10) > 標籤和偽元素選擇器(1) > 萬用字元

例項： div#app.child[name=“appName”]
權重: 1+100+10+10 = 121

• 偽類選擇器 只有一個冒號，作用是：用於向某些選擇器新增一些特殊的效果
  常見的有： a:hover a:link a:visited a:active; :first-child :last-child :nth-child()

• 偽元素選擇器 表示元素中的一些特殊的位置，常見的有：
  fist-line first-letter before after placeholder selection(選中文字的樣式)