zoukankan      html  css  js  c++  java
  • margin-top、margin-bottom的一些分析

    margin-top:表示该容器距离上面容器的距离

    情况一:如果该容器上面没有容器,则这个样式属性则被父容器占用了

    html代码如下:

    <div id ="fa">
        <div id="son"></div>
            <div  style="height:30px; background:#ffd800;"></div>
        </div>
            <div id="br"></div>

    css代码如下:

     #fa {
            600px;
            height:600px;
            background:#f00;
            }
            #son {
            200px;
            height:200px;
            background:#4cff00;
            margin-top:30px;
            }

    结果图如下:

    情况二:如果该容器上面有容器,则父容器不占用这个样式属性

    html代码如下:

    <div id ="fa">
    <div style="height:30px; background:#ffd800;"></div>
    <div id="son"></div>
    <div style="height:30px; background:#ffd800;"></div>
    </div>
    <div id="br"></div>

    css代码如下:

     #fa {
            600px;
            height:600px;
            background:#f00;
            }
            #son {
            200px;
            height:200px;
            background:#4cff00;
            margin-top:30px;
            }

    结果图如下:

     

     如何解决情况一的问题:设置父容器超出的隐藏的样式属性overflow:hidden;

  • 相关阅读:
    渐变
    阴影
    html+css
    background用法
    语言特点
    h5c3介绍
    js的组成
    第九章 查找文件或者命令
    第八章 查看文件内容命令
    第七章 文件管理之基础命令
  • 原文地址:https://www.cnblogs.com/liling1994/p/6429502.html
Copyright © 2011-2022 走看看