内容简介：记录一下最近学到的一些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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Data Structures and Algorithm Analysis in Java
Mark A. Weiss / Pearson / 2006-3-3 / USD 143.00
As the speed and power of computers increases, so does the need for effective programming and algorithm analysis. By approaching these skills in tandem, Mark Allen Weiss teaches readers to develop wel......一起来看看 《Data Structures and Algorithm Analysis in Java》 这本书的介绍吧!
