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那样完美的计算,但是合理的应用在项目上完全没问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。