深入理解CSS中的盒子模型

2022-09-25 23:12:15 字數 473 閱讀 3940

很多人對盒子模型搞暈頭了,下面通過乙個簡單的**來分析盒子模型的結構!

為了方便方便**!在第乙個div中畫了乙個**,並將其尺寸設定成與div內容大小一樣!且設定body的margin和padding的屬性都為0px;

本例子採用行內css樣式!

**如下:

xml/html code複製內容到剪貼簿

把標尺開啟!

大家發現了什麼沒有?

分析如下:

顯示效果:

其它設定的table是固定不變的,也就是說內容大小都不會改變的,改變的只是位置!

border:是邊框,向外擴張,並可以為其新增顏色屬性;

margin:是向外擴張,沒有顏色屬性,所以我們看到擴張後的顏色是外部的顏色,在本例子中是無色的!

padding:是向內填充的,沒有顏色屬性,顯示的顏色是內部內容設定的顏色!

本文標題: 深入理解css中的盒子模型

本文位址:

深入理解CSS盒子模型

在css中浮動 定位和盒子模型,都是很核心的東西,其中盒子模型是css很重要基石之一,感覺還是很有必要把css盒子模型相關知識更新一下.css盒子模型示意圖 通過css盒子模型示意圖所示,我們知道由內到外內容 填充 邊框 外邊距 組成盒子模型 css盒子模型寬度 a.設定固定寬度的情況下,在盒子模型...

深入理解CSS盒子模型

盒模型是css的基石之一,它指定元素如何顯示以及 在某種程度上 如何互動。頁面上每乙個元素都被看做乙個矩形框,框由元素的內容,內邊距 padding 邊框 border 和外邊距 margin 組成,如下圖所示。內邊距出現在內容區域周圍,若給元素上新增背景,背景將會應用於由內容和內邊距組成的區域。新...

CSS 理解盒子模型

什麼是盒子模型?對於初學者來說,很難說出來,但是對於生活中的盒子大家熟悉吧,哈哈,這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了,不然怎麼能起個名字叫 盒子模型 呢 好!既然和現實生活中的盒子一樣,那我們想一下,生活中的盒子內部是不是空的好用來存放東西,而裡面存放東西的區域我們給他起個名字...