边界和边框
2018-01-11 14:43 看看乖哦 阅读(248) 评论(0) 编辑 收藏 举报2018.1.10
边界和边框
border------------表格边框，样式等
margin------------表外间距
padding------------内容与单元格之间的间距
border:5px solid blue------------四边框：5像素，实线，蓝色（相当于以下三行）
border-width: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;
width:350px;
height:100px;
border:2px solid #60f;
overflow:hidden;
padding:10px 10px 10px;
}
#waiceng
{
width:50px;
height:50px;
margin:-left:320px;
overflow:hidden;
margin:-top:-2px;
}
#sanjiao
{
width:50px;
height:50px;
border:2px solid #60f;
transform:0px;
background-color:white;
}
</style>
<body>
<div id="content">
</div>
<div id="sanjiao">
</div>
</body>
视觉效果
