微信开发知识学习（一)

红太狼 2022-08-21 00:12 240阅读 0赞

HTML页面开发并不熟练的情况下坚持一周的开发学习了，总的来说，感觉自己越来越入门了，上篇文章介绍了自己对H5开发过程中的宏观把控，此次则针对一些细节问题进行讨论。

1. 对于div的定位方式：absolute、position、static、fixed

absolute，官方解释：将对象从文档流中脱出，使用left，right，top，bottom等属性进行绝对定位。层叠通过css z-index属性定义。此对象不具边距，任由补白和边框。

示例：

.div1{
    				width:100px;
    				height:100px;
    				background-color:red;
    				margin:2px;
    				position:static;					
    			}
    			.div2{
    				width:100px;
    				height:100px;
    				background-color:green;
    				margin:2px;
    				position:absolute;
    				left:20px;		
    			}
    			.div3{
    				width:100px;
    				height:100px;
    				background-color:blue;
    				margin:2px;
    				position:absolute;	
    			}

效果图：

![SouthEast][]

relative：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中便宜自身位置，可以设置z-index分层设计。说白了，relative如果便宜自己原来的位置，任然占用空间大小，以下兄弟节点不能顶替上面的位置。

示例：

.div1{
    				width:100px;
    				height:100px;
    				background-color:red;
    				margin:2px;
    				position:static;
    			}
    			.div2{
    				width:100px;
    				height:100px;
    				background-color:green;
    				margin:2px;
    				position:relative;
    				left:200px;
    				
    			}
    			.div3{
    				width:100px;
    				height:100px;
    				background-color:blue;
    				margin:2px;
    				position:absolute;
    				
    			}

效果图：

![SouthEast 1][]

absolute与relative除了在文档流中占位置不同之外，定位方式也不同：

示例：

absolute相对于父节点的位置进行定位：

.div2{
    				width:100px;
    				height:100px;
    				background-color:green;
    				margin:2px;
    				position:relative;
    				left:200px;
    				
    			}
    			.div3{
    				width:100px;
    				height:100px;
    				background-color:blue;
    				margin:2px;
    				position:absolute;
    				top:100px;
    			}
    			.div4{
    				width:200px;
    				height:200px;
    				background-color:#342232;
    				margin:2px;
    				position:relative;
    				left:200px;
    				top:200px;
    			}

效果图：

![SouthEast 2][]

relative相对于上一个能确定位置的元素进行定位：（将上面代码的div3的定位方式改成relative）

![SouthEast 3][]

设置浮动方式则图像不再占有文档流，底下元素移到上面占有该元素位置。

.div2{
    				width:100px;
    				height:100px;
    				background-color:green;
    				margin:2px;
    				position:relative;
    				float:left;
    				left:20px;
    			}
    			.div3{
    				width:100px;
    				height:100px;
    				background-color:blue;
    				margin:2px;
    				position:relative;
    				
    			}

效果图：

![SouthEast 4][]

2. 透明度问题

常规设置透明度的方式：opacity:0.4;但是存在一个问题，父级的div透明度也会影响到子级div，这种情况下采用另外一种设置透明度的方法：background-color: rgba(0,0,0,0.5)

3. 滚动条存在情况下，实现弹出框位置不变

$(function(){
    		$(window).scroll(function(){
    			var top =$(window).scrollTop();
    			$("#container6").animate({"top":top},30);
    			$("#container9").animate({"top":top},30);
    			$("#container5").animate({"top":top},30);
    		});
    	});

总结：

div的位置对于我这个初学者来说，刚开始是一个累赘，随着逐渐对它的深入了解，神秘面纱也逐渐浮出水面。

[SouthEast]: /images/20220731/a88fac3fceb3405f86e9cc281cc4ad71.png
[SouthEast 1]: /images/20220731/a8076d8e49ed4897b3c7378bbc46e41a.png
[SouthEast 2]: /images/20220731/6cbcd3b1149847669fe994c5c7ba5066.png
[SouthEast 3]: /images/20220731/adccced0940d4bdbbf3ed64cb6249743.png
[SouthEast 4]: /images/20220731/e32b368abf58496cb5a7892179a48f36.png