CSS 奇技淫巧

2022-09-16 09:03:11

display:inline-block 代替 float; 消除 inline-block 元素之间的缝隙

ul{font-size:0; /* 子级 inline-block 产生的缝隙取消 */}
li{
    display: inline-block;
    *display: inline;   /* 如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失 */
    width:200px;
    height:200px;
    background: red;
    font-size: 12px;    /* 父级通过 font-size 消除了 inline-block产生的留白, 故重新设置 font-size */
    zoom:1; /* 触发haslayout */
}

子级 nagative margin-tob 让父级高度收缩 (效果与设置父级固定高度一致);

<div class="container">
    <div style="padding-bottom:50px; background: pink">  <!-- ★ 父级必须设置 padding-bottom: 大于0, 否则无效 -->
        <img src="http://f.hiphotos.baidu.com/news/pic/item/94cad1c8a786c917250b38d8cb3d70cf3ac757c2.jpg" style="display: block; margin-bottom: -100px;">
    </div>

    <div style="margin-top:100px; padding-bottom:0px; background: pink">  <!-- 父级 padding-bottom: 0, 所以子级 margin-bottom: nagative 无效 -->
        <img src="http://f.hiphotos.baidu.com/news/pic/item/94cad1c8a786c917250b38d8cb3d70cf3ac757c2.jpg" style="display: block;">
    </div>

    <div style="margin-top:100px;height:205px; background: pink">   <!-- 父级也可以直接设置固定高度, 效果同等于第一个实例  -->
        <img src="http://f.hiphotos.baidu.com/news/pic/item/94cad1c8a786c917250b38d8cb3d70cf3ac757c2.jpg" style="display: block;">
    </div>
</div>

文字绕排

图片或者div float:left; 它后面的兄弟元素就会由于它脱离文档流而位置产生变化，其中：

　　如果兄弟元素为块状非文本，那么这些元素将靠齐父级左上角原点 (float元素无占位空间);

　　如果兄弟元素中含有文本，那么这些文本节点将围绕 float元素进行绕排效果, float元素的 width 以及 padding margin 可以影响到文本节点与 float元素的左，上距离, 文本节点的尺寸为（父级左上角原点到文本绕排最外层的范围）;

红块为未浮动的块状兄弟元素　　　　　　　　　　　　　　　　文字产生绕排，并且将文本节点所处的父级(如p标签)尺寸直接撑开

absolute等高布局

<style type="text/css">
*{padding:0; margin:0}
.fl{float:left;}
</style>

<div class="container">
    <div class="left_wrap fl">
        <div class="left_bg"></div>
        <div class="left_con">
            您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！您大爷！！！！！
        </div>
    </div>
    <div class="right_wrap fl">
        他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹哟~他妹
    </div>
</div>

<style type="text/css">
    .container{ width:600px; margin: 0 auto; overflow: hidden;/*父级高度根据子级实际内容高度进行子级多余隐藏*/ background: red; /* 这玩意是右边的背景 */}
    .left_wrap{position:relative; width:40%;}
    .left_bg{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 999em;
        background: pink; /* 这玩意是左边的背景 */
    }
    .left_con{position: relative; z-index: 1; /* 层级高于left_bg显示 */}
    .right_wrap{width:60%;}
</style>

CSS 奇技淫巧,布布扣,bubuko.com

CSS 奇技淫巧

码农公寓

相关文章