css布局之负margin妙用及其他实现
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css布局之负margin妙用及其他实现，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5706字，纯文字阅读大概需要9分钟。
内容图文
相信大家在项目的开发中都遇到过这样的需求，一行放X（X>1）个块且相邻块之间的间距相同。
大概就是上面这个样子，下面介绍几种实现的方式。
1.负margin大法
设置好元素的宽度和留白占满父级的宽度，然后设置父级的margin-left为留白的负留白的宽度
CSS Code复制内容到剪贴板
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
ul>li{
float: left;
}
ul>li>img{
width: 100%;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
</style>
<p>1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p>
<ul class="test1 clearfix">
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>
上面的误差是因为ul的margin和li的margin百分比的计算基于的元素不一样导致的，但是在移动端上因为视窗的范围有限，这个差别很小，在pc上一般使用px，所以可以忽略不计。（下面还有更多的办法）
2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持
CSS Code复制内容到剪贴板
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between;
}
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
width: 1200px;
border: 1px solid red;
margin-left: -3.33%;
}
.test4>li{
width: 30%;
margin-left: 3.33%;
}
</style>
<p>2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持</p>
<ul class="test2 clearfix">
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>这种实现暂时还没发现什么缺点，代码也简单易懂（推荐）
3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子）
CSS Code复制内容到剪贴板
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between;
}
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
width: 1200px;
border: 1px solid red;
margin-left: -3.33%;
}
.test4>li{
width: 30%;
margin-left: 3.33%;
}
</style>
<p>3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理</p>
<ul class="test3">
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>这种情况怎么能少了我们flex呢，弹性盒模型应该是专门用来处理这种情况吧，但是又有新旧盒子模型之分，各浏览器实现的都不太一样。所以一般情况两套盒子模型的属性都需要加上。（喜欢折腾就上吧，效果棒棒的）
4.classname实现
将需要特殊处理的元素加上单独的class，再做相应的处理。可以后台进行处理也可以前端处理（推荐后台处理）
CSS Code复制内容到剪贴板
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between;
}
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
padding: 0 2%;
}
.test4>li{
width: 30%;
margin-left: 5%;
}
.test4>li.first{
margin: 0;
}
.test5{
padding: 0 2%;
}
.test5>li{
width: 30%;
margin-left: 5%;
}
.test5>li:first-child{
margin: 0;
}
</style>
<p>4.classname实现</p>
<ul class="test4 clearfix">
<li class="first"><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>5.css选择器实现
:first-child :first-type-of :nth-child() 这些实现都没有什么技术难点，大家可以去查阅一下css文档，注意一下兼容性没问题了
CSS Code复制内容到剪贴板
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between;
}
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
padding: 0 2%;
}
.test4>li{
width: 30%;
margin-left: 5%;
}
.test4>li.first{
margin: 0;
}
.test5{
padding: 0 2%;
}
.test5>li{
width: 30%;
margin-left: 5%;
}
.test5>li:first-child{
margin: 0;
}
</style>
<p>5.css选择器实现(注意ie兼容性)</p>
<ul class="test5 clearfix">
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
<li><img src="img/test.jpg"/></li>
</ul>贴上全部的DEMO
差点忘了还有一种情况X=2时，设置好width，左边左浮动，右边右浮动。
其实X=3时，还有一种处理方式，左右元素分别左右浮动，中间元素相对于父级设置绝对定位，居中定位。
注意，由于不能整除的原因，不能像box-sizing那样完美的计算，但是合理的应用在项目上完全没问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多css布局之负margin妙用及其他实现相关文章请关注PHP中文网！
内容总结
以上是互联网集市为您收集整理的css布局之负margin妙用及其他实现全部内容，希望文章能够帮你解决css布局之负margin妙用及其他实现所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。