Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1027作业
Blogger Information
Blog 19
fans 0
comment 1
visits 7421
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1027作业
移动用户-4050479
Original
361 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <STyle>
  9.         .css {
  10.             display: grid;
  11.             grid-template-rows: repeat(3 , 80px);
  12.             grid-template-columns: 80px 80px 80px ;
  13.             /* 排序规则，默认横向排列 */
  14.             grid-auto-flow: row;
  15.             grid-auto-rows: 80px;/* 行优先设置行高 */
  16.             grid-auto-flow:column;/* 列优先 */
  17.             grid-auto-columns: 80px;/* 设置列宽 */
  18.         }
  19.         .css > .vb {
  20.             background-color: aqua;
  21.             border: 1px solid violet;
  22.             width: 40px;
  23.             height: 40px;
  26.         }
  27.           /* 容器创建剩余空间 */
  28.         .css {
  29.             width: 400px;
  30.             height: 400px;
  31.             background-color: yellowgreen;
  32.             /* 对齐方式 */
  33.             /* place-content: 水平方向  垂直方向; */
  34.            /*  place-content: start start ; 这是默认方式 */
  35.            place-content: center; /* 或者 place-content: center center; */
  37.            /* 单元格对齐 ：单元格对齐要保证单元格有剩余空间 和容器一样  */
  38.            place-items: center; 
  39.            place-content: space-between; 
  40.            place-content: space-around;
  41.         }
  43.         .css > .vb:nth-last-of-type(-1n + 2){
  44.             display: none; 
  45.             background-color: blueviolet;
  47.         }
  48.         .css > .vb:nth-of-type(5) {
  49.             place-self: end center; /* 单独设置某一个元素定位 */
  50.             background-color: brown;
  51.         }
  53.         /**
  54.          *
  55.          * * 1. 对齐前提 : 有剩余空间 ，
  56.          * * 2. 对齐方案 : 剩余空间在项目之间的分配
  57.          * * 3. 剩余空间 : flex（主轴 ，交叉轴） Grid （容器 ， 单元格）
  58.          * 
  59.          */
  61.         .vm {
  62.             display: grid;
  63.             grid-template-rows: repeat(3 , 80px);
  64.             grid-template-columns: 80px 80px 80px ;
  65.             /* 排序规则，默认横向排列 */
  66.             grid-auto-rows: 80px;/* 行优先设置行高 */
  67.             grid-auto-columns: 80px;/* 设置列宽 */
  68.             margin-top: 10px;
  69.             /* 设置间隙 */
  70.             /* gap: 垂直方向 水平方向; */
  71.             gap: 5px 5px;
  72.         }
  73.         .vm > .vb {
  74.             background-color: aqua;
  76.         }
  79.     </STyle>
  80. </head>
  81. <body>
  82.     <div class="css">
  83.         <div class="vb">1</div>
  84.         <div class="vb">2</div>
  85.         <div class="vb">3</div>
  86.         <div class="vb">4</div>
  87.         <div class="vb">5</div>
  88.         <div class="vb">6</div>
  89.         <div class="vb">7</div>
  90.         <div class="vb">8</div>
  91.         <div class="vb">9</div>
  92.         <!-- !隐式网格 -->
  93.         <div class="vb">10</div>
  94.         <div class="vb">11</div>
  95.     </div>
  97.     <div class="vm">
  98.         <div class="vb">1</div>
  99.         <div class="vb">2</div>
  100.         <div class="vb">3</div>
  101.         <div class="vb">4</div>
  102.         <div class="vb">5</div>
  103.         <div class="vb">5</div>
  104.     </div>
  105. </body>
  106. </html>


Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：可以适当的添加一些自己的理解和总结
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post