border边界定位理论

最新推荐文章于 2023-01-09 16:37:17 发布

J狂奔的蜗牛

最新推荐文章于 2023-01-09 16:37:17 发布

阅读量665

点赞数

文章标签： border边界定位理论

本文链接：https://blog.csdn.net/fnaofdgug/article/details/99687125

版权

border边界定位理论

这是学习的第二周，我们重新学习了一遍CSS布局，这次内容比较讲解的比较具体，使用的也相对的灵活，做了一个小米V5主页的布局练习，在用

定位布局的时候学习到很多东西，比如字体、a标签默认是无高度的，float位置的浮动位置是会被空出来的，被后面的内容所填充，而且在使用float的时候要注意在设置了float属性的内容（方块）将会影响下面一个内容（方块）的显示可能出现，需要进行设置clear:both进行清除浮动，当然这里我想谈的是关于边界border的设置问题。

下面的是一个图片定位代码：这里面涉及到两张图片，一张带手机的V5图片，一张没字的两个带按钮形状的图片。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>定位图片</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			#d1 {
				background-image: url(images/icon-bg.png);
				width: 350px;
				height: 90px;
				background-repeat: no-repeat;
				border: 0px solid red;
				margin-top: 400px;
				margin-left: 20px;
			}
			#d2 {	
				background-image: url(images/banner.jpg);
				width: 1000px;
				height: 550px;
				background-repeat: no-repeat;
				border: 1px solid red;
			}
			a {
				margin-left: 57px;
			}
		</style>
	</head>

	<body>
		<div id="d2">
			

## **<!--<br />-->**

			<div id="d1">
				<br />
				<br />
				<a href="#"><font color="red">下载MINU</font></a>
				<a href="#"><font color="#494949">进入论坛</font></a>
			</div>
		</div>
	</body>

</html>

显示的样子为下图：
[外链图片转存失败(img-l6SwvEUL-1565967824520)(http://127.0.0.1:8020/jianglong/%E5%B0%8F%E7%B1%B3/learn1.html)] 很明显有个红色的边界线，要说的有趣现象就是在这个地方，当你去掉红色的border边界线的时候，背景图片V5也将移动margin-top: 400px;相同的像素，这是为什么呢？
这是由于有border的时候大方块和小方块的上边界是有距离的，margin-top: 400px;可以正常使用，而去掉border: 1px solid red;的一个像素会导致大小方块上边界重合，无法正确判别是哪个方框的边界，均移动了400px;如下图：
在这里插入图片描述
由上面的效果图可以看出大小方块均移动了400px;而解决这个问题的方法也比较简单，将他们重合的边界错开即可，给小方块向下换一行（## ），简单快捷，在做布局的时候很实用。