本文介绍了浮动元素如何影响父元素高度，以及如何通过overflow:hidden来解决高度自适应问题。此外，还讲解了如何处理图片的显示方式，包括将img元素设置为block和其外包裹的a标签同样设置为block，以实现自定义宽高的效果。文章还探讨了针对不同浏览器的CSS hack应用，如针对IE6的背景颜色设置。
问题一：子元素float后导致父元素高度不能自适应计算
解决办法：.
浮动会让子元素脱离文档流，当所有元素都脱离时，此时父元素没有设置高度，导致父元素高度为0
给父元素添加overflow:hidden;会清除所有子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会裁剪
问题二： img是内联元素，但是其本身有宽高，为了能自己设置其宽高:
1.有img就把其设置为display：block,
2.若是img外面还有包裹一个a标签，就把a标签也设置为display:block
问题三：hack的应用
针对IE6而言：第一行，linearxxx不支持，显示不出来
第二行，认识*，所以background设定为#999
第二行覆盖第一行
*对于chrome而言，第一行，支持
第二行，不认识*
第一行，生效
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 1.不同浏览器的margin和padding不一致 */
/* 2.建议少用*,会增加网页加载性能 ，他会轮询所有的元素，效率低下*/
/* *{
margin: 0;
padding: 0;
} */
body,div,p,ul,li,dl,dt,dd,h1,a{
margin: 0;
padding: 0;
}
body{
font-family: 微软雅黑, "verdana, geneva, arial, helvetica, sans-serif";
}
html,body{
background-color: #2e2e2e;
}
#header, #banner, #content, #footer{
width: 1176px;
margin: 0 auto;
height: ;
background-color: #900;
}
#header{
overflow: hidden;
/*问题：1.浮动会让子元素脱离文档流，当所有元素都脱离时，此时父元素没有设置高度，导致父元素高度为0
*2.overflow:hidden;会清除所有子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会裁剪
**/
}
/* #header{
*width: 1500px;
*background: #EEEEEE;
*现在的header容器高度为0;float元素会脱离文档流，
*导致后面没有脱离文档流的元素向前补位
} */
body{
padding-top: 45px;
}
img{
/* img是内联元素，但是其本身有宽高，为了能自己设置其宽高:
*1.有img就把其设置为display：block,
*2.若是img外面还有包裹一个a标签，就把a标签也设置为display:block
*/
border: none;/* 低版本IE会有边框 */
}
#logo {
width: 222px;
height: 84px;
float: left;
background-color: #111;
}
#logo a{
display: block;
width: 222px;
height: 84px;
}
#log a img{
display: block;
}
#nav{
width: 954px;
height: 84px;
float: left;
background-color: #111;
}
#nav li{
float: left;
list-style: none;
}
#nav li a{
display: block;
padding: 0 20px;
height: 84px;
line-height: 84px;
text-align: center;
font-size: 23px;
color: #eee;
text-decoration: none;
float: left;/*兼容低版本IE（a标签display:block引起的a标签换行）*/
}
#nav li a:hover{
color: #990000;
font-size: 24px;
background: linear-gradient(to bottom, #eee, #555);
}
#nav li .navActive{
color: #990000;
background: linear-gradient(to bottom, #eee, #555);
*background: #999;
/*hack的应用：
*针对IE6而言：第一行，linearxxx不支持，显示不出来
* 第二行，认识*，所以background设定为#999
* 第二行覆盖第一行
*对于chrome而言，第一行，支持
* 第二行，不认识*
* 第一行，生效
*/
}
#banner{
margin: 10px auto;
height: 580px;
}
#banner a{
display: block;
width: 1176px;
height: 580px;
overflow: hidden;
}
#banner a img{
display: block;
}
#content{
overflow: hidden;
background-color: #eaeaea;
font-size: 12px;
line-height: 24px;
}
#leftArticle{
width:765px;
float: left;
margin: 10px;
display: inline;/*解决IE6的margin-left和float引起的double margin问题*/
margin-right: 0;
font-size: 23px;
}
#leftArticle #artId{
width:100%;
height: 406px;
display: block;
}
#leftArticle #artId img{
display: block;
}
#leftArticle h1{
margin: 20px 0;
/*此处使用margin而不用padding若是使用padding会导致重新设置line-height*/
}
#leftArticle h1 a{
color: #900;
margin-left: 20px;
text-decoration: none;
}
#leftArticle h1 a:hover{
text-decoration: underline;
}
h1{
font-size: 100%;
}
#leftArticle p{
color: #333;
text-indent: 2em;/*设置段落首行的缩放比例（缩进两个字）*/
font-size: 14px;
margin-bottom: 30px;
}
#rightInfo{
float: left;
margin: 10px;
width: 381px;
height: 800px;
}
#rightInfo dl{
margin-bottom: 10px;
}
#rightInfo dl dt{
font-size: 15px;
font-weight: bold;
text-indent: 20px;
background: #900;
height: 32px;
line-height: 32px;
color: #fff;
}
#rightInfo dl dd{
height: 24px;
line-height: 24px;
color: #333;
background: #fff;
text-indent: 16px;
font-size: 13px;
}
#rightInfo dl dd:last-child{
margin-bottom: 20px;
}
#rightInfo dl dd a {
text-decoration: none;
color: #333;
}
#rightInfo dl dd a:hover{
color: #990;
text-decoration: underline;
}
#footer{
background: #393838;
margin-top: 10px;
padding-top: 18px;
height: 52px;
line-height: 18px;
color: #ccc;
text-align: center;
font-size: 12px;
margin-bottom: 30px;
}
#footer a{
color: #ccc;
text-decoration: none;
}
#footer a:hover{
text-decoration: underline;
color: #999900;
}
</style>
</head>
<body>
<div id="header">
<header>
<div id="logo">
<a href="#"><img src="./img/logo.jpg" alt="loading failed!"></a>
</div>
<div id="nav">
<ul>
<li><a class="navActive" href="#">啊令</a></li>
<li><a href="#">魏无羡</a></li>
<li><a href="#">蓝湛</a></li>
<li><a href="#">含光君</a></li>
<li><a href="#">魏婴</a></li>
<li><a href="#">晓星尘</a></li>
<li><a href="#">避尘</a></li>
</ul>
</div>
</header>
</div>
<div id="banner">
<a href="#"><img src="./img/banner.jpg" alt=""></a>
</div>
<div id="content">
<div id="leftArticle">
<a id="artId" href="#"><img src="./img/article.png" alt=""></a>
<h1>
<a href="#">标题</a>
</h1>
<p>父亲魏长泽，母亲藏色散人。长相俊美，性格不羁，爱憎分明，重情义。幼年父母在夜猎中丧生，被江澄之父江枫眠带回云梦江氏莲花坞，与江澄、江厌离一同生活修习。曾在姑苏蓝氏学习，结识了蓝忘机。在把金丹剖给江澄，被温晁等人扔下乱葬岗后，在乱葬岗呆了三个月，期间修习鬼道，三个月后出山参加射日之征。射日之征后脱离江氏。后在穷奇道事变后被仙门百家讨伐，最后死于恶鬼反噬。十三年后被莫玄羽献舍重生，与蓝忘机结伴而行，一路追查被分尸的人的身份，渐渐喜欢上蓝忘机，小心翼翼地一次又一次试探，最后在蓝曦臣点明当年旧事后与蓝忘机互通心意，终成眷属。</p>
<p>父亲魏长泽，母亲藏色散人。长相俊美，性格不羁，爱憎分明，重情义。幼年父母在夜猎中丧生，被江澄之父江枫眠带回云梦江氏莲花坞，与江澄、江厌离一同生活修习。曾在姑苏蓝氏学习，结识了蓝忘机。在把金丹剖给江澄，被温晁等人扔下乱葬岗后，在乱葬岗呆了三个月，期间修习鬼道，三个月后出山参加射日之征。射日之征后脱离江氏。后在穷奇道事变后被仙门百家讨伐，最后死于恶鬼反噬。十三年后被莫玄羽献舍重生，与蓝忘机结伴而行，一路追查被分尸的人的身份，渐渐喜欢上蓝忘机，小心翼翼地一次又一次试探，最后在蓝曦臣点明当年旧事后与蓝忘机互通心意，终成眷属。</p>
<p>父亲魏长泽，母亲藏色散人。长相俊美，性格不羁，爱憎分明，重情义。幼年父母在夜猎中丧生，被江澄之父江枫眠带回云梦江氏莲花坞，与江澄、江厌离一同生活修习。曾在姑苏蓝氏学习，结识了蓝忘机。在把金丹剖给江澄，被温晁等人扔下乱葬岗后，在乱葬岗呆了三个月，期间修习鬼道，三个月后出山参加射日之征。射日之征后脱离江氏。后在穷奇道事变后被仙门百家讨伐，最后死于恶鬼反噬。十三年后被莫玄羽献舍重生，与蓝忘机结伴而行，一路追查被分尸的人的身份，渐渐喜欢上蓝忘机，小心翼翼地一次又一次试探，最后在蓝曦臣点明当年旧事后与蓝忘机互通心意，终成眷属。</p>
</div>
<div id="rightInfo">
<dl>
<div>
<dt>标题1+++++++++++++</dt>
<dd><a href="#">清风明月晓星尘</a></dd>
<dd><a href="#">傲雪凌霜宋子琛</a></dd>
<dd><a href="#">云深不知处</a></dd>
</div>
<div>
<dt>标题2+++++++++++++</dt>
<dd><a href="#">清风明月晓星尘</a></dd>
<dd><a href="#">傲雪凌霜宋子琛</a></dd>
<dd><a href="#">云深不知处</a></dd>
</div>
<div>
<dt>标题3+++++++++++++</dt>
<dd><a href="#">清风明月晓星尘</a></dd>
<dd><a href="#">傲雪凌霜宋子琛</a></dd>
<dd><a href="#">云深不知处</a></dd>
</div>
<div>
<dt>标题4+++++++++++++</dt>
<dd><a href="#">清风明月晓星尘</a></dd>
<dd><a href="#">傲雪凌霜宋子琛</a></dd>
<dd><a href="#">云深不知处</a></dd>
</div>
<div>
<dt>标题5+++++++++++++</dt>
<dd><a href="#">清风明月晓星尘</a></dd>
<dd><a href="#">傲雪凌霜宋子琛</a></dd>
<dd><a href="#">云深不知处</a></dd>
</div>
<div>
<dt>标题6+++++++++++++</dt>
<dd><a href="#">清风明月晓星尘</a></dd>
<dd><a href="#">傲雪凌霜宋子琛</a></dd>
<dd><a href="#">云深不知处</a></dd>
</div>
<div>
<dt>标题7+++++++++++++</dt>
<dd><a href="#">清风明月晓星尘</a></dd>
<dd><a href="#">傲雪凌霜宋子琛</a></dd>
<dd><a href="#">云深不知处</a></dd>
</div>
</dl>
</div>
</div>
<div id="footer">
<p>
<a href="#">关于我们</a>
<a href="#">广告服务</a>
<a href="#">联系我们</a>
<a href="#">版权声明</a>
<a href="#">合作对象</a>
</p>
<p>
<a href="">京ICP备</a>
All rights(C) 2008-2010 Reserved.
</p>
</div>
</body>
</html>
扫一扫
3445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
