search

博客列表 >12.30作业

12.30作业

- 迷舍人
- 迷舍人原创
2019年12月31日 18:45:15616浏览

思路：感觉grid方便 做的时候 容器 / 项目 项目内容 ，分清楚 不要乱套

grid网格中所有项目的整体对齐方式

效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>grid网格中所有项目的整体对齐方式</title>
  6.     <style>
  7.         *:not(body){
  8.             outline: red 1px dashed;
  9.         }
  10.         .container{
  11.             width: 500px;
  12.             height: 400px;
  13.             font-size: 2rem;
  14.             /*grid布局*/
  15.             display: grid;
  16.             grid-template-columns: repeat(3,100px);
  17.             grid-template-rows: repeat(3,80px);
  18.             /*间隙*/
  19.             grid-gap: 10px;
  21.             /*设置项目在网格容器中的对齐方式*/
  22.             /*水平对齐方式*/
  23.             /*默认在起始方向*/
  24.             /*justify-content: start;*/
  25.             /*水平居中*/
  26.             /*justify-content: center;*/
  27.             /*在最右侧 (终止边线)*/
  28.             /*justify-content: end;*/
  30.             /*垂直方向对齐*/
  31.             /*默认在起始方向*/
  32.             /*align-content: start;*/
  33.             /*垂直居中*/
  34.             /*align-content:center;*/
  35.             /*最下面(终止边线)*/
  36.             /*align-content:end;*/
  38.             /*对齐方式的简写   第一个是 垂直 第二个是水平 */
  39.             /*place-content: start center;*/
  42.             /*项目中的内容对齐*/
  43.             /*水平方向*/
  44.             /*默认 拉伸*/
  45.             /*justify-items: stretch;*/
  46.             /*最左边（起始位置）*/
  47.             /*justify-items: start;*/
  48.             /*最右边 （最后面）*/
  49.             /*justify-items: end;*/
  50.             /*居中*/
  51.             /*justify-items: center;*/
  53.             /*垂直方向*/
  54.             /*默认值*/
  55.             /*align-items: stretch;*/
  56.             /*最上面（起始位置）*/
  57.             /*align-items: start;*/
  58.             /*垂直居中*/
  59.             /*align-items: center;*/
  60.             /*垂直最下面*/
  61.             /*align-items: end;*/
  63.             /*简写  第一个属性是 垂直 第二个是水平*/
  64.             /*place-items: end start;*/
  65.         }
  66.         .container > .item{
  67.             background-color: yellow;
  68.         }
  69.     </style>
  70. </head>
  71. <body>
  72.     <div class="container">
  73.         <div class="item">1</div>
  74.         <div class="item">2</div>
  75.         <div class="item">3</div>
  76.         <div class="item">4</div>
  77.         <div class="item">5</div>
  78.         <div class="item">6</div>
  79.         <div class="item">7</div>
  80.         <div class="item">8</div>
  81.         <div class="item">9</div>
  82.     </div>
  83. </body>
  84. </html>

grid中某一个项目的对齐方式

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>grid中某一个项目的对齐方式</title>
  6.     <style>
  7.         *:not(body){
  8.             outline: 1px red dashed;
  9.         }
  10.         /*网格容器*/
  11.         .container{
  12.             width: 600px;
  13.             font-size: 2rem;
  14.             /*grid布局*/
  15.             display: grid;
  17.             grid-template-columns: repeat(3,1fr);
  18.             grid-template-rows: repeat(3,150px);
  20.             grid-gap: 10px;
  21.         }
  22.         .container > .item:first-of-type{
  23.             width: 100px;
  24.             height: 100px;
  25.             background-color: #63a35c;
  26.             text-align: center;
  27.             /*项目在容器中的对齐方式*/
  28.             /*水平方向*/
  29.             /*默认在起始*/
  30.             /*justify-self: stretch;*/
  31.             /*水平居中*/
  32.             /*justify-self: center;*/
  33.             /*水平最后*/
  34.             /*justify-self: end;*/
  36.             /*垂直方向*/
  37.             /*默认起始方向*/
  38.             /*align-self: stretch;*/
  39.             /*垂直居中*/
  40.             /*align-self: center;*/
  41.             /*垂直最后*/
  42.             /*align-self: end;*/
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="container">
  48.         <div class="item">1</div>
  49.         <div class="item">2</div>
  50.         <div class="item">3</div>
  51.         <div class="item">4</div>
  52.         <div class="item">5</div>
  53.         <div class="item">6</div>
  54.         <div class="item">7</div>
  55.         <div class="item">8</div>
  56.         <div class="item">9</div>
  57.     </div>
  58. </body>
  59. </html>
上一条：12月24日_jQuery筛选、事件、动画和工具下一条：Grid 网格布局的容器与项目属性总结----PHP培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多