CSS(三)_表格,盒子模型,邊框
阿新 • • 發佈:2019-01-07
CSS 盒子模型(Box Model)
- Margin(外邊距) - 清除邊框外的區域,外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。
- Content(內容) - 盒子的內容,顯示文字和影象。
元素的寬度和高度
當您指定一個CSS元素的寬度和高度屬性時,你只是設定內容區域的寬度和高度。要知道,完全大小的元素,你還必須新增填充,邊框和邊距。.
下面的例子中的元素的總寬度為300px:
width:250px;padding:10px;
border:5px solid gray;
margin:10px;
讓我們自己算算:
250px (寬)
+ 20px (左 + 右填充)
+ 10px (左 + 右邊框)
+ 20px (左 + 右邊距)
= 300px
試想一下,你只有250畫素的空間。讓我們設定總寬度為250畫素的元素:
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
最終元素的總寬度計算公式是這樣的:
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的:
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
margin屬性可以有一到四個值。/p>
- margin:25px 50px 75px 100px;
- 上邊距為25px
- 右邊距為50px
- 下邊距為75px
- 左邊距為100px
- margin:25px 50px 75px;
- 上邊距為25px
- 左右邊距為50px
- 下邊距為75px
- margin:25px 50px;
- 上下邊距為25px
- 左右邊距為50px
- margin:25px;
- 所有的4個邊距都是25px