天天看點
傳回

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

CSS-盒模型知識整理與了解：

CSS盒模型知識整理與了解（1）--- 基本概念

CSS盒模型知識整理與了解（2）--- 邊距重疊問題詳解

CSS-盒模型知識整理與了解（3）--- BFC詳解

CSS盒模型知識整理與了解 --- 盒模型的基本概念

本文涉及知識：

  1. 盒模型的概念
  2. 标準模型和IE盒模型的差別
  3. JS擷取盒模型寬高的方法
  4. 盒模型的邊距重疊問題
  5. BFC的了解（概念、原理、如何建立、使用場景）

CSS盒模型的概念

CSS盒模型(box model),它是包含了内容(content)、内邊距(padding)、邊框(border)、外邊距(margin)屬性的一個盒子模型。

而盒模型又分為兩類标準：标準盒子模型和IE盒子模型（怪異盒子模型）

标準盒模型

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

CSS3中加入了新的屬性box-sizing，可以通過設定box-sizing屬性來改變盒模型标準

在浏覽器預設的盒模型是content-box

box-sizing: content-box(預設);

IE盒模型

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

IE盒子模型，也稱為怪異盒子模型

可以通過box-sizing來設定此标準

box-sizing: border-box;

标準盒子模型和IE盒子模型的差別

從上面的盒子模型的圖檔展示，可以清晰的看到

在标準盒子模型中，盒子的width是指content的寬高，

而IE盒子模型中就比較怪異了，它包含了content、border和padding的距離。

即它們的主要差別在于width和height的計算方式的不同。

标準盒子模型：盒子的總寬度 = margin+border+padding+width

                                width      = content的寬度

 IE 盒子模型  :  盒子的總寬度 = margin+width

                                width      = content的寬度+border邊框寬度(左右)+padding内邊距(左右)                    

高度計算同理

差別例子展示

我們設定了兩個盒子,設定了它們的width、height都為200px

<style>
    html *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 200px;
      border: 10px solid #000;
      padding: 10px;
    }
    #ie-box{
      box-sizing: border-box;
    }
  </style>

  <div id="w3c-box">
    content
  </div>
  <div id="ie-box">
    content
  </div>
CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

标準盒子模型：打開控制台，可以看見标準盒模型的width為content内容的寬度200px（高度同理）

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

IE盒子模型：打開控制台，可以看到我們設定了width是200px，此處設定的已經不再是content内容區了，

而設定的width = content的寬度+ padding左右寬度+border左右寬度

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

JS擷取寬高的方法

方法1：dom.style.width/height

此方法隻可以取到行内樣式，而取不到内部樣式表或者外部樣式表設定的width

例如一下例子，可以取到w3cbox設定的width

<div id="w3c-box" style="width:300px">
    content
 </div>
<script>
    var w3c = document.getElementById('w3c-box');
    var ie = document.getElementById('ie-box');
    // 方法1： dom.style.width/height
    console.log(w3c.style.width);
</script>
CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解
而如果我們用内部樣式表或者外部樣式表 
<style>
    #w3c-box{ width: 300px };
</style>
<div id="w3c-box">
    content
 </div>
<script>
    var w3c = document.getElementById('w3c-box');
    var ie = document.getElementById('ie-box');
    // 方法1： dom.style.width/height
    console.log('width:'+ w3c.style.width);
</script>
CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

我們無法擷取到width的值。

那麼我們有什麼辦法可以擷取到樣式表中的width和height呢？

方法2: dom.currentStyle.width/height

但是此方法僅僅相容IE，其他浏覽器都不可以使用該屬性，微軟旗下的Microsoft Edge浏覽器同樣不相容

例子展示

<style>
#w3c-box{
      width:300px;
}
<style>

<div id="w3c-box">
    content
</div>

<script>
var w3c = document.getElementById('w3c-box');
var ie = document.getElementById('ie-box');
// 方法2： dom.currentStyle['width/height']
 console.log(w3c.currentStyle['width']);
</script>
在IE浏覽器中
CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解
而在其他浏覽器，currentStyle這個對象為undefined

方法3：window.getComputedStyle(dom).width/height

getComputedStyle()用于擷取CSS計算後的屬性值

擷取

console.log('w3c_width='+window.getComindoputedStyle(w3c).width);
此方法相容IE9+以及其他浏覽器，擁有者良好的及相容性，普遍通用的方法。

方法4：dom.getBoundingClientRect().width/height

getBoundingClientRect()

擷取元素相對于視窗的位置的集合

傳回值有 top、left、width、height

相容性更好，可以相容IE5、firefox2以上的浏覽器

但是在擷取标準盒模型的寬高的時候會加上border和padding的寬度，例如怪異盒模型

CSS-盒模型知識整理與了解

本文涉及知識：

  1. 盒模型的概念
  2. 标準模型和IE盒模型的差別
  3. JS擷取盒模型寬高的方法
  4. 盒模型的邊距重疊問題
  5. BFC的了解（概念、原理、如何建立、使用場景）

