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

时间：2022-06-25 11:23:11 编辑：袖梨来源：一聚教程网

一、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;

六、图片产生的间隙
父元素直接包含，这个图片下方会和父元素边缘产生间隙。
解绝方法：
1.在源代码中让

和在同一行，因为那个间隙是由换行符产生的。
2.给添加样式 display:block;

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

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

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

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程