摘要:记录一下最近学到的一些的小技巧。我这里使用了布局,要它第一行居中显示,第二行如果有的话,要右对齐,可以对最后一个元素使用。直接贴代码默认居中大于四个元素,因为最后一个元素是第五个或者第五个元素之后的元素学习链接
记录一下最近学到的一些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。但是必须是大于四个的最后一个元素,如果只有一行就不需要右对齐啦。
直接贴代码
学习链接:https://css-tricks.com/solved...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114781.html
阅读 893·2021-10-18 13:32
阅读 3463·2021-09-30 09:47
阅读 2132·2021-09-23 11:21
阅读 1857·2021-09-09 09:34
阅读 3455·2019-08-30 15:43
阅读 1495·2019-08-30 11:07
阅读 1033·2019-08-29 16:14
阅读 662·2019-08-29 11:06