盒模型的一些碎碎念

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

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

在我們編寫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技術文件

一些碎碎念

一般分兩步,第一步,一般會在middleware 中統一進行,會和登陸耦合在一起 具體是使用者首先通過使用者名稱密碼證明自己的身份,然後獲得token 一類的儲存在cookie 裡的東西,然後使用者後面訪問時把這個東西放在請求中 這裡會有乙個問題,比如使用者剛開始是某個組的成員,但是之後被踢出組,有...

Spark on YARN 的一些碎碎念

adventage speed,tasks can start up very quickly in memory worker yarn 中是沒有這個概念的 因為 executor runs in container memory of container executor memory 客戶端提...

python的一些碎碎念

將資料輸出檔案中 fp open d text.txt a a 表示 如果檔案不存在就建立,存在就在檔案內容後面繼續追加 print hello world file fp fp.close 轉義字元 n t r b 若不希望字串中的轉義字元起作用,就在字串之前加上r,或者r print r hel...