css box sizing 使用場景

2021-08-14 02:20:33 字數 841 閱讀 1761

1、content-box:此值為其預設值,其讓元素維持w3c的標準box model,也就是說元素的寬度/高度(width/height)等於元素邊框寬度(border)加上元素內邊距(padding)加上元素內容寬度/高度(content width/height)即:element width/height = border+padding+content width/height。

2、border-box:此值讓元素維持ie傳統的box model(ie6以下版本),也就是說元素的寬度/高度等於元素內容的寬度/高度。(從上面box model介紹可知,我們這裡的content width/height包含了元素的border,padding,內容的width/height【此處的內容寬度/高度=width/height-border-padding】)。

使用場景:

如果你的網頁有兩塊區域剛好等於網頁區域時候,這個時候沒有任何關係。

但是當你需要給你的元素加上border或者padding 時候就會發生悲劇,沒錯,被頂下去了 貼圖:

這個時候如果使用border-sizing border-box 就會完美避開這個問題,簡直布局神器。

表單使用方面:

不同的表單元素在不同的瀏覽器上的大小是很難控制的。在不同的瀏覽器都有不同的border和padding,這個時候可以用border-box統一樣式是特別方便的!

內容參考:戳這裡=>

關於css box sizing的理解

在父元素設定了寬度後,如果兩個子元素設定浮動 float left right 佔滿父元素整個寬度 width 50 如果子元素加邊框或是內邊距 padding 會造成布局混亂,這時box sizing的作用就體現出來了 box sizing 屬性預設是 content box,意思是 子元素如果加...

每天乙個CSS(box sizing

content box 是指定box的 寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。示例一 設定div的外邊距為 5px,內邊距為 5px,邊框為 10px,寬為100px,高為100px,我們指定box sizing 為content box grid contain...

Git使用場景 命令使用場景

通過個人使用git時候的遇到的使用場景,熟悉了解相關命令,也記錄一下場景的使用方法。所有場景均在ubuntu16.04 linux 作業系統下,其他作業系統有差異的地方自行查閱相關資料。安裝git sudo apt get install git設定及檢視git配置 user.name和user.e...