国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css-tick

dkzwm / 1521人閱讀

摘要:記錄一下最近學到的一些的小技巧。我這里使用了布局,要它第一行居中顯示,第二行如果有的話,要右對齊,可以對最后一個元素使用。直接貼代碼默認居中大于四個元素,因為最后一個元素是第五個或者第五個元素之后的元素學習鏈接

記錄一下最近學到的一些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。但是必須是大于四個的最后一個元素,如果只有一行就不需要右對齊啦。
直接貼代碼

    


    
  • A
  • B
  • C
  • A
  • B
  • C

學習鏈接:https://css-tricks.com/solved...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114781.html

相關文章

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<