css div布局中的9个常见问题

一、UL边距的问题
Ul里边margin和padding的默认值不是0,所以在嵌套li的时候如果指定了li的数值,可能把外部的div撑大,所以如果要使用ul的 时候要指定margin和padding为0,如下ul{margin:0px; padding:0px;}

 

 

二、图片设置的问题
现在很多网站都尽量把背景图片放置在一张图片上然后利用background-postion来取得背景图片,这样大大的减少了图片的大小也优化了 网站的打开速度,而有的图片在不同的浏览器中的数值也不同,比如在IE6中图片的高度就不太精准所以应该设置img{ display:block}。最好的图片格式应为gif.

 

三、float对齐的问题
我们设置float对齐的时候往往会出现下一行的div挤到上一行出现并行拥挤的现在这是因为在设置float漂浮的时候应清除两遍的内容,在样式中加入如下代码clear:both就可以了。

 

四、id和class的定义
相对于id定义的样式在页面中只能被调用一次,所以我们在定义样式的时候如果想被多次调用使用的话要用class,在使用js的时候最好不要用id定义样式容易和js的id起冲突。

 

五、双边距问题
浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。解决方法:在此浮动元素增加样式  display:inline;

 

六、图片产生的间隙
父元素直接包含<img>,这个图片下方会和父元素边缘产生间隙。
解绝方法:
1.在源代码中让</div>和<img>在同一行,因为那个间隙是由换行符产生的。
2.给<img>添加样式  display:block;

 

七、块元素最小高度问题
块元素最小高度为10px,当高度定义小于10px时,仍为10px;解决方法:为此块元素添加样式  overflow:hidden; 或 让此款块元素的字体大小等于此会元素的高度。

 

八、浮动LI后边元素换行的问题
列表的li为浮动,则列表后面的元素不能换行。解决方法:为这个ul定义合适的高或给包含这个ul 的父div定义合适的高。

 

九、子元素的上下外边界问题
在父元素没有定义高度时,子元素的上下外边界和父元素上下外边界叠加,并且显示在父元素外面。解决方法:给父元素定义内边距或边框。

时间: 2024-10-29 04:36:10

css div布局中的9个常见问题的相关文章

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义

核心提示:DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义 ol 有序列表 <ol><li>--</li><li>--</li><li>--</li></ol> 表现为 1--2--3-- ul 无序列表,表现为li前面是大圆点而不是123 <ul><li>--</li><li>--</li></ul> 很多人容

CSS导航布局中当前页面的具体实现demo示例

以下代码内容为CSS导航布局中当前页面的做法,属于站长常用代码,各位站长朋友有类似情况的可以参考下哈,希望对大家有所帮助     复制代码 代码如下: <!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

代码-css+div布局 如何实现两张图片平行放置

问题描述 css+div布局 如何实现两张图片平行放置 很简单的一段代码,但不知为何我想让right中的图片放到middle的旁边,可总是无法实现(如图): 就是如何将右下角的图片移到跟上一个图片平行的位置. 解决方案 第一个图片不要用p或者其它的块级元素包裹,或者设置一个float:left的css即可. 解决方案二: 浏览器默认是流体布局,从上到下:需要认为设置为水平布局就可以了:第一个div设置为float:left:第二个div设置为float:right: 解决方案三: 给你左边图片一

css+div布局的优点及css的好处

css+div布局的优点及css的好处.现在流行做网页设计都必须懂css+div布局,特别是那种前台设计师们,这是他们找工作的重要一个亮点哦,今天我们就来看看css 布局的优势所在吧. 一.页面载入快 由于页面都html文件相分离了,所在html文件就更小了,自然加载就要快速一些 二.二次开发更方便 由于使用了DIV+CSS制作方法,在修改时只要知道那个要修改的块id或class就可以直接在外部进行修改就OK了. 三.保持视觉的一致性 DIV+CSS最重要的优势之一:保持视觉的一致性:以往表格嵌

提高css+div布局的可读性

提高css+div布局的可读性 一.CSS样式文件分解 对于小项目,在写代码之前,按页面结构或页面内容将代码分为几块并给予注释.例如,可以分别将 全局样式.布局.字体样式.表单.评论和其他分为几个不同的块来继续工作. 而对于较大的工程,这样显然不会有什么效果.此时,就需要将样式分解到几个不同的样式表文件.下面的master stylesheet 就是这一方法的例子,它的工作主要是导入其他样式文件.使用这一方法不仅能优化样式结构,而且有利于减少一些不必要的服务器请求.而分解文件的方法就有许多种,m

DIV+CSS页面布局中BUG解决方法

DIV+CSS布局中,出现BUG之后,可以考虑从以下几方面检查. 一.检查页面的标签是否闭合 不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题,却仅仅源于这里.毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题. 快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮. 二.样式排除法 有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围. 对于刚才锁定

DIV+CSS网页布局中margin优化的一种思路

css|网页|优化 margin是我们在进行CSS布局中非常常用的属性之一,但如果运用不得当,往往会产生过多的垃圾代码,让我们的编码体积不断增加.今天我们介绍一种编码优化的小实例,通过此例希望大家能意识到代码优化的途径是多种多样的,也算是一个抛砖引玉的引子吧. 看XHTML代码: <div id="main">     <div id="body1">          <div id="content1"> 

Div+CSS网页布局中CSS无效的十个常见原因

核心提示:我们学习Div+CSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能. 我们学习Div+CSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能.下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决

DIV CSS网页布局中对段落进行排版的方法

css|网页 margin div css布局中段落使用<p>标签,对于段落的上下左右的空白(缩进)可以使用margin标签定义样式.margin有上.下.左.右四个方向的定义,正常情况下,我们可以用一行来描述我们需要的样式. 例如:margin: 20px 8px 8px 20px; 此句分别表示了:margin-top:margin-right:margin-bottom:margin-left. 四个数值的顺序分别是:上.右.下.左.是依时12:00开始的顺时针方向. 如何上下的值一致,