說一說CSS盒子模型,盒子模型裡面有哪些坑嗎?

時間 2021-05-29 22:41:04

1樓:貝努力

不同人對「坑」的概念都有不同,如果你認為box-sizing, 外邊距合併,浮動,垂直居中,水平居中,負邊距,z-index這些都算的話,那就有的說了~

有人覺得的話我就把上面說的都補充~

2樓:

1. IE11 只支援 -ms-flexbox,完全不支援 box 以及其延伸屬性 box-pack、box-align、box-orient

(當窩知道這個的時候我是崩潰的,IE秉承一貫不讓人省心的特性堅持搗亂30年不動搖

2. Firefox和Chrome對 box 內部元素支援不一致,具體表現為當Firefox內部存在乙個box子元素和乙個非box子元素(一般是inline-block),作用於其上的 box-align 和 box-pack 會崩掉

(上圖中圖示是display: box,文字是display: inline-block,當兩者同在乙個 box 內時,Firefox就會出現問題,解決方案是將兩者同時變為 box 或者 inline-block

3. Firefox浮動會出問題。。。

(float:right 浮動父級 box 的時候,如圖,Firefox 中 box-orient 強行變成 vertical,內容上下排布

(Chrome正常。。。 ̄へ ̄

4. box 遇上 position

只要 box 不是 static,相信我,你會很酸爽。。。

解決方法很簡單,外套乙個元素,把relative,absolute或fixed寫在外套元素上

以上是窩實際使用過程中發現的一些坑,當然沒有詳細讀過w3c,並不知道遭遇這種情況的時候官方給出的標準是什麼,嘛,也許是 undefinition 吧

3樓:林小志

有坑嗎?不知道,好像沒有吧。似乎從最初開始,盒子的設計都是有TA的道理存在,然後後來慢慢的各種box-sizing的出現,盒子的計算方式也就不一了,雖然之前有低版本IE中的乙個怪異模式的盒子計算方式(類似box-sizing:

border-box;)……

至於那個什麼margin合併,這個跟盒模型我不知道有沒有關係,應該或許沒關係吧,畢竟是多個元素之間的關係,就好像乙個男人跟乙個女人,分開來的時候都是人,兩個人在一起的時候,穿著衣服(有border了)還好,可以脫了衣服(沒了border),哎呀……誰曉得會怎麼樣呢,說不定就負進去了啊……

然後還有那些什麼浮動啊定位,這個還是其他因素導致的,跟盒模型似乎沒太多關係,人家願意挨著誰就願意挨著誰,願意壓在誰上面就壓在誰上面,跟乙個盒子沒什麼關係。畢竟現在很多美女常常會跟乙個胖子在一起,說不定還壓在上面呢,誰曉得呢,反正我知道分開後,他們的身高和體寬是固定的……

CSS的盒子模型太抽象了,通俗講是什麼意思?

小叮噹 盒子模型分為標準盒子模型和怪異的盒子模型 1.標準的盒模型 content box 你設定的寬和高 width height 是內容的部分寬高,所以盒子的實際寬度 內容的寬高 boder padding 我設定的寬為100px高為100px,是內容的寬高,實際盒子的寬150px高為150px...

說一說四驅(後篇)

Ccc 無論男女,家中常備4樣,大人孩子都很需要!1 藿 香 清 胃 片 醒脾消滯 清熱化濕 吃的時候,飲食要注意,不要大魚大肉,盡量以清淡飲食為主。注意調整用量,因為是藥,不要貪多!2 參 苓 健 脾 胃 顆 粒 喝起來甜甜的,接受程度高。主要是疏肝健脾 助消化的,不用吃很多,長時間消化不良的話,...

說一說學徒時候的你?

月華 我以為你說的是遊戲 別人崩壞三 大佬收師傅嗎 我現在算是學徒。師傅做事的時候脾氣比較暴躁,操作上出問題的時候被師傅吼,心裡方的要死。羨慕 Tank87 最開始什麼都不會,是我師傅手把手的教我怎麼操作以及為什麼這麼操作,另外幾個師傅也是不會的就教我,不好好做或者做不好就直接揍,有時還會挨踢 我是...