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:0; margin:0;}
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属性来去掉间隔