歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。它又稱為框模型(BoxModel),是由元素內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)幾個要素組成的(如下圖所示)。
 
  這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也就是能裝東西的一種箱子,也具有這些屬性,所以叫它盒子模式。
 
  圖中最內部的框是元素的實際內容,也就是元素框,緊挨著元素框外部的是內邊距padding,其次是邊框(border),然后最外層是外邊距(margin),整個構成了框模型。通常我們設置的背景顯示區域,就是內容、內邊距、邊框這一塊范圍。而外邊距margin是透明的,不會遮擋周邊的其他元素。
 
  那么,元素框的總寬度=元素(element)的width+padding的左邊距和右邊距的值+margin的左邊距和右邊距的值+border的左右寬度;
 
  元素框的總高度=元素(element)的height+padding的上下邊距的值+margin的上下邊距的值+border的上下寬度。
 
  結構
 
  內容(CONTENT)就是盒子里裝的東西;
 
  而填充(PADDING)就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;
 
  邊框(BORDER)就是盒子本身了;至于邊界(MARGIN)則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出。在網頁設計上,內容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現實生活中盒子不同的是,現實生活中的東西一般不能大于盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,里面的東西大過盒子本身最多把它撐大,但它不會損壞的。
 
  填充只有寬度屬性,每個HTML標記都可看作一個盒子;



 

如需轉載,請注明文章出處和來源網址:http://www.4389979.live

河南十一选五大小 002527股票分析 今天山西十一选五走势图 吉林11选五号码走势图彩经网 排列5玩法中奖概率 上海十一选五遗漏表 河南泳坛夺金技巧破解 湖北福彩30选5官方网站 云南快乐10分预测 银行可以给私募基金配资吗 甘肃快三形态走势