【萬能CSS】 N 宮格自適應佈局、0.5像素的線等

宮格佈局第一種：
.template-list {

            width: 100%;
            border-radius: 4px;
            height: 202px;
         
            display: grid;
            grid-template-columns: repeat(4, 94px);
            gap: 8px;
            overflow-y: scroll;
            overflow-x: hidden;
        }

宮格佈局第二種：
.content {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    width: 93.4%;
    margin:0 auto;
    height: 520px;
    overflow-y: auto;
  }

.one {
    flex: 0 0 32.74%;
    height: 174px;
    margin-top: 8px;
    margin-right: 0.8%;
}

.one:nth-child(3n) {
    margin-right: 0;
  }

 

0.5像素的線

.divider {
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  margin-bottom: -0.5px;
  background-color: gray;
}

 

transform 設置後z-index 失效

非transform 等 元素 設置z-index:auto 取消創建上下文

創建上下文：

• 根元素(HTML)
• 設置了position爲absolute或relative，且z-index不是auto的元素
• 設置了z-index，且不爲auto的流動元素
• 設置了opacity，且不爲1的元素
• 設置了transform，且不爲none的元素
• 設置了mix-blend-mode值，且不爲normal的元素
• 設置了isolation 爲 isolate的元素on mobile WebKit and Chrome 22+,
• 設置position爲fixed的元素

transform 元素

  解決方案

1. 避免使用transform屬性，改爲使用margin-left:(-width/2)屬性來實現元素居中；

2. 給使用transform元素的父級增加transform-style: preserve-3d;

3. 給使用了transform元素顯示的設置perspective()

4. 元素裏再創建一個標籤，應用新標籤的before僞類，設置定位，以原來的元素爲基準，top、bottom、right、left爲0，以充滿整個容器。注意，z-index的設置與原來元素的before、after中的z-index有關，必須比它的值大。

5. 使用pointer-events屬性做穿透處理。

 

transform可以通過它的translateZ() 來改變元素的層疊順序，其值越大，越在頂層，離屏幕越近。不過通過transform:translateZ() 改變元素z軸的層級，

必須在元素的父元素中顯示的設置transform-style:preserver-3d 或者在transform中顯示的設置perspective()