如何理解 HTML 語義化

1. 語義化的特點：增加代碼可讀性

2. 對於搜尋引擎利於分析標籤和內容（SEO）

塊狀元素與內聯元素

1. display: block/ table，有 div, h1, h2, table, ul, ol, p

2. display: inline/ inline-block，有 span, input, button, img 等等

盒模型的寬度怎麼計算？

假如題目問某個 <div> 的 offsetWidth 是多大？

要先知道 offsetWidth 是什麼？

offsetWidth = (內容寬度 + 內邊距 + 邊框) , 無外邊距

也就是 width + padding + border

box-sizing: border-box 意思是內容寬度包含到 border ，透過 width 設定總寬度

margin 縱向重疊問題

相鄰元素的 margin-top 和 margin-bottom 會發生重疊

空內容的 <p> 標籤也會發生重疊

margin-top: 10px;

margin-bottom: 15px;

答案：15px

margin 負值問題

• margin-top 和 margin-left 負值，元素向上、向左移動

• margin-right 為負值的話，右側元素左移，自身不影響 （ 假設 A , B 兩元素左右並排）

什麼是 BFC?

• Block format Context，塊級格式上下文

• 獨立渲染區域，內部元素渲染不會影響邊界之外的元素

形成 BFC 的常見條件？

• float 不是 none

• position 是 absolute 或是 fixed

• overflow 不是 visible

• display 是 flex, inline-block 等等

常見的使用？

• 清除浮動

Float 佈局

如何實現佈局和雙飛翼佈局

佈局的目的

• 三欄佈局，中間欄位最先加載和渲染（內容最重要）

• 兩側內容寬度固定，中間隨著螢幕寬度自適應

• 一般用在 PC 網頁

手寫 clearfix

.clearfix: after {
    content:'';
    display: table;
    clear: both;
}

技術總結

• 使用 float

• 兩側使用 margin 負值，以便和中間內容橫向重疊

• 防止中間內容被兩側覆蓋，一個用 padding 一個用 margin

居中對齊的實現方式

水平居中

• inline： text-align: center

• block 元素：margin: auto

• absolute 元素： left: 50% + margin-left: 負值

垂直居中

• inline 元素： line-height 的值等於 height 值

• absolute 元素：top: 50% + margin-top 負值

• absolute 元素： transform(-50%, -50%)+ position: absolute + left: 50% + top: 50% (要有父元素 position: relative )

• absolute 元素：position: absolute + top, left, right, bottom = 0 + margin: auto (要有父元素 position: relative )

圖文樣式

不會問太多，不用花太多時間

• line-height 如何繼承？

  <p> 會繼承父元素的 line-height 高度

  如果父元素的 line-height 是以下幾種狀況

  1. 寫具體數值，如 30px，則繼承數值

  2. 寫比例，如 2 / 1.5，則繼承比例

     
      .body {
          font-size: 20px;
          line-height: 1.5;
      }
     
      .p {
          font-size: 12px;
     
      }
     
      /* line-height = 12px * 1.5 = 24px */
     

  3. 寫百分比，比如 200%，則繼承計算出來的

     
      .body {
          font-size: 20px;
          line-height: 200%;
      }
     
      .p {
          font-size: 12px;
     
      }
     
      /* line-height = 20px * 200% = 40px */
     

CSS 響應式

rem 是什麼？

rem 是一個長度單位

• px，絕對長度單位

• em，相對長度單位，相對於父元素

• rem，相對長度單為，相對於根元素，常用於響應式佈局

響應式佈局的常用方案

• media-query，根據不同螢幕寬度設置 font-size

CSS 響應式 - vw/vh

• rem 的弊端：階梯性 不同尺寸範圍內設定大小

• 網頁可視尺寸 window.screen.height 螢幕高度 window.innerHeight 網頁可視高度：去除 header/ footer之外，顯示網頁內容的高度 document.body.clientHeight body 高度

• vh 網頁可視高度的 1/100

• vw 網頁可視寬度的 1/100

• vmax 取兩者最大值；vmin 取兩者最小值