网页开发中遇到的一些问题及其解决方法总结

一、嵌套div中，子div设置margin-top会影响父div

这个问题相信不少人都遇到过，明明是设置了子div的margin-top，父div的margin-top会跟着被影响。

我在网上找到了一些方案并测试了，方案如下：

1、设置父div的position为absolute。这种方式在有些情况下反而会为开发造成困扰，比如，有时候并不需要设置absolute，设置完以后还要进行定位等操作。

2、设置父div的border为1px solid #xxxxxx，这样子就免去了定位造成的烦恼，在有些情况下会出现比较明显的边框也确实影响美观，大部分情况下可以设置边框颜色与背景色接近或者协调的颜色。

3、设置父div的padding-top为1px。这种方式相对于border方式来说，影响更小，对页面整体美观来讲也没什么影响。

4、设置float浮动，不管left还是right都行。这种方式在不影响页面美观的情况下还是很好用的，不想absolute一样脱离文档流，对于width：100%的div基本没有什么影响。

二、设置html、body的height、width为100%，二者上方留有空白

如图：

此时可能有这样几种情况：

1、body、html的margin、padding、border值未清零，此时应设置清零：

*{

    margin:0;

    padding:0;

    border:0;

}

2、这种情况就是由于没有注意第一种问题，子div的margin-top的影响，在Chrome和Firefox浏览器的控制台都可以看到元素的盒子模型，仔细检查有没有哪个子div的margin-top没有处理。这里要注意的是，子div不一定非要在父div顶部才能影响，你讲子div通过定位等方式放在页面中部，如果子div此时有margin-top值，而你又没有进行处理，也会造成出现白条的情况。

三、过渡效果想对选中元素的子元素的样式进行改变

transition过渡效果经常被用于细节部分的美化，让页面的动作更顺滑和美观。transition的基本操作如下

.card_1{
        height: 500px;
        width: 500px;
        background:red;
        transition:background 0.5s;
        -moz-transition:background 0.5s; /* Firefox 4 */
        -webkit-transition:background 0.5s; /* Safari and Chrome */
        -o-transition:background 0.5s; /* Opera */
    }
.card_1:hover{
        background:blue;   }

在.card_1中添加transition，在他的hover中添加相应变化，但如果此时card_1有一个子元素，想对其子元素样式进行操作，此时就显得有些没办法了。

我摸索到一个方法是：

使用JQuery，获取到这个card_1元素，然后在其hover事件中，通过css方法对其他元素样式进行修改，这个方法不仅能修改子元素，还可以修改其他任意元素的样式。然后在css文件中，.card_1内写法同上，不需要.card_1:hover的样式了，此时就可以通过过渡效果，对hover事件中的样式进行改变。

css：

.card_1{
        height: 500px;
        width: 500px;
        background:red;
        transition:background 0.5s;
        -moz-transition:background 0.5s; /* Firefox 4 */
        -webkit-transition:background 0.5s; /* Safari and Chrome */
        -o-transition:background 0.5s; /* Opera */
    }

js:

$(document).ready(function(){
    $(".card_1").hover(function(){               //card_1_1是card_1的子元素，hover方法有两个参数，具体自行了解。
        $(".card_1_1").css({"background":"red"});
    },function(){
        $(".card_1_1").css({"background":"blue"});
    });
});

就先写这么多吧，之后再遇到什么问题会持续更新。