一、嵌套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"});
});
});
就先写这么多吧,之后再遇到什么问题会持续更新。