|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。
<style>
body
{margin:30px;font-size:9pt;}
.a,.b,.c,.d,.e
{
width:100px;
height:100px;
margin:5auto;
color:#fff;
background:#000;
}
.aa,.bb,.cc,.dd,.ee
{
top:10px;
left:10px;
width:10px;
height:10px;
overflow:hidden;
background:#F90;
}
.b,.d,.e
{position:relative;}
.cc,.dd,.ee
{position:absolute;}
</style>
<divclass="a">
<divclass="aa"></div>
A:均不设置postion,一样平常嵌套干系
</div>
<divclass="b">
<divclass="bb"></div>
B:仅外div设置relative,一样平常嵌套干系
</div>
<divclass="c">
<divclass="cc"></div>
C:仅内div设置absolute,文档中为嵌套干系,页面中内div浮起[非float],相对页面定位,与外div有关。
</div>
<style>
body
{margin:30px;font-size:9pt;}
.a,.b,.c,.d,.e
{
width:100px;
height:100px;
margin:5auto;
color:#fff;
background:#000;
}
.aa,.bb,.cc,.dd,.ee
{
top:10px;
left:10px;
width:10px;
height:10px;
overflow:hidden;
background:#F90;
}
.b,.d,.e
{position:relative;}
.cc,.dd,.ee
{position:absolute;}
</style>
<divclass="a">
<divclass="aa"></div>
A:均不设置postion,一样平常嵌套干系
</div>
<divclass="b">
<divclass="bb"></div>
B:仅外div设置relative,一样平常嵌套干系
</div>
<divclass="c">
<divclass="cc"></div>
C:仅内div设置absolute,文档中为嵌套干系,页面中内div浮起[非float],相对页面定位,与外div有关。
</div>
<divclass="d"style="background:#ff0000">
<divclass="dd"></div>
D:外div设置relative,内div设置absolute,内div浮起来并相对外div定位
</div>
<divclass="d"style="background:#ff0000">
<divclass="dd"style="position:relative"></div>
D:外div设置relative,内div设置relative,内div浮起来并相对外div定位
</div>
<divclass="e">
<divclass="ee"style="left:-10px;"></div>
E:这个是申明界限成绩。-10!=反向10px间距
</div>
注重两个白色的中央笔墨,个中,相对定位在嵌套中,好象要站居必定地位,而绝对定位则没有</p>
你用什么用的熟练就用什么,讲究的是效率,客户永远不管你用什么,页面就要好看,功能就要好用,还有时间和成本的问题。 |
|