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那样完美的计算,但是合理的应用在项目上完全没问题。
个人思路毕竟有限,如果大家还有什么其他方案,欢迎留言。
css布局之负margin妙用及其他实现的更多相关文章
- CSS艺术之---负margin之美
CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非 ...
- web前端教程:CSS 布局十八般武艺都在这里了
CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...
- CSS布局十八般武艺都在这里了
CSS布局十八般武艺都在这里了 Shelley Lee 4 个月前 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式 ...
- CSS布局和居中常用技巧
1.常用居中方法 居中在布局中很常见,我们假设DOM文档结构如下,子元素要在父元素中居中: <div class="parent"> <div class=&qu ...
- CSS布局整理
目录 常用居中方法 水平居中 垂直居中 单列布局 二列&三列布局 float+margin position+margin 圣杯布局(float+负margin) 双飞翼布局(float+负m ...
- CSS布局基础
(初级)css布局 一.单列布局1.基础知识块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示.无换行2.盒子模型盒子模型 (边框border ...
- CSS布局(圣杯、双飞翼、flex)
圣杯布局(float + 负margin + padding + position) <!DOCTYPE html> <html> <head> <meta ...
- (转)CSS布局-负边距-margin
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- 负margin在布局中的运用(*****************************************************************)
一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
随机推荐
- 你真的了解console吗?
对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重,取而代之则是会将值输出到控制台上方便调试.最常用的语句就是console.log(expres ...
- document.all和jq trigger原理
document.all是页面内所有元素的一个集合.如: document.all(0)表示页面内第一个元素document.all可以判断浏览器是否是IE if(document ...
- Delphi-Concat 函数
函数名称 Concat 所在单元 System 函数原型 function Concat ( const String1 {,String2 ...} : string ) : string; 函数功 ...
- 如何将github上的微信客户端类库能够通过composer工具下载
我将自己开发的微信客户端类库放到了github上面去了. 然后我在我的项目里面添加了一个composer.json文件 内容如下 { "require": { "weix ...
- JavaScript注意事项
var m = "false"; Boolean(m); // true而非 false ajax不能设置setRequestHeaders("Cookie", ...
- Multiplication Table
CF#256D:http://codeforces.com/contest/448/problem/D 题意:给你一个n*m的表格,第i行第j列的数据是i*j,然后询问第k小的数,这里的排序是不去重的 ...
- [Android] createTrack_l
在分析AudioTrack的时候,第一步会new AudioTrack,并调用他的set方法.在set方法的最后调用了createTrack_l创建音轨.我们现在来分析createTrack_l的流程 ...
- ISO7816 传输协议 T0 T1
T=0协议不能用一条命令来实现,必须分为两步实现:第一条命令为卡片提供数据,然后用另外一条相关的命令来取回数据.这样给卡片的编程带来很大麻烦,同时卡片内存中必须保留上一次操作需要返回的数据.这时如果不 ...
- 初识DSP
初识DSP 1.TI DSP的选型主要考虑处理速度.功耗.程序存储器和数据存储器的容量.片内的资源,如定时器的数量.I/O口数量.中断数量.DMA通道数等.DSP的主要供应商有TI,ADI,Motor ...
- 王学长的LCT标程
善良的王学长竟然亲自打了一遍QAQ好感动QAQ #include<iostream> #include<cstdio> #include<cmath> #inclu ...