# Html 元素、css 佈局

## 如何理解 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` = (內容寬度 + 內邊距 + 邊框) , 無外邊距

也就是 **<mark>width</mark>** + **<mark>padding</mark>** + **<mark>border</mark>**

`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`

```css
.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，則繼承比例
        
        ```css
        
        .body {
        	font-size: 20px;
        	line-height: 1.5;
        }
        
        .p {
        	font-size: 12px;
        
        }
        
        /* line-height = 12px * 1.5 = 24px */
        ```
        
    3. 寫百分比，比如 200%，則繼承計算出來的
        
        ```css
        
        .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 取兩者最小值