一个简单的负边距布局

忘记是哪家公司的面试题了，是一道考察css的题
要求是这样布局（如图）兼容ie6等主流浏览器 大div宽高都为150px 小框为正方形边框为3px，鼠标划过边框颜色变化。

解答
<div id="div1">

<a>111</a><a>222</a><a>333</a><a>444</a><a>555</a><a>666</a><a>777</a><a>888</a><a>999</a>

</div>

#div1{
width: 150px;
height: 150px;
overflow: hidden;
}
#div1 a{
list-style-type: none;
float: left;
width: 44px;
height: 44px;
background: #ccc;
margin-right: -3px;
margin-bottom: -3px;
border: 3px solid #999;
display: block;
cursor: pointer;

}
#div1 a:hover{
border: 3px solid #333;
position: relative;

}

总结此题虽然看似简单 但是不容易做对 这题考察了负边距布局，还有定位，兼容性，是对css一个综合考察。

 

转载于:https://www.cnblogs.com/xingweb/p/4253069.html