你的位置:首页 > 网页设计

[网页设计]css布局之负margin妙用及其他实现


相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同。

大概就是上面这个样子,下面介绍几种实现的方式。

1.负margin大法

设置好元素的宽度和留白占满父级的宽度,然后设置父级的margin-left为留白的负留白的宽度

<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及以上才支持

<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的实现,需要做兼容处理(旧盒子+新盒子)

<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,再做相应的处理。可以后台进行处理也可以前端处理(推荐后台处理)

<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文档,注意一下兼容性没问题了

<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那样完美的计算,但是合理的应用在项目上完全没问题。

个人思路毕竟有限,如果大家还有什么其他方案,欢迎留言。