zoukankan      html  css  js  c++  java
  • css的一些坑

    1、margin垂直方向上塌陷现象

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .box{
                    width: 100px;
                    height: 100px;
                    background-color:red;
                    margin-bottom: 10px;
                }
                .box2{
                    margin-top:30px ;
                    width: 100px;
                    height: 100px;
                    background: green;
                }
            </style>
        </head>
        <body>
            <div class="box">
                1
            </div>
            <div class="box2">
                2
            </div>
        </body>
    </html>

    margin在水平方向上不存在此问题。

    2、margin-top相对于父盒子问题

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .father{
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    padding-top: 20px;
                }
                .son{
                    width: 30px;
                    height: 30px;
                    background-color: yellow;
                    /*margin-top: 20px;*/
                }
            </style>
        </head>
        
        <body>
            
            <div class="father">
                <div class="son">
                    son
                </div>
            </div>
        </body>
    </html>

    margin在水平方向上不存在此问题。

    如果需要达到相对于父盒子,向下偏移,可以设置父盒子padding-top代替子盒子设置margin-top。

    总结:margin垂直方向尽量不要用,善于用父盒子padding布局。

    3、a标签不继承父类的color属性

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .box ul li {
                    color: red;
                    
                }
            </style>
        </head>
        <body>
            <div class="box">
                <ul>
                    <li><a href="#">python</a></li>
                </ul>
            </div>
        </body>
    </html>
  • 相关阅读:
    MSDN2010安装及使用(MSDN Library)[转]
    单元测试那些事
    Nhibernate Profiler安装中的问题
    ztree的动态添加
    事件与委托
    linux ls dir
    学习技术资料的思路
    linux目录结构
    是否需要深入了解java平台
    工作中心的改变
  • 原文地址:https://www.cnblogs.com/Jason-lin/p/9108507.html
Copyright © 2011-2022 走看看