第一种方法和第二种方法的优势利弊？
来源：2-10 编程练习
清泓4172801
2019-05-15 19:44:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*完善下列代码*/
.per{
width: 300px;
height: 300px;
background: red;
margin-left:200px;
margin-top: 200px;
position:relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position:absolute;
/*第一种方式*/
/*left:100px;*/
/*top:100px;*/
/*第二种方式*/
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
/*margin里面第一个auto和第二个auto的含义分别代表什么？*/
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
1回答
-
你好同学，第一个方式并不推荐使用，因为它需要根据父元素宽高进行计算，也就是说如果父元素宽高变化了，里面的内容就不会居中，还是要重新计算，所以这种方式是不标准的：
第二种方式的好处是不需要对父元素宽度进行参照计算，不管父元素宽高如何变化，子元素都会在里面居中，所以第二种方式更好。margin如果设置两个属性值，第一个表示上下间距，第二个表示左右间距。这种方式的原理类似于“拔河效应”，例如left和right都设置为0，左右两边都在拉它，这个时候设置一个auto，“我”直接居中好了。垂直原理一样的。
祝学习愉快 ，望采纳。
2
相似问题
回答 1
回答 1