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>

    视觉效果

  • 相关阅读:
    jmeter之模块简介
    前端性能测试工具
    前端性能测试工具及相关知识
    大数据测试场景相关文章-流计算
    前端测试规范
    性能测试
    spark学习笔记三:spark-shell
    spark学习笔记二:建单脚本编写
    spark学习笔记一:初识spark
    管理能力参考
  • 原文地址:https://www.cnblogs.com/sgb13527/p/8268339.html
Copyright © 2011-2022 走看看