七彩课堂[网页设计CSS教程系列]
关于float之后点消失的问题
关于float之后点消失的问题,说说我的猜测
先说 UL 被 float 时候的情况,这个我想应该是 layout 问题。因为 layout 元素有一个裁切内部内容的特性,li 前面那个点出现的机制虽然不是很清楚,但应该是受这个裁切规则影响的。所以当 li 有一个足够大的 margin 或者 ul 有一个足够大的 padding 时这个点会重新出现。我这么推论的原因是因为不光 float 时有这个现象,使用其他的 layout 触发器也会出现类似情况,看一个简单的例子,其中第二个 ul 通过 zoom 触发了 layout,可以看到 li 前面的点也消失了:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>title</title>
<meta http-equiv="Content-type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
.layout{zoom:1;}
</style>
</head>
<body>
<ul>
<li>此 ul 无 layout</li>
<li>alksdjfasdf</li>
<li>alksdjfasdf</li>
<li>alksdjfasdf</li>
</ul>
<ul class="layout">
<li>此 ul 有 layout</li>
<li>alksdjfasdf</li>
<li>alksdjfasdf</li>
<li>alksdjfasdf</li>
</ul>
</body>
</html>
提示:您可以先修改部分代码再运行
再说 li 被 float 时的情况,这个实在是看不出什么原因,只能从那个点产生的机制上猜了。说些诡异现象大家一起猜吧:
1。float 之后点消失
2。position:absolute/fixed 之后点消失
3。ul 有不为 0 的 padding 或者 border,且第一个 li 具有 layout 时,第一个 li 的点消失。
信息推荐
资讯中心 | 电子商务 | 搜索营销 | 设计学院 | 中医养生 | 养生保健 | 节日祝福 | 民俗文化 | 奇闻趣事
建站知识 | 人世百态 | 网站导航 | 传统节日 | 搜索热点 | 星座运势 | 趣闻轶事 | 祝福的话 | 短信大全
© 2023 QicaiSpace.Com