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>
视觉效果