盒模型的一些碎碎念

2022-08-05 12:51:19 字數 1733 閱讀 9507

作為前端人員,盒模型是最基礎的知識點,在排版與佈局時不可避免與盒模型打交道。

在我們編寫html時,網頁上的內容幾乎都是被包在一個個元素(當然也可以叫做標籤)中的,最常見的有div、span、a、img等等。雖然標籤的個數很多樣,但是總的來說可以把元素分為三種

在具體講總結盒模型前,先簡單的介紹一下這幾種元素各自的特性。

在css中我們經常聽到的一個詞叫做“文件流”,那麼到底什麼是文件流呢?“流”實際上就是css中的一種基本的定位和佈局機制。上述所說的三種元素當然要遵守一定的佈局機制啦,具體來說:

塊狀元素:典型代表div

行內元素:典型代表span

當對一個文件進行佈局的時候,瀏覽器渲染引擎會根據css-box模型將所有元素表示為一個矩形盒子,在css中會通過盒模型去描述這些矩形盒子————元素所佔空間的內容。

那麼盒子裡到底有什麼呢,如下圖所示:

對於一個盒子來說它由四個部分組成:其中margin叫做外邊距,border叫做邊框,padding叫做內邊距,content叫做內容區域

細分一點,margin它可以分為margin-left,margin-right,margin-top和margin-bottom。同理border和padding也有這樣的屬性。

盒子出來了,自然要計算它的大小,但是但是,又有么蛾子了,在計算大小的時候有兩套不同的標準,

也就是有兩種盒模型

自然不同的盒子模型會有不同的計算方式

在w3c標準模式下:一個盒子的空間佔有寬度=content width + padding + border + margin

在ie怪異盒模型:一個盒子的空間佔有寬度=width(padding和border被包含在內了) + margin

高度可以同理計算

由於存在以上的計算方法:

在css的標準盒模型中,width和height指的是內容區域的寬度和高度。

增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加整個盒子的大小。這個特點其實有的時候有點討厭的————我們可以通過設定box-sizing(css3新增屬性)來改變盒子被撐大。

那麼box-sizing到底是什麼呢?在mdn中有這樣的解釋說明:

該屬性用於更改用於計算元素寬度和高度的預設的 css 盒子模型。可以使用此屬性來模擬不正確支援css盒子模型規範的瀏覽器的行為。

在標準盒模型中,你設定一個元素的 width 與 height只會應用到這個元素的內容區。如果這個元素有border或padding,當我們在調整一個元素的寬度或高度時需要時刻注意這個元素的邊框和內邊距,也就上面講的會被撐大。當我們在實現響應式佈局時候,這個特點尤為煩人。

box-sizing屬性的預設值為content-box,也就是標準盒模型。

box-sizing另外一個屬性值border-box指的就是ie盒模型。

瞭解盒模型的計算方式是非常重要的,現在的網頁,尤其是移動端的頁面,需要適應於不同的螢幕大小~~~

此外,如果在ie6,7,8中doctype缺失也會觸發ie模式。

1.張鑫旭-鑫空間-鑫生活

2.mdn-web技術文件

新年之前的碎念

上一次參加這個晚會還是 2017 跨 2018,初二的時候。很感慨。三年發生了很多事,認識了很多人,有很多精彩,也有很多遺憾。 很難想象,那...

絮語 工作四年的碎碎念

掐指一算,工作的第四個年頭了,也已經是第三份工作了。 從第一份工作開始,就在使用c 語言,從事石油行業繪圖以及資料共享 管理軟體的開發,wi...

一些零碎的東西

可以說。國內幾大bsp提供的blog service都是一團糟! 難道就不能有幾個好一點點的designer和好一點的template啊,c...