• 盒子!盒子!盒子!


    话说今天终于开始整CSS中的盒子了。抽象的盒子概念如下:
    1、最里面的核,也就是内容content,有width、height;
    2、环绕着内容的是一个填充的概念,padding,是padding-top、padding-bottom、padding-left、padding-right;
    3、padding外面是盒子的边框border,border也有border-top、border-bottom、border-left、border-right,特别的,border除了上下左右以外,还有宽度(border-width)、颜色(border-color)和样式(border-style),3个主要属性;
    4、border外面是盒子和其它盒子的边缘、间隙或者随便叫其它什么,英文意思很明白:margin,有margin-top、margin-bottom、margin-left、margin-right;

    <style type="text/css">
    div{
        border-width: 8px;/*边框的宽度为8px*/
        border-color: black;/*边框的颜色为黑色*/
        margin: 15px;/*盒子的外围边界为15px*/
        padding: 6px;/*盒子的内部填充为6px*/
        background-color: white;/*背景颜色为白色*/
    }
    </style>
    
    <body>
        <div style="border-style:solid">示范边框风格(border-style)为:solid</div>
        <div style="border-style:dashed">示范边框风格(border-style)为:dashed</div>
        <div style="border-style:dotted">示范边框风格(border-style)为:dotted</div>
        <div style="border-style:double">示范边框风格(border-style)为:double</div>
        <div style="border-style:groove">示范边框风格(border-style)为:groove</div>
        <div style="border-style:inset">示范边框风格(border-style)为:inset</div>
        <div style="border-style:outset">示范边框风格(border-style)为:outset</div>
        <div style="border-style:ridge">示范边框风格(border-style)为:ridge</div>
    </body>

  • 相关阅读:
    微软 PowerShell Script Explorer
    MVC, MVP, MVVM比较以及区别(上)
    MVC中使用Unity Ioc Container
    java实现电脑远程控制完整源代码(转)
    强大的Mockito测试框架(转)
    File中操作路径的API(转)
    java如何把char型数据转换成int型数据(转)
    Test class should have exactly one public zero-argument constructor
    tomcat的webappclassloader中一个奇怪的异常信息
    在asp.net mvc中使用PartialView返回部分HTML段
  • 原文地址:https://www.cnblogs.com/roytanlu/p/2485345.html
Copyright © 2020-2023  润新知