CSS-清除多行盒子排列每行最后一个盒子外边距属性

码龄6年

关注

原创 2022-03-21 08:30:15 2.8k 阅读

CSS——CSS盒子模型（重点※）是你的温柔导论看透网页布局的本质盒子模型（Box Model）盒子边框（border）盒子边框写法总结表表格的细线边框圆角边框(CSS3)内边距（padding）外边距（margin）外边距实现盒子居中文字盒子居中图片和背景区别清除元素的默认内外边距外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并content宽度和高度盒子模型布局稳定性盒子阴影盒子基本训练案例导航栏案例※新闻内容布局美化案例※ 导论其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无阅读详情

在项目中我曾经碰到过多行盒子排列，为了盒子之间的间隔从而添加了margin-right属性，但在每一行的最后一个元素的margin-right属性总是会影响到盒子的布局，从而导致本应该出现在当前行最后一个的盒子因为该属性导致空间不够从而被换行到下一行进而导致的UI显示问题。
通过多次的实践思考我想到了几种解决的办法，也因此希望在这里进行心得记录，其具体的解决方法如下：

①使用结构伪类选择器进行筛选
nth-child()
在类名为test的盒子样式上则如下所示：

.test:nth-child(4n){
	margin-right: 0;
}

在nth-child()当中n是从0开始，所以当可以计算出一行会有多少个盒子时则可以使用倍数进行选取，比如上面4n就是代表每行4个盒子

②在父级盒子上使用calc函数

<div class="father">
	<div class-"block">
		<div class="son">1</div>
		<div class="son">2</div>
		<div class="son">3</div>
		<div class="son">4</div>
		<div class="son">5</div>
		<div class="son">6</div>
		<div class="son">7</div>
		<div class="son">8</div>
	</div>
</div>

在如上的html中我们可以使用一个类名为block的盒子来进行隔离，从而使用下面所示的css样式

.father {
	width: 800px;
	height: 600px;
	........
}
.block {
	width: calc(100% + 25px);
}
.son {
	margin-right: 25px;
	margin-bottom: 10px;
	........
}

在这里我为每个盒子都设定margin-right属性为25px，因此在每一行的最后一个盒子就会因为对于的margin-right属性从而导致被迫换行，而在father和son两个盒子之间使用一个content盒子进行间隔，然后利用calc函数计算宽度值为father + margin-right的属性值，这样就可以间接去除每一行最后一个盒子的margin-right属性