CSS定位机制之普通流详解
-
第 3 页 垂直边距叠加问题
举个实际当中的常见例子，比如垂直边距叠加问题：
代码：
<html>
<head></head>
<body>
<div id=“A”style=“background:gray;margin-top:20px;”>
<div id=“B”style=“margin-top:10px;”>
我有10pxm-t</div>
</div>
</body>
</html>
如果在现代的浏览器里运行，那么B的10px上边距将会和父元素A的20px上边距重叠起来，从而看起来就好像B没有上边距一样。就像前面说的那样，同一个blockformattingcontext中的垂直边界将被重叠。那么不同blockformattingcontext呢？
这种情况，如果不想加边框（border:1pxsolidtransparent;）解决的话，那么就需要A建立一个新的blockformattingcontext将B包裹起来，那么A的上边距和B的上边距就毫不相干了。可以用浮动，也可以加overflow,这要看具体情况。
代码：
<html>
<head></head>
<body>
<div id=“A”style=“background:gray;margin-top:20px;overflow:auto;”>
<div id=“B”style=“margin-top:10px;”>
我有10pxm-t</div>
</div>
</body>
</html>
再一个例子，回头看下上面过程里这样的一句：除非创建一个新的blockformattingcontext,否则块级元素的布局不受浮动元素的影响。
本文导航
- 第1页: 首页
- 第2页: 相对定位
- 第3页: 垂直边距叠加问题
- 第4页: 元素重叠的原因
相关视频
-
没有数据
相关阅读 个性化jQuery和CSS3菜单源码CSS实现Tab技巧CSS复位-CSS Reset代码举例IE6绝对定位的bug及其解决办法CSS样式表创建美妙绝伦的网站几个最常用和实用的CSS技巧将网站（主页）变成黑白DW设计网页时组织CSS的建议
- 文章评论
-
热门文章 没有查询到任何记录。
最新文章
页面进入效果表单
XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧
人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法
查看所有0条评论>>