登录  /  注册
首页 > 博客列表 > 小结：课前预习grip的属性
博主信息
博文 31
粉丝 2
评论 0
访问量 26822
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
小结：课前预习grip的属性
霏梦
原创
968人浏览过
  • 作者：霏梦
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>css grid网格布局教程</title>
  7.     <style>
  8.       /* 最强大的css布局方案 */
  9.       /* 他将网页划分成一个个网络，可以任意组合不同的网格，做出各种各样的布局 */
  11.       .container {
  12.         display: grid;
  13.         /* 容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高 */
  14.         /* grid-template-columns: 100px 100px 100px; */
  15.         /* grid-template-rows: 100px 100px 100px; */
  16.         /* 上面指定了行和高为100px */
  17.         /* 除了用绝对单位，也可用使用百分比 */
  18.         /* grid-template-columns: 33.33% 33.33% 33.33%; */
  19.         /* grid-template-rows: 33.33% 33.33% 33.33%; */
  21.         /* repeat */
  22.         /* 接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。 */
  23.         /* grid-template-columns: repeat(3, 33.33%); */
  24.         /* grid-template-rows: repeat(3, 100%); */
  26.         /* auto-fill 表示自动填充 */
  27.         /* grid-template-columns: repeat(auto-fill, 100px); */
  29.         /* fr关键字 */
  30.         /* 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。 */
  31.         /* grid-template-columns: 1fr 1fr; */
  33.         /* fr可以与绝对长度的单位结合使用，这时会非常方便 */
  34.         /* 第一列的宽度为150像素，第二列的宽度是第三列的一半 */
  35.         /* grid-template-columns: 100px 1fr 2fr; */
  37.         /* minmax() */
  38.         /* 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值 */
  39.         /* grid-template-columns: 1fr 1fr minmax(100px, 1fr); */
  41.         /* auto关键安：关键字表示由浏览器自己决定长度 */
  42.         /* grid-template-columns: 100px auto 100px; */
  44.         /* 网格线的名称 */
  45.         /* 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。 */
  46.         grid-template-columns: [a1] 100px [a2] 100px [a3] auto;
  47.         grid-template-rows: [b1] 200px [b2] 200px [b3] auto;
  48.       }
  49.       .item {
  50.         font-size: 2em;
  51.         text-align: center;
  52.         border: 1px solid greenyellow;
  53.       }
  54.       .item-1 {
  55.         background-color: red;
  56.       }
  57.       .item-2 {
  58.         background-color: yellowgreen;
  59.       }
  60.       .item-3 {
  61.         background-color: greenyellow;
  62.       }
  63.       .item-4 {
  64.         background-color: blue;
  65.       }
  66.       .item-5 {
  67.         background-color: blueviolet;
  68.       }
  69.       .item-6 {
  70.         background-color: cyan;
  71.       }
  72.       .item-7 {
  73.         background-color: darkorange;
  74.       }
  75.       .item-8 {
  76.         background-color: olivedrab;
  77.       }
  78.       .item-9 {
  79.         background-color: olive;
  80.       }
  81.     </style>
  82.   </head>
  83.   <body>
  84.     <!-- Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大 -->
  85.     <!-- 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column） -->
  86.     <!-- 行和列的交叉区域，称为"单元格"（cell）。 -->
  87.     <!-- 正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格 -->
  88.     <p>第一行</p>
  89.     <!-- 下面第一个div是容器 -->
  90.     <div class="container">
  91.       <!-- 以下div是项目 -->
  92.       <!-- 注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。 -->
  93.       <div class="item item-1"><p>1</p></div>
  94.       <div class="item item-2">2</div>
  95.       <div class="item item-3">3</div>
  96.       <div class="item item-4">4</div>
  97.       <div class="item item-5">5</div>
  98.       <div class="item item-6">6</div>
  99.       <div class="item item-7">7</div>
  100.       <div class="item item-8">8</div>
  101.       <div class="item item-9">9</div>
  102.     </div>
  103.     <p>最后一行</p>
  104.   </body>
  105. </html>
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录