CSS盒模型的概念

CSS盒模型(box model),它是包含了内容(content)、内邊距(padding)、邊框(border)、外邊距(margin)屬性的一個盒子模型。

而盒模型又分為兩類标準：标準盒子模型和IE盒子模型（怪異盒子模型）

标準盒模型

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

CSS3中加入了新的屬性box-sizing，可以通過設定box-sizing屬性來改變盒模型标準

在浏覽器預設的盒模型是content-box

box-sizing: content-box(預設);

IE盒模型

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

IE盒子模型，也稱為怪異盒子模型

可以通過box-sizing來設定此标準

box-sizing: border-box;

标準盒子模型和IE盒子模型的差別

從上面的盒子模型的圖檔展示，可以清晰的看到

在标準盒子模型中，盒子的width是指content的寬高，

而IE盒子模型中就比較怪異了，它包含了content、border和padding的距離。

即它們的主要差別在于width和height的計算方式的不同。

标準盒子模型：盒子的總寬度 = margin+border+padding+width

                                width      = content的寬度

 IE 盒子模型  :  盒子的總寬度 = margin+width

                                width      = content的寬度+border邊框寬度(左右)+padding内邊距(左右)                    

高度計算同理

差別例子展示

我們設定了兩個盒子,設定了它們的width、height都為200px

<style>
    html *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 200px;
      border: 10px solid #000;
      padding: 10px;
    }
    #ie-box{
      box-sizing: border-box;
    }
  </style>

  <div id="w3c-box">
    content
  </div>
  <div id="ie-box">
    content
  </div>
CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

标準盒子模型：打開控制台，可以看見标準盒模型的width為content内容的寬度200px（高度同理）

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

IE盒子模型：打開控制台，可以看到我們設定了width是200px，此處設定的已經不再是content内容區了，

而設定的width = content的寬度+ padding左右寬度+border左右寬度

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

JS擷取寬高的方法

方法1：dom.style.width/height

此方法隻可以取到行内樣式，而取不到内部樣式表或者外部樣式表設定的width

例如一下例子，可以取到w3cbox設定的width

<div id="w3c-box" style="width:300px">
    content
 </div>
<script>
    var w3c = document.getElementById('w3c-box');
    var ie = document.getElementById('ie-box');
    // 方法1： dom.style.width/height
    console.log(w3c.style.width);
</script>
CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解
而如果我們用内部樣式表或者外部樣式表 
<style>
    #w3c-box{ width: 300px };
</style>
<div id="w3c-box">
    content
 </div>
<script>
    var w3c = document.getElementById('w3c-box');
    var ie = document.getElementById('ie-box');
    // 方法1： dom.style.width/height
    console.log('width:'+ w3c.style.width);
</script>
CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

我們無法擷取到width的值。

那麼我們有什麼辦法可以擷取到樣式表中的width和height呢？

方法2: dom.currentStyle.width/height

但是此方法僅僅相容IE，其他浏覽器都不可以使用該屬性，微軟旗下的Microsoft Edge浏覽器同樣不相容

例子展示

<style>
#w3c-box{
      width:300px;
}
<style>

<div id="w3c-box">
    content
</div>

<script>
var w3c = document.getElementById('w3c-box');
var ie = document.getElementById('ie-box');
// 方法2： dom.currentStyle['width/height']
 console.log(w3c.currentStyle['width']);
</script>
在IE浏覽器中
CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解
而在其他浏覽器，currentStyle這個對象為undefined

方法3：window.getComputedStyle(dom).width/height

getComputedStyle()用于擷取CSS計算後的屬性值

擷取

console.log('w3c_width='+window.getComindoputedStyle(w3c).width);
此方法相容IE9+以及其他浏覽器，擁有者良好的及相容性，普遍通用的方法。

方法4：dom.getBoundingClientRect().width/height

getBoundingClientRect()

擷取元素相對于視窗的位置的集合

傳回值有 top、left、right、bottom、width、height

相容性好，可以相容IE5+、firefox2以上的浏覽器

注意：此處擷取的width類似于怪異盒子會包括border和padding的距離。

但是在擷取标準盒模型的寬高的時候會加上border和padding的寬度，例如怪異盒模型

CSS盒模型知識整理與了解（1）--- 基本概念 CSS盒模型知識整理與了解 --- 盒模型的基本概念CSS-盒模型知識整理與了解

擷取到了340px

而設定了IE的标準和模型則正确得擷取了width

邊界重疊詳細解析：CSS盒模型知識整理與了解（2）--- 邊距重疊問題詳解

BFC詳細解析：CSS-盒模型知識整理與了解（3）--- BFC詳解

本文為個人學習筆記，如有錯誤歡迎留言指正，謝謝！

css 盒模型 标準盒模型 IE盒模型
上一篇: Unity C# CSV檔案解析與加載（已更新移動端處理方式）
下一篇: Unity C# File類 本地資料儲存和遊戲存檔

繼續閱讀