css负边距布局

三行三列的布局

代码结构

<div class="container">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
</div>　

样式

 body,ul,li{ padding:; margin:;}
 ul,li{ list-style:none;}
 .container{
     width: 340px;
     border: 1px solid red;
 }
 ul {
     margin-right: -20px;
     margin-bottom: -20px;
     overflow: hidden;
 }
 ul li {
     width: 100px;
     height: 100px;
     margin-right: 20px;
     margin-bottom: 20px;
     background: blue;
     float: left;
 } 

不使用float，可以换成display:inline-block，⚠️：该种情况需要设置font-size属性来去掉间隔