CSS盒子模型是在網頁設計和布局中非常重要的一個概念,它指的是將HTML元素看做一個盒子,包含著內容、邊框、內邊距和外邊距。
下面是一個CSS盒子模型的例子:
.box { width: 300px; height: 200px; padding: 20px; border: 1px solid #000; margin: 40px; background-color: #fff; }
在這個例子中,我們創建了一個名為box的CSS類,它應用于HTML標簽。此類包含以下屬性:
- 寬度(width):盒子的寬度為300像素。
- 高度(height):盒子的高度為200像素。
- 內邊距(padding):盒子內部的空間為20像素。
- 邊框(border):盒子邊框的寬度為1像素,顏色為黑色。
- 外邊距(margin):盒子與其它元素之間的空間為40像素。
- 背景顏色(background-color):盒子背景顏色為白色。
這些屬性將會導致一個300x200像素的盒子被創建出來,內部留有20像素的邊距。盒子被加上了一個1像素寬度的黑色邊框,外部空間是40像素。盒子背景顏色是白色。
這個例子非常簡單,但是它演示了一個簡單盒子模型的創建和應用。
上一篇css盒子模作用
下一篇css盒子必須要有高度嗎