盒子模型有幾種?區別在哪?

2021-10-05 03:01:04 字數 424 閱讀 4479

給乙個標籤新增:box-sizing:content-

box;

(元素預設)

這個標籤就轉換為了w3c盒模型

標籤得實際寬度 = 設定的寬度 + border寬度 + padding的寬度

給乙個標籤新增:box-sizing:border-box;

這個標籤就轉換為了怪異盒模型

標籤得實際寬度 = 設定的寬度

如果設定了padding和border就是從設定的實際寬高中減去,減去後才是內容的寬高。

主要區別:對於寬高的定義不同

w3c盒模型:設定的寬度就等於內容的寬度

怪異盒模型:內容的寬度 = 設定的寬度 - border的寬度 - padding的寬度

標準盒子模型和IE盒子模型的區別

盒子模型是css中很重要的乙個概念,裡面包含了內容 content 內邊距 padding 邊框 border 外邊距 margin 標準盒子模型 box sizing content box 盒子的內容不包括padding和border,那麼盒子的width content。比如你給乙個盒子100...

標準盒子模型和IE盒子模型的區別

css盒子模型 又稱為框模型 box model 包含了元素內容 content 內邊距 padding 邊框 border 外邊距 margin 幾個要素。圖中的內層是content依次是padding border margin,如下圖 w3c 盒子模型的範圍包括 margin border p...

CSS 標準盒子模型和怪異盒子模型的區別

一 什麼是盒子模型 box model 盒子想必大家都是知道的吧!生活中我們的快遞有盒子包裝著,買的蛋糕也是有盒子包裝著,我們的禮品也是被盒子包裝著。模型是什麼呢?它是主觀意識借助實體或者虛擬表現構成客觀闡述形態結構的一種表達目的的物件 css中的盒子模型它是可以對元素進行布局,設定距離的大小,這裡...