CSS九宫格带边框的多种实现

九宫格，每个单元格滑动上去显示完整边框。

本身考察的知识点并不复杂，margin负值的遮挡，以及流布局中relative的超越。

代码固定部分是这样的，

<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5.0</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>   
 <div>9</div>      
</div>

有四个场景，

1.兼容较新浏览器，不能改html结构，利用CSS3,   里面我用到了nth-child  http://jsbin.com/exuKuXI/3  兼容IE9+

2.兼容所有浏览器，可以改html结构，可以使用浮动   http://jsbin.com/uTOQEVO/3

3.兼容所有浏览器，可以改html结构，不允许使用浮动   http://jsbin.com/IvopIxi/40

4.兼容所有浏览器，不能改html结构，可以使用js　　http://jsbin.com/ESELAQU/6

 

转载于:https://www.cnblogs.com/jamesldj/p/3336326.html