box sizing border box 把所有元素的內邊距和邊框不再會增加它的寬度,這樣寫好嗎?

時間 2021-06-01 05:45:38

1樓:趙琳

06 或 07 年左右寫過一篇文來講這個, 但現在完全找不到了. 看來網際網路的遺忘速度還是挺快的.

其實 border-box 更接近物理世界中的 Box. 請想象倉庫中擺放紙箱. margin 就是箱與箱間的距離, border 就是紙箱紙殼厚度.

padding 就是紙箱中用來減震的泡沫塑料厚度. 真實世界中紙箱會因為用了更厚的泡沫塑料而變大嗎? 而真實世界中 Box 尺寸通常是指 Box 的尺寸(其占用的尺寸).

而不會是其內部容積的尺寸. 內部容器設定百分比竟然還要考慮外部容器的 padding . 這太反物理世界了.

bootstarp 這樣設定也是為了布局時邏輯更清晰直觀符合現實世界中人們早以認可的 box . 反正我自己做的框架都是全域性這樣設定. 自覺邏輯清晰很多.

2樓:北白川糰子

全域性設定 border-box 很好,首先它符合直覺,其次它可以省去一次又一次的加加減減,它還有乙個關鍵作用——讓有邊框的盒子正常使用百分比寬度。但是使用了 border-box 可能會與一些依賴預設 box-sizing 的庫衝突,不過這種問題大多數時候可以通過把交由這些庫處理的塊的 box-sizing 設定回 content-box 來解決。

但題主的寫法不是很好,據我所知推薦寫法是:

html*,*

:before,*

:after

(出自 Inheriting box-sizing Probably Slightly Better Best-Practice)

選擇器 * 無法覆蓋到偽元素,所以需要給 :before 和 :after 分別設定。

而通過繼承的方式應用到所有元素,需要時可以方便的設定某個元素及其後代元素的 box-sizing 回 content-box。

3樓:果大

一直以為:IE 怪異模式下的盒模型才符合我們傳統認識裡的盒子,這樣會更加直觀一些,不用再做一層轉換。

缺點是現在相容性稍微有點問題,不過手機端可以無壓使用了。

Matlab求乙個矩陣中所有元素的平方和,兩種迴圈寫法為什麼效能相差很大?

王贇 Maigo 試驗了一下多種寫法的速度,從慢到快排列。A為7777階隨機方陣,時間為100次執行平均用時,所用Matlab版本為R2013a。sum sum A.2 0.273 ssum A 2 0.272 s,跟前一種其實沒有區別dot A A 0.251 s,跟前一種也幾乎沒有區別 題主的l...

如果把現在除了靈長類和人類外的所有動物平移至侏羅紀,會怎樣發展,哪種生物產生文明的機率最大?

信仰 還是恐龍,在體積過於龐大的動物面前,所有都是食物,連進化的機會都不會給你。人類之所以能得到進化,就是因為敵人個體不大,但是以群居生活也有逃生的機會。要把所有動物如老虎,獅子這些,在強大的恐龍面前就是螞蟻的存在,除了滅亡更多的是給它們送食物吃。 歡了多 別說現在的生物,就算恐龍界,都有可能產生文...

和大學同學合租,她總是把所有東西都分的清清楚楚,但我喜歡不用分的那麼明白,是我的問題嗎?

分清楚比較好,她如果主動給你或者分享給你的,你可以用用,但是別太多次,給人感覺不好,造成一種喜歡佔別人便宜的感覺,畢竟都是花錢買的呀。我就遇到過喜歡借東西的人,老是麻煩別人,有時候她沒還回來,還要去找她拿,兩個人用壞了算誰的呢?你說不是你弄得,她也覺得不是她,怎麼辦呢? 深挽 實話還是分清楚,我和閨...