Description: 愿你我都能早九晚五，又能浪迹天涯~
圣杯布局grid代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <section class="grid"> <div class="title">title</div> <div class="nav">nav</div> <div class="main">main</div> <div class="aside">aside</div> <div class="footer">footer</div> </section> .grid { display: grid; width: 100vw; height: 100vh; grid-template-columns: 80px 1fr 1fr 1fr 80px; grid-template-rows: 80px 1fr 1fr 80px; grid-template-areas: 'title title title title title' 'nav main main
1 2 3 4 5 6 7 8 偏移 transform: matrix(1, 0, 0, 1, 30, 30)就等同于transform: translate(30px, 30px) 缩放 transform: matrix(2, 0, 0, 3, 0, 0)就等同于transform: scale(2, 3) 旋转 transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0)就等同于transform:rotate(30deg) 倾斜 matrix(1, 2.237161, 2.237161,1,0,0)就等同于transform:skew(20deg,20deg) 总结 matrix(a,b,c,d,e,f) 1.偏移：e、f参数决定 2.缩放：a、d参数决定 3.旋转：matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 4.倾斜：b、c参数决定
6.通过transform已知父元素高度 子元素代码 1 2 3 position:relative; top:50%; transform:translateY(-50%);