div +css 小问题
发布网友
发布时间：2022-04-23 21:54
共6个回答
懂视网
时间：2022-05-13 00:43
默认的ul的内外补丁（margin、padding）都不是0，如果在li中用到的左漂浮属性（float:left;）时往往会把外部div撑大，导致页面变形，而且在ie6里，第一个li会有一个小小的缩进值，最终导致排版出问题。解决div层不被撑大时应将层的内外补丁设为0即可（margin:0;padding:0;），而解决第一个li有缩进值时则应该定义li为块状显示（display:inline;）即可
2. img属性的问题
这里牵涉的不同浏览器的问题，ie6是一直让网页设计师最头疼的一个问题。页面插入img时在ie6里有时图片显示的高度总是要大于准确值，会多出下面的2px的误差，解决方法是给img定义一个显示属性：img{float:left;}即可
3. overflow属性的问题
此属性用的最多的地方就是文本域、注册协议等，因为文字篇幅比较大，但又不想占用大的页面篇幅，这里就可以定义好层的宽度和高度值，然后加上overflow:auto;属性。
4. float属性问题
有时会在水平方向上漂浮2个或2个以上的div层，都使用了float:left;属性，最终导致下面的层会漂浮到该水平方向上来，导致页面显示非常混乱，不注意的话在排错阶段也很难找出问题所在。对待float属性一定要谨慎，解决以上问题方法有二，第一是将这几个漂浮的层的父级层定义clear:both;属性；第二是将这几个层的宽度值加起来的值等于父级元素的宽度值，这样下面的层自然不会漂上来。
5. height值不统一
当height为1px时，在ie6中可能并不是1px而是超过1px，怎么解决呢？方法有两种，第一种是直接将该div层里的字号设为1px就可以了（font-size:1px;），第二种方法是在该div层里设置行高即可（line-height:1px;），但这里需要提醒下，在ie6里该层不能为空，可以写一个空格字符（ ）即可。
6. css编码问题
很多人写页面的时候习惯通过dw软件来创建一个html页面，但往往又忽略了其默认编码格式的设置，最终导致页面显示乱码。@charset "utf-8"注意这行代码，utf-8与gb2312是比较常用的两种编码方式，选择与之匹配的编码格式，避免出现乱码。
7. 关于选择器的选择（class和id）问题
当一个div要在页面中多次使用时，不要用id，要用class，还有就是要用引用js的时候，样式最好不要用id，因为id要留给js使用，当程序员写后台用的是.net时，最好不要用id，id要留给程序员用，前台我们就用class好了。
8. div层高度自动扩展问题
就是div层的结构很复杂，用了至少2个以上的div层，在定义好最小高及高度为自动，但最后超过层高度后导致在ff中显示为高度不自动扩展，解决ff不兼容方法很简单，只要加上：overflow:hiiden;即可。
9. 常用的兼容属性写法问题
这里具体实例不列出了，估计长篇大论的也没问会看，我就把常用到的兼容性属性列出来，具体灵活运用就靠自己啦！建议定义属性时书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。
①!important属性只对ff生效，如：width:200px!important;width:100px;则ff里宽度显示为200px
②带“_”的属性只对ie6生效，如：color:red;_color:blue;则ie6里字体颜色为blue
③带“+”的属性只对ie7生效，写法如上
④ff什么都不识别，但样式中加上上述小符号，则优先对特定浏览器生效，例如css定义为：color:yellow;+color:blue;_color:red; 则输出效果为ff显示黄色，ie7显示为蓝色，ie6显示为红色
热心网友
时间：2022-05-12 21:51
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div测试</title>
<style>
body{ margin:0px;}
#container{width:900px;margin:0px auto;}
#header{height:100px; background-color:#FF0000;margin:0; width:100%; float:left;}
#menu{height:20px; background-color: #999999;margin:0px; width:100%; float:left;}
#sidebar{width:250px;float:left; background-color:#FFFF00;margin:0px;}
#content{width:630px; float:right; background-color: #9966CC;margin:0px;}
#foot{height:100px; background-color:#FF00FF}
#t{width:100px; background-color:#0033FF}
#g{width:80px; background-color:#996600}
.clearfloat{clear:both; height:0px; line-height:0px;}
</style>
</head>
<body>
<div id="container">
<div id="header"> this is header</div>
<br class="clearfolat"/>
<div id="menu">this is menu</div>
<br class="clearfolat"/>
<div id="sidebar">this is sidebar</div>
<div id="content"><p>this is content</p>
<p>this is content</p><p>this is content</p>
<div style="background-color:#FF66CC">
<div id="t">ttttt</div>
<div id="g">gggggg</div>
</div>
<p>this is content</p><p>this is content</p>
<p>this is content</p><p>this is content</p>
</div>
<br class="clearfloat"/>
<div id="foot">this is foot</div>
</div>
</body>
</html>
以上是你想要的效果,直接在样试里面加个 float:left; 就OK了。
热心网友
时间：2022-05-12 23:09
热心网友
时间：2022-05-13 00:44
热心网友
时间：2022-05-13 02:35
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div测试</title>
<style>
body{ margin:0px;}
#container{width:900px;margin:0px auto;}
#header{height:100px; background-color:#FF0000;margin:0px;}
#menu{height:20px; background-color: #999999;margin:0px;}
#sidebar{width:250px;float:left; background-color:#FFFF00;margin:0px;}
#content{width:630px; float:right; background-color: #9966CC;margin:0px;}
#foot{height:100px; background-color:#FF00FF}
#t{width:100px; background-color:#0033FF}
#g{width:80px; background-color:#996600}
.clearfloat{clear:both; height:0px; line-height:0px;}
div.clearfolat{clear:both; height:0; line-height:0;}
</style>
</head>
<body>
<div id="container">
<div id="header"> this is header</div>
<div class="clearfolat"></div>
<div id="menu">this is menu</div>
<div class="clearfolat"></div>
<div id="sidebar">this is sidebar</div>
<div id="content"><p>this is content</p>
<p>this is content</p><p>this is content</p>
<div style="background-color:#FF66CC">
<div id="t">ttttt</div>
<div id="g">gggggg</div>
</div>
<p>this is content</p><p>this is content</p>
<p>this is content</p><p>this is content</p>
</div>
<br class="clearfloat"/>
<div id="foot">this is foot</div>
</div>
</body>
</html>
热心网友
时间：2022-05-13 04:43
