margin负值之美
2019-01-11 本文已影响0人
让思念入土
1、负边距+定位：水平垂直居中
一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。（定位那有）
2、压住盒子相邻边框
一些页面布局中，鼠标滑过会有边框出现，而且一些盒子排列在一起时 按理说盒子浮动时边框重叠在一起会加粗，而网页中并没有，这是为什么呢？嘻嘻嘻~~~
Image 1.png
然而页面中的是这样的
Image 2.png
并且还会有这种效果
Image 4.png
代码部分：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 500px;
height: 400px;
border: 1px solid red;
}
div {
/*浮动的盒子贴在一起，边框会加粗*/
float: left;
width: 100px;
height: 100px;
padding: 20px;
border: 1px solid #ddd;
/*这种方法会解决边框加粗的情况*/
margin-left: -1px;
margin-top: -1px;
}
/*鼠标经过时，会显示红色的边框*/
.box div:hover {
/*元素显示的层级：定位、浮动、标准流*/
position: relative;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
