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>

    视觉效果

  • 相关阅读:
    [转] 一封程序员的情书
    [**收集**]实用的网站
    [转] 绝对实用!60款免费软件逐个点评下载
    [*日语学习笔记*] 大家的日语初级1动词活用笔记
    [转] IT人不可不听的10个职场故事
    【转图】从可乐到NIKE 经典logo的web2.0版
    [转] 常用姓氏读法
    [转] 数据库开发个人总结(ADO.NET小结)
    [转] VB十七种可用一行代码完成的技巧
    [转] 程序员爱情观XP版本 (敏捷版本)
  • 原文地址:https://www.cnblogs.com/sgb13527/p/8268339.html
Copyright © 2011-2022 走看看