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

更多相關文章...

相關標籤/搜索

CSS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。