本篇內容：
盒子模型CSS
border
box-sizing
表格細線
圓角邊框
padding內邊距
margin外邊距
盒子居中
盒子陰影
盒子模型CSS主要指的是div標籤的佈局
一個div的寬高就是盒子長寬，border就像盒子的厚度，padding就像盒子內容與盒子的距離，margin是盒子與其他盒子之間的間隙。
border
border是div的邊框。
<style>
div {
border:1px solid red;
}
</style>
<body>
<div>盒子模型</div>
</body>
實現效果：
還可以單獨對上、下、左、右邊框 分別設置樣式
<style>
div {
border-top: 2px solid red;
border-left: 2px solid blue;
border-right: 2px solid lawngreen;
border-bottom: 2px solid violet;
width: 100px;
}
</style>
<body>
<div>盒子模型</div>
</body>
box-sizing
box-sizing是比較好用的一個盒子屬性
<style>
div{
/*box-sizing: border-box;*/
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
未使用該屬性時的效果：
<style>
div{
box-sizing: border-box;
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
加上box-sizing: border-box之後的效果：
簡單來講就是加上這個屬性，就把border的寬度算在盒子以內，即left-border+width+right-border=100px.（如果有內外邊距，也算在100px以內）
表格細線
<style>
/* table{
border-collapse: collapse;
} */
td,th{
border: 1px solid red;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>學號</th>
<th>班級</th>
</tr>
<tr>
<td>小王</td>
<td>1</td>
<td>一班</td>
</tr>
<tr>
<td>小白</td>
<td>2</td>
<td>二班</td>
</tr>
</table>
但我們寫了一個簡單的表格之後，效果如下：
但是不夠美觀，於是對table設置 border-collapse: collapse; 讓它自動合併邊框
<style>
table{
border-collapse: collapse;
}
td,th{
border: 1px solid red;
}
</style>
實現效果：
圓角邊框
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
display: inline-block;
}
div:first-child{
/* 表示四個角都是10px的弧度 */
border-radius: 10px;
}
div:nth-child(2){
/* 表示四個角都是50%高度和寬度的弧度 則會變成一個圓形 */
border-radius: 50%;
}
div:nth-child(3){
/* 表示左上角和右下角都是10px,右上角和左下角是40px */
border-radius: 10px 40px;
}
div:nth-child(4){
/* 表示左上角是10px,右上角和左下角是40px 右下角是80px*/
border-radius: 10px 40px 80px;
}
div:nth-child(5){
/* 表示左上角是10px,右上角是40px 右下角是80px 左下角是100px*/
border-radius: 10px 40px 80px 100px;
}
div:nth-child(6){
/* 表示四個角都是10px的弧度 */
border-radius: 100%;
height: 100px;
}
div:nth-child(7){
/* 表示四個角都是10px的弧度 */
border-radius: 100px 0;
}
</style>
顯示效果：
padding內邊距
設置內邊距的方法：padding:xpx
<style>
div {
height: 100px;
width: 100px;
border: 1px solid red;
padding: 10px;
}
</style>
F12使用chrome的開發者工具查看，綠色部分就是padding
- padding也可以分別設置上下左右的內邊距，設置方法與border一致。
- padding: top right bottom left
- 當這個語法只設置一個值a，則所有內邊距都是a，如padding:10px。
- 當這個語法設置兩個值，padding:10px 20px，則上下內邊距爲10px，二左右內邊距爲20px。
- 當這個語法設置三個值，padding:10px 20px 30px，則上內邊距爲10，右內邊距爲20px,下內邊距爲30px。
- 當這個語法設置四個值，則分別是上右下左內邊距。
- margin也適用以上原則
