標準盒子和非標準盒子模型佔位的計算

2021-10-22 12:02:37 字數 473 閱讀 4832

盒子模型 (box model)

當你檢查元素的時候,點就一下computed

標準的盒子模型是由 **盒子的占用空間:

margin+ padding+width+border **

實際上我們寫的width,height就是內容content的大小

非標準的盒子模型(怪異盒模型):box-sizing:boder-box;

width=padding+border+width(就像你的肚子吃了乙個公尺粒,乙個豆子,乙個瓜子,你肚子就是沒有變化的)

盒子的佔位:margin +width而已。

遇到邊框重疊時 border-collapse:collapse; 這樣只要有重疊的邊框就不會加粗。在**,單元格,th,td合併相鄰的邊框。

標準流,非標準流,盒子模型

源 評 標準流 非標準流 流 在現實生活中就是流水,在網頁設計中就是指元素 標籤 的排列方式 標準流 元素在網頁中就像流水,排在前面的元素 標籤 內容前面出現,排在後面的元素 標籤 內容後面出現 非標準流 當某個元素 標籤 脫離了標準流 比如因為相對定位 排列,我們統稱為非標準排列 盒子模型 在網頁...

標準盒子模型和IE盒子模型

盒子模型是css中乙個重要的概念,理解了盒子模型才能更好的排版。其實盒子模型有兩種,分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同,先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content,並...

css 標準盒子模型和IE盒子模型

利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種,分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不...