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

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

<div>標(biāo)記

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

盒子的寬與高

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

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

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

猜你喜歡：
前端與移動(dòng)開(kāi)發(fā)課程