css技术点七：布局技巧

一、压住盒子边框,移动的时候显示

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

二、在已知父盒子和子盒子的宽度下，子盒子居中

①在已知父盒子和子盒子的宽度下
给子盒子设置margin:0,auto。
auto代表左右自适应。

三、在已知子盒子的宽度，不知道父盒子的宽度下，子盒子居中

给父盒子设置position: relative;
子盒子设置

div{
width: 100px;
height: 100px;
background: black;
position: absolute;
left: 50%;
top: 0;
margin-left: -50px;
}

即用定位先向右走父盒子宽度的50%，使子盒子左边在父盒子中心，再使用外边距向左走自己的宽度的一半，即可达到自适应水平居中。

五、行内块元素内容文字居中

盒子内容居中要写行高line-height:盒子高度和padding:0（上下距离为0） x( 左右的距离，看情况写),此时盒子最好不要设置宽度。
要是设置了宽度，可以把padding换成text-align:center来实现水平居中