• 边界和边框


    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>

    视觉效果

  • 相关阅读:
    H265播放器EasyPlayer-RTSP WIN版播放器D3D和GDI两种渲染模式效果比较
    笛卡尔树复习笔记
    康托の复习笔记
    django rest unique 和UniqueTogether 检验
    代码扫描tool sonar
    await async axios
    httprunner 实现文件上传
    vue 实现xmind 脑图 web 创建脑图何修改删除
    jsmind
    【CF1548E】Gregor and the Two Painters
  • 原文地址:https://www.cnblogs.com/sgb13527/p/8268339.html
Copyright © 2020-2023  润新知