<html>
<head>
<title>方框属性</title>
<!--方框属性:包括边框属性border,填充属性padding,边界属性margin-->
<style type="text/css">
/*边框样式使用border属性,任何元素都具有四个边框,每个边框都可以单独定义粗细,颜色和样式。*/
.tableborder{
border-bottom-color:red;/*边框颜色*/
border-bottom-style:double;/*边框样式*/
border-bottom-width:3px;/*边框粗细*/
}
tr{
background:yellow;
}
/*内边距样式:使用padding属性,用来设置边框内的内容距边框四个方向的距离*/
td{
padding-top:1cm;
padding-right:100px;
padding-bottom:1cm;
padding-left:10px;
}
p{
border:1px double blue;
}
/*外边距使用margin属性,用来定义元素与其他元素的距离,有上下左右四个方向*/
#setmargin{
margin-top:5cm;
margin-right:13cm;
margin-left:4cm;
margin-bottom:5cm;
}
</style>
</head>
<body>
<table>
<tr style="background:blue">
<td class="tableborder">手机品牌</td>
<td >手机型号</td>
</tr>
<tr>
<td class="tableborder" align="center">魅族</td>
<td align="center">pro6</td>
</tr>
</table>
<br><br>
<p>这段话没有指定外边距!!!</p>
<p id="setmargin">这段话指定外边距!!!like this</p>
</body>
</html>