前端開發必會的HTML/CSS硬知識

文/小魔女

1 本文簡介

• 面試大廠,HTML/CSS,JS,網絡基礎這三塊硬知識是必不可少的
• 我整理了一些備考筆記，分享給你們
• 初中級前端到高級前端的蛻變，從基礎知識開始~
• 分享小魔女的音樂

2 塊元素和行元素

2.1 請說出3個H5新增的塊元素，並介紹他們的應用場景

• aside:表示article元素內容以外，與article元素內容相關的輔助信息
• figure:表明一個塊級圖像，包含說明。figure添加標題時，與figcaption元素結合使用。
• dialog:表示幾我的直接的對話。與dt和dd元素結合使用，dt表示講話者，dd表示講話內容。

2.2 行內元素和塊元素的區別

• HTML元素分爲行內、塊狀、行內塊元素三種。

• 塊元素和行內塊元素能夠設置寬高

• 行內元素不能夠，高度由內容撐開

• 三者是能夠經過display屬性任意轉換的

  • block 塊狀元素 inline-block行內塊元素 inline 行內元素

2.3 塊級元素特徵

• 能夠設置寬高
• 設置margin、padding的上下左右都有效
• 元素獨佔一行
• 多個塊狀元素一塊兒寫，默認排列從上至下

2.4 行內塊元素特徵

• 能設置寬高
• 不會自動換行
• 多個行內塊一塊兒寫，默認從左至右排列

2.5 行內元素特徵

• 設置寬高無效
• 設置margin的上下無效，左右有效，設置padding上下左右都有效（而且會撐大空間）
• 不會自動換行

3 CSS

3.1 請說出3個CSS瀏覽器前綴

1. -ms- 兼容IE瀏覽器
2. -moz- 兼容firefox
3. -o- 兼容opera
4. -webkit- 兼容chrome和safari

使用demo

