盒子模型可以分為四個部分,分別是內容區,內邊距(padding),邊框(border),外邊距(margin).盒子的大小即標籤大小 = 內容區+內邊距+邊框.
內容區內容區指的是盒子裡放置內容的區域,其內容也就是文字內容,如果不設定邊框,內邊距,內容的大小就是盒子的大小,此區域可以設定高度和寬度,使用width和heigth標籤,設定的是內容區的大小,而不是盒子的大小.
#d1
內邊距指的是內容區與邊框之間內容區域,使用padding屬性來設定內邊距,設定上右下左(top,right,bottom,left)的數值,內邊距進行改變,它的改變可以改變盒子的大小.
#d1
邊框是盒子可見框的最外部,使用border屬性來設定邊框的一些樣式,顏色等
#d1
#d2
外邊距是邊框以外與其他標籤邊框間的距離,使用margin標籤屬性來設定外邊距,外邊距可以影響盒子的位置,不能改變盒子的大小,可以設定四個方向上右下左(top,right,bottom,left),margin的值可以為auto,意思是設定外邊距為最大值.
#d2
CSS 理解盒子模型
什麼是盒子模型？對於初學者來說，很難說出來，但是對於生活中的盒子大家熟悉吧，哈哈，這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎麼能起個名字叫 盒子模型 呢 好！既然和現實生活中的盒子一樣，那我們想一下，生活中的盒子內部是不是空的好用來存放東西，而裡面存放東西的區域我們給他起個名字...
css 盒子模型理解
盒子模型是html css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識 希望對初學者有用。一 css盒子模型概念 css css盒子模型 又稱框模型 box model 包含了元素內容 content 內邊距 padding 邊...
css 理解 盒子模型
什麼是css的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子 箱子 上來理解，日常生活中所見的盒子也具有這些屬性，所以叫...