文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > css教程 > 正文

css布局之负margin妙用及其他实现

高洛峰
发布： 2017-02-16 13:32:12
原创
1445人浏览过

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

css布局之负margin妙用及其他实现

大概就是上面这个样子，下面介绍几种实现的方式。
 
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>@@##@@</li>   
            <li>@@##@@</li>   
            <li>@@##@@</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>@@##@@</li>   
            <li>@@##@@</li>   
            <li>@@##@@</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>@@##@@</li>   
            <li>@@##@@</li>   
            <li>@@##@@</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">@@##@@</li>   
            <li>@@##@@</li>   
            <li>@@##@@</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>@@##@@</li>   
            <li>@@##@@</li>   
            <li>@@##@@</li>   
        </ul>
登录后复制

贴上全部的DEMO
 
差点忘了还有一种情况X=2时，设置好width，左边左浮动，右边右浮动。
 
其实X=3时，还有一种处理方式，左右元素分别左右浮动，中间元素相对于父级设置绝对定位，居中定位。
 
注意，由于不能整除的原因，不能像box-sizing那样完美的计算，但是合理的应用在项目上完全没问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多css布局之负margin妙用及其他实现相关文章请关注PHP中文网！

css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现css布局之负margin妙用及其他实现
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
相关标签：
css
来源：php中文网
收藏 点赞
上一篇：CSS Float布局过程与老生常谈的三栏布局 下一篇：CSS margin全面了解
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
CSS中resize属性none和both的交互效果区别 resize:none禁用用户拖动调整大小，而resize:both允许自由拖动调整宽高。具体包括：1.resize:none禁止用户通过拖拽改变元素尺寸，常用于textarea或需固定布局的场景；2.resize:both允许水平和垂直方向调整，并显示浏览器默认手柄；3.使用时需注意兼容性、overflow设置及移动端不支持等问题。
2025-06-08 10:42:01
345
CSS中text-align和vertical-align的对齐方式区别 text-align控制块级元素内文本或内联元素的水平对齐，常用值有left、right、center、justify；vertical-align控制行内元素或表格单元格内容的垂直对齐，常用值包括top、middle、bottom、baseline；两者不互替且适用范围不同，复杂对齐应结合flex或grid布局。
2025-06-07 08:36:01
735
css中span是什么意思 css中span元素的定义详解 span元素是HTML中的内联容器，用于对文本进行分组或应用样式。1.span是内联元素，不会占据整行，可嵌入文本流中。2.可通过CSS精确控制文本样式，如颜色、字体、背景等。3.使用时需注意适度，避免影响页面性能和可维护性。
2025-06-06 09:36:04
485
css中hover的用法 css中hover伪类的使用技巧 CSS中hover伪类的用法是通过选择器:hover来改变元素在鼠标悬停时的样式。1）基本用法如button:hover{background-color:#ff0000;color:#ffffff;}可改变按钮颜色。2）高级技巧包括使用transition属性实现平滑过渡，如button{transition:background-color0.3sease;}和button:hover{background-color:#ff0000;}。3）还可用于显示隐藏元素，如.container:h
2025-06-05 10:09:01
416
在css中的属性和属性值的区别 css属性与属性值差异解析 CSS属性是定义元素样式的关键词，属性值是这些属性的具体表现形式。1.属性如color、font-size、margin决定元素样式。2.属性值如red、16px、0auto决定实际效果。理解这些差异有助于设计和调试样式。
2025-06-04 09:06:01
707
css中的px和cm的换算 css单位px与cm的转换方法 在CSS中需要理解px和cm的转换，因为它能帮助控制网页在不同设备和媒体上的显示效果，确保设计的精确性和一致性。1）px和cm的转换依赖于设备的分辨率，标准96dpi显示器上1cm约等于37.8px。2）在CSS中，可以直接使用cm单位或将其转换为px来设定元素尺寸。3）实际应用中，转换可能因设备和浏览器差异而有所偏差，使用相对单位如em或rem在响应式设计中更为灵活。
2025-06-03 15:03:09
845
css中的选择器包括哪些 css选择器类型全面解析 CSS选择器类型包括元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子选择器、伪类选择器和伪元素选择器。1.元素选择器通过标签名选择元素，如div。2.类选择器通过class属性选择元素，如.my-class。3.ID选择器通过id属性选择元素，如#my-id。4.属性选择器通过元素属性选择，如a[href]。5.后代选择器选择元素的后代，如ulli。6.子选择器选择直接子元素，如div>p。7.伪类选择器根据元素状态选择，如a:hover。8.伪元素选择器根据元素位置选择，如p::f
2025-06-02 10:19:43
543
css中的单位主要有哪些类型 css单位分类详解 CSS中的单位分为绝对单位（如px、in、cm）和相对单位（如%、em、rem）。1.绝对单位如像素（px）在任何环境下保持不变，适用于需要精确控制的设计。2.相对单位如百分比（%）基于父元素尺寸，适合响应式布局。3.em单位基于当前元素字体大小，易于调整但受父元素影响。4.rem单位基于根元素字体大小，不受父元素影响，适用于响应式设计。
2025-05-31 10:57:01
271
css中px是什么意思 css中px单位的含义说明 在CSS中，px代表像素，是用于设置元素尺寸、边距和内边距的单位。1.px单位在不同设备上尺寸固定，适用于需要精确控制的场景。2.在响应式设计中，使用媒体查询调整px值或结合相对单位如em或rem。3.高分辨率屏幕上，需使用device-pixel-ratio调整图像和背景尺寸。4.性能优化时，简洁的CSS选择器和合并样式规则可减少文件大小。5.最佳实践是将px与其他单位结合使用，如rem用于字体大小，px用于边框和阴影。
2025-05-30 10:09:01
639
css中的px和%有什么区别 css单位px与%的差异对比 px是绝对单位，适合精确控制元素大小，保持跨设备一致性；%是相对单位，适用于响应式布局。1)px用于字体大小、边框宽度等。2)%用于容器宽高，适应不同屏幕。3)混合使用px和%可平衡精确与响应性。4)媒体查询可增强响应式设计。
2025-05-29 11:06:02
710
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部