div {
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
複製代碼

「CSS前綴自動補全：autoprefixer」

3.2 盒模型

1. 盒模型分爲標準盒模型和怪異盒模型(IE5.X和6)兩種
2. 標準盒模型 width = content
3. 怪異盒模型 width = content + padding + border

❝已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;❞

標準盒模型:
1\. 佔用寬:
margin*2+padding*2+border*2+width
= 20*2+10*2+10*2+200 = 280
2\. 佔用高:
margin*2+padding*2+border*2+height
= 20*2+10*2+10*2+50 = 130
3\. 盒子實際寬度:
padding*2+border*2+width
= 10*2+10*2+200 = 240
4\. 盒子實際高度
padding*2+border*2+height
= 10*2+10*2+50 = 90
複製代碼

怪異盒模型:
1\. 佔用寬:
margin*2+width
= 20*2+200 = 240
2\. 佔用高:
margin*2+height
= 20*2+50 = 90
3\. 盒子實際寬度:
width = 200
4\. 盒子實際高度
height = 50
複製代碼

「IE8及更早版本不兼容問題解決方案：在HTML頁面聲明 」

3.3 box-sizing都有哪些值？他們的寬高分別如何計算？

1. content-box(標準盒模型)|border-box(怪異盒模型)|inherit(繼承父元素)
2. content-box的寬高由content決定
3. border-box的寬高由content+padding+border決定

4. BFC

4.1 什麼是邊界塌陷（或邊界重疊）？

1. 兄弟div（上下margin塌陷）
2. 父子div（若是父級div沒有padding\border\inlinecontent, 子級div的margin會向上查找邊界塌陷的div，直到找到某個標籤包括border\padding\inline content的其中一個，而後按此div進行margin）

4.2 什麼是BFC（格式化上下文）？如何實現？

❝BFC（塊狀格式化上下文，獨立的盒子，佈局不受外部影響，可是若是同一個BFC中，同級塊狀元素的margin-top和margin-bottom會重疊）❞

只要元素知足下面的任一條件，都會觸發BFC特徵。

1. body根元素
2. position: fixed|absolute(絕對定位元素)
3. float(浮動元素) 除了none
4. overflow: hidden|auto|scroll (除了visible以外的值)
5. display: inline-block\ table-cells\flex （具備table-的屬性）

解決問題:

1. 解決邊界塌陷問題
2. 解決浮動元素致使父元素高度塌陷問題
3. 解決阻止元素被浮動元素覆蓋問題

4.3 多個inline元素之間會有空隙，爲何？如何解決？

❝元素被當成行內元素排版時，元素直接的空白符會被瀏覽器處理，根據white-spack的處理方式（默認是normal,合併多餘空白），Html代碼在回車換行時被轉成一個空白符，在字體不爲0的狀況下，空白符佔據必定寬度，因此inline-block元素之間就出現了空隙。❞

復現
<ul>
  <li>首頁</li>
  <li>登錄</li>
  <li>資源</li>
  <li>社區</li>
  <li>幫助</li>
</ul>
複製代碼

解決辦法：

1. 多個inline元素寫在同一行
2. 將父級元素的font-size:0
3. 給inline元素添加float的樣式
4. 設置子元素的margin爲負值
5. 設置父元素display:table和word-spacing:-1em

5 浮動

5.1 浮動會出現什麼問題？

• 浮動會致使父元素高度塌陷
• 會覆蓋其餘元素

5.2 如何清除浮動？

• 父元素加上overflow:hidden
• 在浮動元素的後面（同級），添加一個div，屬性是clear:both
• 在父元素添加一個僞元素

  .clearfix:after { display: block; height: 0; visibility: hidden; clear: both; content: ''; }

  .clearfix{ //IE6模式下 zoom:1; }

• 在父元素添加雙僞元素

  .clearfix:before, .clearfix:after { display: table; content: ''; } .clearfix:after { clear: both; } .clearfix { zoom: 1; //兼容IE6下 }

6 position都有哪些值？

• relative 相對定位 （相對元素在文檔中的初始位置定位）
• absolute絕對定位（相對於定位元素定位，最頂級是body）
• fixed 固定定位 （相對窗口定位）
• static 文檔流

7 CSS的選擇器

7.1 CSS的選擇器有哪些？

• id 選擇器
• class 選擇器
• tag 選擇器
• 屬性 選擇器（a[href=""] ）
• 派生 選擇器

7.2 優先級高低如何判斷？

• 不一樣級優先級：

  • ！important>內聯>id>class = 屬性 = 僞類 >標籤 = 僞元素 > 通配符（*）

• 同一級別：

  • 後來居上 （後寫覆蓋先寫）
  • 內聯樣式 > 內部樣式表 > 外部樣式表 > 導入樣式 @import

「優先級相同時會發生什麼? 樣式被覆蓋」

7.3 列舉幾條經常使用的CSS reset

• *{ margin:0; padding:0;}
• ol, ul { list-style:none;}
• body {line-height:1;}

7.4 是否瞭解normalize？

「normalize.css是一個css reset的替代方案。」

• 保護有用的瀏覽器默認樣式而不是徹底去掉
• 通常化樣式：爲大部分html元素提供
• 修復瀏覽器自身的bug
• 優化css可用性
• 解釋代碼

7.5 如何作到一個list中奇數和偶數行的背景色不同？

ul>li:nth-child(2n+1) {
    background-color: red;
 }

ul>li:nth-child(2n) {
    background-color: yellow;
}
複製代碼

7.6 如何作到一個list的第一行沒有上邊框？

ul>li:first-child {
      border-top: none;
  }
複製代碼

魔女有話說

• 有夢想的人，眼睛會發光。
• 但願屏幕前的你，可以關注我一波。接下來，我會分享前端各類乾貨，以及生活中的竅門。
• 小魔女將會陪你們笑看人生。

本文使用 mdnice 排版