重新認識盒模型

2021-09-01 13:14:26 字數 687 閱讀 1550

一直認為盒模型簡單到可以不用寫任何這方面的東西,直接使用就可以了,直到近期發現我其實理解的有誤差。

div的hight應該是pading-top + text + padding-bottom

div的width應該是pading-left + text + padding-right

2013-08-08

最新的理解

width不包括margin,也不包括padding。

比如一共800x600的區域,如果padding:10px 那麼實際的width只能是780x580了。

查了一下,果然如此:

[img]

例項[img]

#box

[b]瀏覽器相容性[/b]

一旦為頁面設定了恰當的 dtd,大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範,元素內容佔據的空間是由 width 屬性設定的,而內容周圍的 padding 和 border 值是另外計算的。不幸的是,ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度,而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是,不要給元素新增具有指定寬度的內邊距,而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。

重新認識container

我還清楚的記得,第一次從 那兒聽說container這個詞 結果他給我解釋了半天還是似懂非懂的。今天,偷閒翻了下posa4,發現裡面對container的解釋特別清楚。粗略的理解下來是,為了分離關注點,而實現的對系統資源的封裝。豁然開朗的發現,os就是應用程式的container。突發奇想的,開發乙...

重新認識測試

以前總覺得測試是軟體開發的邊緣職位,開發人員才是軟體生命週期的核心人員。隨著對網際網路公司的了解,逐步了解到測試的重要性。以bat為例,三家公司均設定了測試開發工程師崗位,該崗位的主要職責就是編寫自動化測試案例,通過對 的邏輯進行分析,設計出能夠覆蓋大部分 的測試用例。如阿里的測試開發工程師的崗位描...

重新認識ARC

雖然用了很久的arc,感受了 簡潔。但是對arc底層實現並不了解。今天抽空研究了下,做些簡單地總結。一 strong 1.區域性變數 對於區域性變數來說,在超出作用域的地方由編譯器自動插入release。大概轉化為 在非arc返回的autorelease型別的方法 在blog手碼大概 如有錯誤還望指...