1.頁面佈局練習

高度已知，寫出三欄佈局，其中左欄、右欄寬度各為300px 中間自適應

• 浮動 缺點：需要處理清除浮動
• 絕對定位 缺點：佈局脫離文件流
• flex 缺點：相容性
• 表格佈局 缺點：一欄超出高度，其他跟著超出

• 網格佈局：相容性

  高度未知的情況下，只有flex和表格佈局試用

2.css盒模型

• 基本概念
  
  • 標準模型+IE模型
• 區別： 寬高計算不同， padding border是否計算
• css如何設定這兩種模型 （box-sizing)
• js 如何獲取盒模型的寬高
  
  • dom.style.width/height(內聯節點)
  • dom.currentStyle.width/height(IE支援)
  • window.getComputedStyle(dom).height/width
  • dom.getBoundingClientRect().width/height 計算絕對位置，相對視窗

• 根據盒模型解釋邊距重疊

  • 父子重合：根據父級盒模型確定（overflow:hidden 建立BFC)
  • 兄弟重合： 取最大值
  • 空元素：margin-top margin-bottom 取一個最大值

• BFC

  • 塊級格式化上下文

  • 原理：

    1. 元素垂直方向上邊距會發生重疊
    2. Bfc 元素區域不會與浮動元素區域發生重合
    3. BFC 元素在頁面上是獨立的容器，裡外不會互相影響
    4. 計算BFC高度，浮動元素也會參與計算

  • 如何建立BFC:

    1. 浮動
    2. overflow:hidden auto
    3. position不為static relative
    4. display: inline-block, table-cell table