内容简介：记录一下最近学到的一些css的小技巧。媒体查询这里存在一个边界值的问题，如果max-width和下一个min-width数值相等，那么就需要在min-width里面写样式覆盖掉max-width里面的，不然就会出现边界值的样式不是我们想要的那样子。如所以，有一种做法就是让max-width和min-width相差1，但是经过测试，发现在电脑分辨率为'125%'下，会出现767px没有办法取到媒体查询的样式，具体原因我也不明白。
记录一下最近学到的一些css的小技巧。
媒体查询
媒体查询这里存在一个边界值的问题，如果max-width和下一个min-width数值相等，那么就需要在min-width里面写样式覆盖掉max-width里面的，不然就会出现边界值的样式不是我们想要的那样子。如
@media (max-width: 768px) {
padding: 10px;
}
@media (min-width: 768px) and (max-width: 1280px) {
padding: 0;// 如果这里不写，在768px就会默认是10px的padding
}
所以，有一种做法就是让max-width和min-width相差1，但是经过测试，发现在电脑分辨率为'125%'下，会出现767px没有办法取到媒体查询的样式，具体原因我也不明白。
@media (max-width: 767px) {
padding: 10px;
}
@media (min-width: 768px) and (max-width: 1280px) {
padding: 0;
}
参考了boostrap媒体出现的写法，用0.02间隔开，完美解决
@media (max-width: 767.98px) {
}
@media (min-width: 768px) and (max-width: 1280px) {
}
用css选择器给不同数量的子元素设置样式
有这样一个需求，要渲染一个列表，一行显示四个元素，如果小于四个，居中显示，如果大于四个，要右对齐显示。类似于这样子。
这里的难点就是需要通过css来判断有多少个元素，然后我使用了css选择器。
li:first-child:nth-last-child(3）// 总共只有三个元素，因为第一个元素就是倒数第三个元素
li:first-child:nth-last-child(n+3）//大于或等于三个元素，因为第一个元素在倒数第三个以及倒数第三个之后
如果要操作样式，可以这样写
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3）~ li {
}
再回到我的问题。我这里使用了flex布局，要它第一行居中显示，第二行如果有的话，要右对齐，可以对最后一个元素使用margin-right: auto。但是必须是大于四个的最后一个元素，如果只有一行就不需要右对齐啦。
直接贴代码
<style type="text/css">
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
justify-content: center; // 默认居中
}
li {
flex-shrink: 0;
flex-grow: 0;
flex-basis: calc((100% - 20px * 3) / 4);
background: yellow;
margin-right: 20px;
margin-top: 10px;
}
li:nth-child(4n) {
margin-right: 0;
}
li:last-child:nth-child(n+5) { //大于四个元素，因为最后一个元素是第五个或者第五个元素之后的元素
margin-right: auto;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
以上所述就是小编给大家介绍的《css-tick》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
