關於盒子模型 和 獲取頁面寬高的問題總結

2021-09-13 13:43:22 字數 693 閱讀 1524

寫個部落格也有人噴,我真的服了。自己寫自己的思考筆記,愛看不看,有意見你也可以提, 畢竟我的理解也不一定對是不是。你open 我幹啥子勁兒。

盒子模型:標準盒子模型 和怪異盒子模型  兩種。css3 的新屬性:box-sizing:border-box(ie盒子模型 也就是怪異模型);  content-box(w3c的標準盒子模型);

區別:用css設定寬度、內邊距、邊框等屬性,寬度 計算的時候不一樣;這對於布局來說非常重要。

若設定怪異盒子模型:border-box;那麼寬度永遠是設定的width 的值。設定css的width = content + padding + border-width;不會因為設定了內邊距或者邊框而變大。若設定標準盒子模型:content-box,那麼設定的width 的content 永遠是 css樣式設定的寬度,設定內邊距和邊框 都會使目前的盒子變大。設定css的width = content,其他的設定會撐大本次設定的盒子。設定父元素並不能讓子元素繼承 box-sizeing屬性 繼承要用 border-sizing: inherit;

然後 用js 獲取 設定的盒子的寬高方法:常用的有兩種

clientwidth 獲取的是內容+內邊距

offsetwidth 獲取的是內容+內邊距+邊框的值

js獲取盒子模型的高寬

dom.style.width height 只能獲取到內聯樣式的屬性值,外部樣式 內部樣式的屬性值是獲取不到的。dom.currentstyle.width height 只有ie支援 window.getcomputedstyle dom width height 通用性好 dom.getbou...

標準盒子模型和IE盒子模型的區別

盒子模型是css中很重要的乙個概念,裡面包含了內容 content 內邊距 padding 邊框 border 外邊距 margin 標準盒子模型 box sizing content box 盒子的內容不包括padding和border,那麼盒子的width content。比如你給乙個盒子100...

標準盒子模型和IE盒子模型的區別

css盒子模型 又稱為框模型 box model 包含了元素內容 content 內邊距 padding 邊框 border 外邊距 margin 幾個要素。圖中的內層是content依次是padding border margin,如下圖 w3c 盒子模型的範圍包括 margin border p...