盒子模型:
margin:外边距
border:边框
padding:内边距
边框 Border:
Border-top-style: solid 实线
dotted 点线
dashed 虚线
Border-top-color 边框颜色
Border-top-width 边框粗细
代码演示:
.box{
width:300px;
height:390px;
background:#999;
线形:实线:点线:虚线
border-top-style: solid;
border-top-color: red;
border-top-width: 5px;
border-left-style: dashed;
border-bottom-style:dotted ;
border-left-color: green;
border-bottom-color: black;
border-left-width: 20px;
border-bottom-width: 10px;
}
效果图:
边框合并
border-collapse:collapse;
代码演示:
table{
width: 300px;
height: 500px;
border: 1px red solid;
/*border-collapse:collapse;*/
}
td{
border: 1px red solid;
}
效果图:
没合并前:
合并后:
内边距
Padding-left | right | top | bottom
代码演示:
.box{
width:300px;
height:390px;
background:#999;
padding:10px 20px 20px 20px;
}
◆padding连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
外边距
margin-left | right | top | bottom
.box{
width:300px;
height:390px;
background:#999;
padding:10px 20px 20px 20px;
margin:50px 50px 50px 50px;
}
◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px