美文网首页
盒子模型

盒子模型

作者: coderST | 来源:发表于2018-01-22 19:54 被阅读8次

    边框属性

    • 什么边框?

    • 边框就是环绕在标签宽度和高度周围的线条

    • 边框属性的格式

    • 连写(同时设置四条边)

    • border: 边框的宽度 边框的样式 边框的颜色;

    • 示例代码

    <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                border: 5px solid blue;
                /*border: 5px solid;*/
                /*border: 5px blue;*/
                /*border: solid blue;*/
            }
    </style>
    
    <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                border-top:5px solid blue;
                border-right:10px dashed green;
                border-bottom:15px dotted purple;
                border-left:20px double pink;
            }
    </style>
    
    <style>
            .box{
                width: 500px;
                height: 500px;
                background-color: red;
                border-width: 5px 10px 15px 20px;
                border-style: solid dashed dotted double;
                border-color: blue green purple pink;
                /*border-color: blue green purple;*/
                /*border-color: blue green;*/
                /*border-color: blue;*/
            }
    </style>
    
    注意点:
    
    这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
    

    内边距属性

    • 什么是内边距?

    • 边框和内容之间的距离就是内边距

    • 格式

    • 单独设置四条边

    • padding-top: ;

    • padding-right: ;

    • padding-bottom: ;

    • padding-left: ;

    • 示例代码

    <style>
            div{
                width: 98px;
                height: 90px;
                border: 1px solid #000;
                background-color: red;
            }
            .box1{
                padding-top: 20px;
                padding-right:40px;
                padding-bottom:80px;
                padding-left:160px;
           }
    </style>
    
    • 同时设置四条边

    • padding: 上 右 下 左;

    • 示例代码

    <style>
            div{
                width: 98px;
                height: 90px;
                border: 1px solid #000;
                background-color: red;
            }
            .box1{
                /*padding:20px 40px 80px 160px;*/
                /*padding:20px 40px 80px;*/
                /*padding:20px 40px;*/
                padding:20px;
            }
    </style>
    

    外边距属性

    • 什么是外边距?

    • 标签和标签之间的距离就是外边距

    • 格式

    • 单独设置四条边

      • margin-top: ;

      • margin-right: ;

      • margin-bottom: ;

      • margin-left: ;

    • 示例代码

    <style>
      .box1{
                margin-top:20px;
                margin-right:40px;
                margin-bottom:80px;
                margin-left:160px;
            }
    </style>
    
    • 注意点:

      • 外边距的那一部分是没有背景颜色的

      • 外边距合并现象

      • 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

    • 示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外边距合并现象</title>
        <style>
            span{
                display: inline-block;
                width: 100px;
                height: 100px;
                border: 1px solid #000;
            }
            div{
                height: 100px;
                border: 1px solid #000;
            }
            .hezi1{
                margin-right:50px;
            }
            .hezi2{
                margin-left:100px;
            }
            .box1{
                margin-bottom:50px;
            }
            .box2{
                margin-top:100px;
            }
        </style>
    </head>
    <body>
    <span class="hezi1">我是span</span><span class="hezi2">我是span</span>
    <div class="box1">我是div</div>
    <div class="box2">我是div</div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:盒子模型

          本文链接:https://www.haomeiwen.com/subject/yzhraxtx.html