使用display:grid实现九宫格布局和应用

介绍1：

九宫出现与微信的支付链接中

9个元素, 每一个格子中都有一个数字，而且每一个格子背景颜色不一样。

实现步骤:

1.九个格子的排列：利用display:flex弹性布局,分成三行，每一行包含三个子元素可以实现九宫格。但我们使用display:grid可以快速实现九宫格。

在body中创建九个盒子

<div class="containter">      
    ...   
<div class="box">9</div>    
</div>

使用grid来布局九宫格，和display:flex一样必须在父元素上进行设置，

.containter {           
    height: 100vh;             
    display: grid;            
    justify-content: center;             
    align-content: center;         
    grid-template-columns: 100px 100px 100px;             
    grid-template-rows: 100px 100px 100px;       
 }  

使用align-content: center这是与设置display:flex中align-items:center的功能是一样的，由于弹性布局在解决现代移动端甚至未来物联网，不好解决或者解决麻烦，九宫格多加每一行的父元素，所以grid 的二维布局方案来了。然后仿造flex出现了align-content: center，更有利于布局。

grid-template-columns: 100px 100px 100px;有三个100px代表有三列，100px设置的是列的宽度

grid-template-rows: 100px 100px 100px;有三个100px代表有三列，100px设置的是行的高度

_2. 将九个盒子进行染色：_每一个格子背景颜色不一样?

第一个可以使用css方案:

.box:nth-child(n) {       
     background-color: pink;        
}      

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

当n为odd就是第偶数个盒子的背景色为pink

当n为even就是第奇数个盒子的背景色为pink

当n为数字就是第n个盒子的背景色为pink

九宫格的九个盒子都不相同，则使用数字

第二种就是js方案：

<script>       
 const boxes = document.querySelectorAll('.box');       
 let i = 1;        
for (let box of boxes) 
{            
    i++;            
    box.style.backgroundColor = `rgba(${i * 20}, ${i * 10}, ${i * 5})`       
 }    
</script>

boxes是id为.box的Nodelist，JavaScript 语法: object.style.backgroundColor="#00FF00"描述 颜色值为颜色名称的背景颜色(比如 red)，其中的i就可以实现九个格子的颜色不一样。

第三种就是使用.styl方案：

这个哥们儿学名叫 stylus，是 CSS 的预处理框架。
CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。

.box    
    color white    
    display flex    
    align-items center    
    justify-content center    
    for  n in (1..9)        
        &:nth-child({n})            
        background-color rgba(n*20, n*5, n*9, n*0.1)

如果想了解stylus可以到juejin.cn/post/684490…

for n in (1..9)在stylus是支持if判断语句  for循环语句和函数的，stylus会将我们的css变成编程语言。

介绍2：

页面要求:当滚动条滑倒一定程度时，Accept的按钮会从左边滑出

<div class="wrapper">        
<div class="terms-and-conditions">          
     <p></p>            
    <p></p>            
    <strong class="watch">watch for me</strong>            
    <p></p>            
    <p></p>            
    <p></p>        
    </div>        
<button class="accept" disabled >Accept</button>    </div>

中放文章

body {           
    display: grid;          
    justify-content: center;            
    align-content: center;        
}        
.wrapper {           
    display: grid;            
    grid-template-rows: 1fr auto;       
 }        
button {           
     transition: a11 0.2s;      
 }       
button[disabled] {            
    opacity: 0.1;           
     transform: translateX(-200%) scale(0.5);       
 }          

1.上面的css代码只有最重要的代码,其他的高度，行高没有展示

2.grid-template-rows: 1fr auto;flex 1 给一个元素设置, 可以让这个元素称为主元素？其他元素把该占的占了， 余下的所有都归。

3.transform: translateX(-200%) scale(0.5)：

transform这个属性允许你将元素旋转，缩放，移动，倾斜，translateX(-200%)就是在X轴向左移200%，scale(0.5)缩小2倍

<script>        
const terms = document.querySelector('.terms-and-conditions');       
const watch = document.querySelector('.watch');        
const button = document.querySelector('.accept');        
function obCallback(payload) {  //实例化一个oberver           
    if(payload[0].intersectionRatio >0.5){                
    button.disabled = false; // 启动元素，将disabled变成active               
    ob.unobserve(terms.lastElementChild)            
    }        
}        
const ob = new IntersectionObserver(obCallback, {            
    root:terms,           
    threshold:0.75        
});        
ob.observe(terms.lastElementChild)
</script>

 

1.payload[0].intersectionRatio intersectionRatio: 0 可交互的比例为0,不可见

2.threshold:0.75  0就是从视窗消失  当滚动条滑到75%进入视窗，触发回调函数obCallback()

3.IntersectionObserver给我们监听视窗的能力 某个元素是否在视窗之中 Observer是监听

root:terms,监听的根源时terms

4.ob.observe(terms.lastElementChild)给terms元素的最后元素即

添加监听事件