首頁 >web前端 >css教學 >css盒子模型尺寸如何計算

css盒子模型尺寸如何計算

青灯夜游
青灯夜游原創
2020-12-17 11:12:4110230瀏覽

標準盒子模型的尺寸為:“內容的寬高兩側內邊距padding的大小兩側邊框border的大小”;而IE盒子模型的尺寸直接就為:“內容的寬高” ,盒子設定的寬/高屬性就是盒子本身的整體尺寸,如果帶有內邊距或邊框,則透過縮小內容區域來實現。

css盒子模型尺寸如何計算

本教學操作環境:windows7系統、css3版本,此方法適用於所有品牌電腦。

(推薦教學:CSS影片教學

盒子模型(Box Modle)可以用來對元素進行佈局,包括實際內容(content)、內邊距(padding)、邊框(border)與外邊距(margin)這幾個部分。

一、盒子模型的分類

盒模型分為兩種:ie盒子模型(怪異盒子模型)和標準w3c盒模型。

 

二、標準模型與IE 模型的尺寸計算

1、標準盒子的尺寸計算

盒子本身的尺寸:內容的寬高兩側內邊距的大小兩側邊邊框的大小

盒子在頁面中佔位的尺寸:內容的寬高兩側內邊距兩側邊框兩側外邊距

2、 IE盒子的尺寸計算

盒子本身的尺寸:內容的寬高

盒子在頁面中佔位的尺寸:內容的寬高兩側外邊距

IE盒子直接將寬/高屬性設定為盒子本身的整體尺寸,如果帶有內邊距或邊框,則透過縮小內容區域來實現

更多編程相關知識,請訪問:編程入門! !

以上是css盒子模型尺寸如何計算的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn