兩張圖告訴你什么是盒模型

我們生活中常見的手機盒子就可以看作一個盒子模型，如圖所示個完整的手機盒子通常包含手機、內(nèi)填充物和盛裝手機的外殼。如果把手機想象成HTML標(biāo)記，那么手機盒子就是一個CSS盒子模型。內(nèi)容就是盒子里裝的手機；內(nèi)邊距就是怕手機損壞得填充物：邊框就是盒子本身外部的殼；外邊距就是多個手機盒子排放時空的縫隙。

<div>標(biāo)記

div英文全稱為division，譯為中文是“分割、區(qū)域”。<div>標(biāo)記簡單而言就是一個塊標(biāo)記，可以實現(xiàn)網(wǎng)頁的規(guī)劃和布局。在HTML文檔中，頁面會被劃分為很多區(qū)域，不同區(qū)域顯示不同的內(nèi)容，如導(dǎo)航欄、banner、內(nèi)容區(qū)等，這些區(qū)塊一般都通過<div>標(biāo)記可以在div標(biāo)記中設(shè)置外邊距、內(nèi)邊距、寬和高，同時內(nèi)部可以容納段落、標(biāo)題、表圖像等各種網(wǎng)頁元素，也就是說大多數(shù)HTML標(biāo)記都可以嵌套在<div>標(biāo)記中，<div>中還可以嵌套多層<div>。<div>標(biāo)記非常強大，通過與id、class等屬性結(jié)合設(shè)置CSS樣式，可以替代大多數(shù)的塊級文本標(biāo)記。

盒子的寬與高

網(wǎng)頁是由多個盒子排列而成的，每個盒子都有固定的大小，在CSS中使用寬度屬性widh和高度屬性height控制盒子的大小。widh和height屬性值可以是不同單位的數(shù)值或相對于父標(biāo)記的百分比，實際工作中，最常用的屬性值是像素值。

相關(guān)閱讀：什么是實體化三屬性？

實體化是指給標(biāo)記劃分區(qū)域(畫盒子)，并通過寬度、高度、背景色這三種屬性，讓標(biāo)記形態(tài)化，成為一個盒子。需要注意的是，寬度屬性wdh和高度屬性height僅適用于塊級元素，對行內(nèi)元素?zé)o效（<img/>和<input/>標(biāo)記除外）。

猜你喜歡：
前端與移動開發(fā)課程