CSS布局中负margin怎样用 可以实现什么效果
|
在日常操作或是项目的实际应用中，有不少朋友对于“CSS布局中负margin怎样用，能实现什么效果”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。 相信大家在项目的开发中都遇到过这样的需求，一行放X（X>1）个块且相邻块之间的间距相同。 1.负margin大法 设置好元素的宽度和留白占满父级的宽度，然后设置父级的margin-left为留白的负留白的宽度 CSS Code > type= *{ 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%; } 1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计 "test1 clearfix" > class= src="img/test.jpg"/> src="img/test.jpg"/> src="img/test.jpg"/> 上面的误差是因为ul的margin和li的margin百分比的计算基于的元素不一样导致的，但是在移动端上因为视窗的范围有限，这个差别很小，在pc上一般使用px，所以可以忽略不计。（下面还有更多的办法） 2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持 CSS Code > type= *{ 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%; } 2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持 "test2 clearfix" > class= src="img/test.jpg"/> src="img/test.jpg"/> src="img/test.jpg"/> 这种实现暂时还没发现什么缺点，代码也简单易懂（推荐） 3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子） CSS Code 复制内容到剪贴板 > type= *{ 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%; } 3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理 "test3" > class= src="img/test.jpg"/> src="img/test.jpg"/> src="img/test.jpg"/> 这种情况怎么能少了我们flex呢，弹性盒模型应该是专门用来处理这种情况吧，但是又有新旧盒子模型之分，各浏览器实现的都不太一样。所以一般情况两套盒子模型的属性都需要加上。（喜欢折腾就上吧，效果棒棒的） 4.classname实现 将需要特殊处理的元素加上单独的class，再做相应的处理。可以后台进行处理也可以前端处理（推荐后台处理） CSS Code > type= *{ 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; } 4.classname实现 "test4 clearfix" > class= "first">src="img/test.jpg"/> class= src="img/test.jpg"/> src="img/test.jpg"/> 5.css选择器实现 :first-child :first-type-of :nth-child() 这些实现都没有什么技术难点，大家可以去查阅一下css文档，注意一下兼容性没问题了 CSS Code > type= *{ 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; } 5.css选择器实现(注意ie兼容性) "test5 clearfix" > class= src="img/test.jpg"/> src="img/test.jpg"/> src="img/test.jpg"/> 贴上全部的DEMO 差点忘了还有一种情况X=2时，设置好width，左边左浮动，右边右浮动。 其实X=3时，还有一种处理方式，左右元素分别左右浮动，中间元素相对于父级设置绝对定位，居中定位。 注意，由于不能整除的原因，不能像box-sizing那样完美的计算，但是合理的应用在项目上完全没问题。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
