margin: -1px; 解决两个div之间边框重叠线加粗问题
效果图如下
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin技巧</title>
<style type="text/css">
.box{
width: 202px;
height: 156px;
background-color: gold;
margin: 50px auto;
}
.box div{
width: 200px;
height:30px;
border:1px solid green;
background-color: gold;
margin: -1px;/*本句设置被分为5个格子的div，border重叠产生两条线重叠变粗效果消失，原理为下面的div顶部border被上面的单个div覆盖不能显示，设置值为border值（解决两个div之间边框重叠线加粗问题）*/
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>margin:x auto;可以直接设置元素水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin技巧</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
/*margin:50px auto 50px auto;margin设置盒子的位置，这句代码一次设置了 上左下右 四个位置在页面的位置。margin:x auto;可以设置元素水平居中*/
margin: 50px auto 50px;/*这句设置了上 左右 下在页面的位置*,设置顺序和padding相同，四个值时设置上左下右格式，三个值时设置上、左右、下格式，两个值时设置上下、左右的格式，一个值时设置四个方向的值，但是auto不适用*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>版权声明：本文为weixin_74239923原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。