静态网页三

最新推荐文章于 2024-06-15 09:50:36 发布

qq_1036183732

最新推荐文章于 2024-06-15 09:50:36 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/qq_41984522/article/details/80075703

版权

制作VR虚拟现实网站静态主页发现了如下问题：

问题1. 在静态网页制作中有出现的一个问题是使用margin:0 auto;不能居中的问题。

解决方法：

转化为块级元素。

margin:0 auto;是使块元素左右居中，所以非块元素居中时需要使用display:block; 转化为块元素，或者使用margin-top调整该元素到其父元素边界的距离。

问题2. 使用margin-top: XXpx; 时父级元素<div>会随着子元素margin-top: 的值而移动。

查询及尝试的解决方法：

(1). 使用padding-top: XXpx;

(2). 父元素使用overflow:hidden;

(3). 父元素相对定位，子元素绝对定位。

1.查得margin在没有上边框时父元素与子元素共用同一个顶部，可以使用padding撑开内部。

2.由于网页中使用了很多浮动，搭配overflow:hidden; 使父元素撑开，所以同时发现使用了overflow:hidden;的元素，其子元素使用margin-top 时不会使父元素移动。

	<head>	
            <style>    
                .box{
		      overflow: hidden;
		      width: 500px;
		      height: 300px;
		      background-color: red;
		    }
	        .box_1{
			width: 300px; 
			height: 200px;
			background-color:green;
			margin-top: 20px;
			}
	    </style>
	</head>
	<body>
		<div class="box">
			<div class="box_1"></div>
		</div>
	</body>