zoukankan html css js c++ java

css案例学习之父子块的margin

两边还会有些距离，这是body默认的。

代码：

<head>
<title>父子块的margin</title>
<style type="text/css">
/* body{
    margin:0 0;
} */
div.father{                        /* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
}
div.son{                        /* 子div */
    background-color:#a2d2ff;
    margin-top:30px;
    margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

两边没有了距离

<head>
<title>父子块的margin</title>
<style type="text/css">
 body{
    margin:0 0;
} 
div.father{                        /* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
}
div.son{                        /* 子div */
    background-color:#a2d2ff;
    margin-top:30px;
    margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

说明：子元素只能在父元素允许的空间中活动。默认情况下会自动填满父元素。

撑破了

代码：

<head>
<title>设置父块的高度</title>
<style type="text/css">
div.father{                        /* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
    height:40px;                /* 设置父div的高度 */
}
div.son{                        /* 子div */
    background-color:#a2d2ff;
    margin-top:40px; margin-bottom:0px;
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

说明：设置父元素高度为40px，子元素在处理margin-top时，撑破了父元素。

代码：

<head>
<title>设置父块的高度</title>
<style type="text/css">
div.father{                        /* 父div */
    background-color:#fffebb;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:10px;
    border:1px solid #000000;
    height:40px;                /* 设置父div的高度 */
    width: 400px;
}
div.son{                        /* 子div */
    background-color:#a2d2ff;
    margin-top:40px; margin-bottom:0px;
    margin-left:400px;   /*宽度有很大的伸缩空间，超过宽度也会被撑破*/
    padding:15px;
    border:1px dashed #004993;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">子div</div>
    </div>
</body>

说明：宽度也会被撑破，不过有很大的弹性空间

查看全文

相关阅读:
[mock open]PyUnit执行单元测试时使用字符串模拟文件对象
 bottle 0.5中的key-value数据库
 bottle模板中的替换
 返回不同值的小技巧
 带有参数的装饰器
 常用命令速查
 SQLAlchemy多线程下事务隔离机制详解
 Bancor 协议浅析
 Flask中 endpoint 解析
 pip 相关问题

原文地址：https://www.cnblogs.com/jiqing9006/p/4987581.html