DIV CSS网页规划技巧：background-color奇异效果-CSS教程-爱易网页

DIV CSS网页规划技巧：background-color奇异效果

日期：2013-09-19　浏览次数：21197 次

　　background-color奇怪的进入相临元素

　　这是一个非常奇怪的景象。目前还不清楚它构成的具体缘由是什么，background-color会奇怪的进入相临元素中。看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css" >* { margin:0; padding:0;}.大块 { background-color:#FFC;}.浮动块 { width:100px; height:100px; float:left; background-color:#F00;}.清除浮动 { clear:both;}.注释部分 { margin-top:10px;}</style></head><body><div class="大块"> <div class="浮动块"></div> <div class="信息">这里是一些文字</div> <div class="清除浮动"></div></div><div class="注释部分">神哪....怎样到了“大块”里面去了。</div></body></html>

[Ctrl+A 全部选择提示：你可先修正部分代码，再按运转]

　　我们仅设置了大块的背景色，注释部分是与大块相邻的一个元素。奇怪的是大块的背景色却进入了注释部分。处理的办法是给其中的一个元素加上position:relative;可以消弭此景象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css" >* { margin:0; padding:0;}.大块 { background-color:#FFC;}.浮动块 { width:100px; height:100px; float:left; background-color:#F00;}.清除浮动 { clear:both;}.注释部分 { position:relative; margin-top:10px;}</style></head><body><div class="大块"> <div class="浮动块"></div> <div class="信息">这里是一些文字</div> <div class="清除浮动"></div></div><div class="注释部分">神哪....怎样到了“大块”里面去了。</div></body></html>

[Ctrl+A 全部选择提示：你可先修正部分代码，再按运转]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

DIV CSS网页规划技巧：background-color奇异效果

相关资料更多>

推荐阅读更多>