css-tick

时间 2019-12-07

标签 css tick 栏目 CSS 繁體版

原文原文链接

记录一下最近学到的一些css的小技巧。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选择器给不一样数量的子元素设置样式

有这样一个需求，要渲染一个列表，一行显示四个元素，若是小于四个，居中显示，若是大于四个，要右对齐显示。相似于这样子。flex

这里的难点就是须要经过css来判断有多少个元素，而后我使用了css选择器。spa

li:first-child:nth-last-child(3）// 总共只有三个元素，由于第一个元素就是倒数第三个元素

li:first-child:nth-last-child(n+3）//大于或等于三个元素，由于第一个元素在倒数第三个以及倒数第三个以后

若是要操做样式，能够这样写code

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3）~ li {
}

再回到个人问题。我这里使用了flex布局，要它第一行居中显示，第二行若是有的话，要右对齐，能够对最后一个元素使用margin-right: auto。可是必须是大于四个的最后一个元素，若是只有一行就不须要右对齐啦。
直接贴代码ip

<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>

学习连接：https://css-tricks.com/solved...element

更多相关文章...