2018.1.10
边界和边框
border------------表格边框,样式等
margin------------表外间距
padding------------内容与单元格之间的间距
border:5px solid blue------------四边框:5像素,实线,蓝色(相当于以下三行)
border-5px------------四边框:5像素
border-style:solid------------边框实线
border-color:blue------------蓝色
border-top:5px solid blue-----------上边框-----像素5----实线-----蓝色(分写同上)
border-bottom:5px solid blue------------下边框-----像素5----实线-----蓝色
border-left:5px solid blue------------左边框-----像素5----实线-----蓝色
border-right:5px solid blue------------右边框-----像素5----实线-----蓝色
margin:10px------------四边框外边框宽度10像素。(auto居中)
margin-top:10px------------上边框外边框宽度10像素(其他方向边框类似margin——xxxxxx:10px)
margin:20px 0px 20px 0px------------上右下左,四边框外边框宽度20px0px20px0px(顺时针顺序)
padding:10px------------内容与边框的四边间距为10px
padding-top:10px------------内容与边框的上间距为10px(其他三遍类似padding——xxxxx:10px)
padding:20px 0px 20px 0px------------上右下左,内容与边框的四边间距顺时针顺序
代码
</head>
<style type="text/css">
*{
margin:opx auto;
padding:0px;
font-family:微软雅黑;
font-size:14px;
}
#content
{
margin:20px 0px 0px 300px;
350px;
height:100px;
border:2px solid #60f;
overflow:hidden;
padding:10px 10px 10px;
}
#waiceng
{
50px;
height:50px;
margin:-left:320px;
overflow:hidden;
margin:-top:-2px;
}
#sanjiao
{
50px;
height:50px;
border:2px solid #60f;
transform:0px;
background-color:white;
}
</style>
<body>
<div id="content">
</div>
<div id="sanjiao">
</div>
</body>
视觉效果