博主信息
霏梦
博文
28
粉丝
1
评论
0
访问量
1011
积分:0
P豆:58

小结:课前预习grip的属性

2020年06月22日 18:17:03阅读数:165博客 / 霏梦/ 前端
  • 作者:霏梦

  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. /* 他将网页划分成一个个网络,可以任意组合不同的网格,做出各种各样的布局 */
  10. .container {
  11. display: grid;
  12. /* 容器指定了网格布局以后,接着就要划分行和列。grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高 */
  13. /* grid-template-columns: 100px 100px 100px; */
  14. /* grid-template-rows: 100px 100px 100px; */
  15. /* 上面指定了行和高为100px */
  16. /* 除了用绝对单位,也可用使用百分比 */
  17. /* grid-template-columns: 33.33% 33.33% 33.33%; */
  18. /* grid-template-rows: 33.33% 33.33% 33.33%; */
  19. /* repeat */
  20. /* 接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。 */
  21. /* grid-template-columns: repeat(3, 33.33%); */
  22. /* grid-template-rows: repeat(3, 100%); */
  23. /* auto-fill 表示自动填充 */
  24. /* grid-template-columns: repeat(auto-fill, 100px); */
  25. /* fr关键字 */
  26. /* 为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。 */
  27. /* grid-template-columns: 1fr 1fr; */
  28. /* fr可以与绝对长度的单位结合使用,这时会非常方便 */
  29. /* 第一列的宽度为150像素,第二列的宽度是第三列的一半 */
  30. /* grid-template-columns: 100px 1fr 2fr; */
  31. /* minmax() */
  32. /* 函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值 */
  33. /* grid-template-columns: 1fr 1fr minmax(100px, 1fr); */
  34. /* auto关键安:关键字表示由浏览器自己决定长度 */
  35. /* grid-template-columns: 100px auto 100px; */
  36. /* 网格线的名称 */
  37. /* 属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。 */
  38. grid-template-columns: [a1] 100px [a2] 100px [a3] auto;
  39. grid-template-rows: [b1] 200px [b2] 200px [b3] auto;
  40. }
  41. .item {
  42. font-size: 2em;
  43. text-align: center;
  44. border: 1px solid greenyellow;
  45. }
  46. .item-1 {
  47. background-color: red;
  48. }
  49. .item-2 {
  50. background-color: yellowgreen;
  51. }
  52. .item-3 {
  53. background-color: greenyellow;
  54. }
  55. .item-4 {
  56. background-color: blue;
  57. }
  58. .item-5 {
  59. background-color: blueviolet;
  60. }
  61. .item-6 {
  62. background-color: cyan;
  63. }
  64. .item-7 {
  65. background-color: darkorange;
  66. }
  67. .item-8 {
  68. background-color: olivedrab;
  69. }
  70. .item-9 {
  71. background-color: olive;
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <!-- Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大 -->
  77. <!-- 容器里面的水平区域称为"行"(row),垂直区域称为"列"(column) -->
  78. <!-- 行和列的交叉区域,称为"单元格"(cell)。 -->
  79. <!-- 正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格 -->
  80. <p>第一行</p>
  81. <!-- 下面第一个div是容器 -->
  82. <div class="container">
  83. <!-- 以下div是项目 -->
  84. <!-- 注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。 -->
  85. <div class="item item-1"><p>1</p></div>
  86. <div class="item item-2">2</div>
  87. <div class="item item-3">3</div>
  88. <div class="item item-4">4</div>
  89. <div class="item item-5">5</div>
  90. <div class="item item-6">6</div>
  91. <div class="item item-7">7</div>
  92. <div class="item item-8">8</div>
  93. <div class="item item-9">9</div>
  94. </div>
  95. <p>最后一行</p>
  96. </body>
  97. </html>

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!