首页 > 代码库 > CSS 奇技淫巧
CSS 奇技淫巧
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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。