css 奇淫技巧 行内快 父级padding 子级margin 抵消

Posted xiaobaicai123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 奇淫技巧 行内快 父级padding 子级margin 抵消相关的知识,希望对你有一定的参考价值。

学了这么久,其实都是在学css3 html5 然后js很薄弱,趁着有时间,更一个新手不懂的,且很好用的css。

行内快的padding在html布局中很常用,但是你知道父级的padding 子级可以通过margin 抵消掉吗?通过这种应用我们可以做到很多事情。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/publicClass-1.css"/>
    </head>
    <style type="text/css">
        .i-wrap{border: 1px solid red; padding:0 20px; display: inline-block; overflow: hidden; font-size: 0;}
        .i-wrap .i-outer{ height: 300px; border: 1px solid blue; margin-right: -20px; display: inline-block; font-size: 14px;}
        .i-outercopy{overflow: hidden; height: 30px; background-color: red; display: inline-block;font-size: 14px;}
    </style>
    <body>
        <div class="i-wrap">
            <span class="i-outer">
                这里是里面内容
            </span>
        </div>
    </body>
</html>

显示效果:

技术图片

常用案例:

技术图片

 

只试用盒模型布局,行内块元素。

 

以上是关于css 奇淫技巧 行内快 父级padding 子级margin 抵消的主要内容,如果未能解决你的问题,请参考以下文章

第23天:js-数据类型转换

浮动所产生的特性

css父级没包住子级是怎么回事,我用firebug查看,确实在父级的div中,但是就是没有包括子级的内容

记录一些css奇淫技巧

为啥我的 CSS 模块父级继承了子级的属性?

CSS布局奇淫技巧之--各种居中