css实现九宫格布局以及边框效果

2023年3月23日 387次阅读 来源: 九宫格问题 
<div>
	<ul class="clearfix">
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul class="clearfix">
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul class="clearfix">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
*{
	margin: 0;
	padding: 0;
}
div{
	margin-top: 10px;
	/* 外边框 */
	border: 1px solid #ebebeb;
	width: 90%;
	margin-left: 5%;
}
ul+ul{
	/* 中间两横边框 */
	border-top: 1px solid #ebebeb; 
}
li{
	width: 33.33333333333333333333%;
	height: 40px;
	float: left;
	list-style: none;
	/* padding和border计算在盒子模型里面 */
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
li+li{	
	/* 中间两竖边框 */		
	border-left: 1px solid #ebebeb;
}
/* 伪类清除浮动 */
.clearfix:after { 
content: "." ; 
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
.clearfix{ display: inline-block; }
/* Hides from IE-mac */ 
*html .clearfix{ height:1%; }
.clearfix{ display:block; }
/* End hide from IE-mac */
    原文作者：九宫格问题
    原文地址: https://blog.csdn.net/qq_33248419/article/details/77159489
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