zoukankan      html  css  js  c++  java
  • 边界和边框

    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>

    视觉效果

  • 相关阅读:
    存储过程分页,前台应用范例repeater分页
    引用真正分页控件(与存储过程联合使用)页面
    分页存储过程repeater分页
    查找DetailsView1数据控件中的数据
    c#读取文件
    SQL触发器实例讲解
    TreeView节点选中问题
    C# 实现版本自动更新
    .Net那点事儿系列:C#操作Xml:通过XmlDocument读写Xml文档
    Linq学习笔记
  • 原文地址:https://www.cnblogs.com/sgb13527/p/8268339.html
Copyright © 2011-2022 走看看