html、css常见问题及解决方案（1）

html、css常见问题及解决方案

1、选择器的写法

问题：对元素选择器，类选择器，ID选择器的理解模糊，不知道怎么去写。

解决方案：

（1）如果一个页面上有多个相同的元素，要给这个元素加上id或class，然后用id或class去定义它的样式；

（2）最容易混淆的就是”元素 .class和元素.class”，第一个表示.class那个元素是元素的子级，第二个表示选择的是同一个元素；“元素 元素和元素>元素”，第一个表示前边元素的所有后代元素，第二个表示前边元素的子代元素。

（3）选择器的优先级问题，参照一下ppt中的选择器优先级权值的表。

 

选择器的权值加到一起，大的优先，如果权值相同，后定义的优先。

2、背景图片的设置及定位问题

如果背景图片不显示，首先看一下路径是否正确，然后检查有没有给元素加宽高，元素的宽高就是图片的宽高，也可以给图片加个padding值，让图片能够正常显示，如果是在大图片上的其中一个小图的话，记得看一下背景定位值是否正确。

3、解决图像下方多出的3px问题

产生的原因主要是由图片的垂直对齐方式vertical-align引发的，默认对齐方式为base-line；

解决方案：

     1、将图片的垂直对齐方式vertical-align更改为 bottom；

     2、将图片display设置为block，并且指定width 和  height；

     3、设置图片所在的容器元素的width和height与图片一样。

4、当hover效果加边框时移动的问题

解决方案：给原始状态加一个透明边框

5、浮动问题

问题：子级元素的浮动，为父层元素所带来的影响，如果一个元素的所有子级内容都是浮动的，那么它的高度会变成 0；

 解决方案：

     1、设置父容器高度

     2、设置父元素的 overflow:hidden;

     3、在父元素中，增加一个空元素，添加clear:both;

问题：如果上面元素浮动的话可能会影响下面的元素，这时候可以给下面的元素加上一个清除浮动：clear：both/left/right,或者在这个元素之前加一个空元素，清除浮动。

6.定位问题及堆叠顺序

问题：绝对定位的使用

解决方案：

    1、相对于最近的已定位的祖先元素；

 2、如果元素没有已定位的祖先元素，那么它的位置就相对于body 进行定位，绝对定位会配合其他定位方式使用。

问题：堆叠顺序

解决方案：z-index必须配合定位方式使用，

 

这块的右边的弹出菜单学生会容易产生盖不住的情况，一般的情况就是学生把z-index加给了这两个的共同父级元素，例如

<ul>

<li>——》很多学生会把z-index加给这个li

<a href=”#”>图书、音像、数字商品</a>——》应该加给这个

<ul>——》弹出菜单

<li></li>

</ul>

</li>

</ul>

最后，给大家一个解决问题的方法，加border，如果找不出什么问题的话，可以给整体的这个元素加一个border，然后在chrome中进行调试。