zoukankan      html  css  js  c++  java
  • 认识一下margin

    标签(空格分隔): margin


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>认识margin</title>
        <style type="text/css">
    
            *{
                padding:0;
                margin:0;
            }
            .box{
    
                300px;
                height:300px;
                border:1px solid red;
                background-color: green;
                margin:20px;
    
            }
        </style>
    
    </head>
    <body>
    <!--margin 外边距指的是距离,-->
        <div class="box"></div>
    
    
    
    </body>
    </html>
    

    特别注意一下margin的特殊之处,margin默认会使我们看到左边框有8px的宽度,为了去除默认我们加入{
    0;
    heigth:0;
    }具体可以把上述的代码去除
    {},这个查看一下;
    image.png-201.7kB
    通过上述的代码我们可以到一个上下左右都是20px的margin;
    2.通过如下的代码设置margin上下左右的高度来体验一下滚动的效果:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>认识margin</title>
        <style type="text/css">
    
            *{
                padding:0;
                margin:0;
            }
            .box{
    
                300px;
                height:300px;
                border:1px solid red;
                background-color: green;
                margin-top:30px;
                margin-lef:30px;
                margin-bottom:1000px
    
            }
        </style>
    
    </head>
    <body>
    <!--margin 外边距指的是距离,-->
        <div class="box"></div>
    
    
    
    </body>
    </html>
    

    image.png-213kB通过上边的margin-bottom的设置的比较大的时候,有明显的滚动的效果了;

    当我加入一个P标签的时候:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>认识margin</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            .box{
                300px;
                height:300px;
                border:1px solid red;
                background-color: green;
                margin-top:30px;
                margin-lef:30px;
                margin-bottom:200px
            }
            p{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
    <!--margin 外边距指的是距离,-->
        <div class="box"></div>
        <p>woshiyige pbioqian </p>
    </body>
    </html>
    

    image.png-245.9kB
    看到上图我们可以看到一个盒子的真实的宽高,有包含margin在内的真实的宽高;

  • 相关阅读:
    [bzoj4197][Noi2015]寿司晚宴
    [bzoj3531][Sdoi2014]旅行
    [洛谷P1430]序列取数
    [洛谷P2044][NOI2012]随机数生成器
    [洛谷P2839][国家集训队]middle
    [洛谷P3937]Changing
    [bzoj3532][Sdoi2014]Lis
    [洛谷P2590][ZJOI2008]树的统计
    [洛谷P4311]士兵占领
    [洛谷P1879][USACO06NOV]玉米田Corn Fields
  • 原文地址:https://www.cnblogs.com/surewing/p/10634307.html
Copyright © 2011-2022 走看看