一些概念2(私人筆記)

宮商角徵羽發表於2019-03-18
筆記

盒模型

頁面渲染時，dom 元素所採用的 佈局模型。可通過 box-sizing 進行設定。主要分為 標準盒模型 與 IE盒模型。

根據計算寬高的區域可分為：

  • content-box (W3C 標準盒模型)
  • border-box (IE 盒模型)
  • padding-box (僅Firefox實現過，後來已廢除)
  • margin-box (瀏覽器未實現)
<div class = 'box'><div>

.box {
    width:200px;
    height:100px;
    border:1px solid red;
    padding: 10px;
    margin:20px;
    box-sizing: ···;
}
複製程式碼

以上面的box為例，在標準盒模型(box-sizing: content-box)下，整個div寬度為：200 + (1 + 10 + 20) * 2 = 262px; 內容部分content寬度為200px;

在IE盒模型(box-sizing: border-box)下，整個div寬度為：200 + 20 * 2 = 240px; 內容部分content寬度為200 - (1 + 10) * 2 = 178px。

BFC

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的視覺化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素互動的區域。

下列常見的方式會建立塊格式化上下文：

根元素或包含根元素的元素

  • 浮動元素（元素的 float 不是 none）
  • 絕對定位元素（元素的 position 為 absolute 或 fixed）
  • 行內塊元素（元素的 display 為 inline-block）
  • overflow 值不為 visible 的塊元素
  • display 值為 flow-root 的元素
  • 彈性元素（display為 flex 或 inline-flex元素的直接子元素）

塊格式化上下文包含建立它的元素內部的所有內容。

作用：

  1. 讓浮動內容和周圍的內容等高
  2. 外邊距塌陷(防止兩個元素上下margin合併)

link 與 @import 的區別

  • link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用於載入 css
  • 當解析到link時，頁面會同步載入所引的 css，而@import所引用的 css 會等到頁面載入完才被載入
  • @import需要 IE5 以上才能使用，link可以使用 js 動態引入，@import不行

相關文章