文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计HTML/CSS  → CSS定位机制之普通流详解

CSS定位机制之普通流详解

时间:2010/11/25 20:25:23来源:葵中剑作者:iifksp我要评论(0)

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,否则块级元素的布局不受浮动元素的影响。

本文导航

相关视频

    没有数据

相关阅读 个性化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键的用法