资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

css如何使用repeat()函数-创新互联

这篇文章将为大家详细讲解有关css如何使用repeat()函数，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务富蕴,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

repeat()

repeat函数用来批量处理网格，接收2个参数，第一个参数表示执行次数，第二个参数表示长度。看下面例子

    
      test1 3
      test2 23
      test3 444
           .repeat-wrapper {         margin-top: 100px;         display: grid;         grid-template-columns: repeat(3, 100px);         grid-gap: 10px;       }

效果

css如何使用repeat()函数

grid-template-columns: repeat(3, 100px) 等价于 grid-template-columns: 100px 100px 100px;

auto-fill,auto-fit

第一个参数除了指明具体次数外，repeat还接收这几个参数 auto-fill,auto-fit，下面讲一讲这两个参数的概念。

auto-fill

auto-fill表示由浏览器自动根据项目填充次数。当容器很宽的时候，会自动留出剩余格子的宽度。如果网格容器在相关轴上具有确定的大小或大大小，则重复次数是大可能的正整数，不会导致网格溢出其网格容器。

    
      test1 3
      test2 23
      test3 444
      test3 4444
      test3 444
      test3 444
    

grid-template-columns: repeat(auto-fill, minmax(100px,1fr));

效果

css如何使用repeat()函数

auto-fit

auto-fit也会自动计算，但是与auto-fill不同的是，auto-fit不会保留剩余的空格子，会将auto-fill剩余的空格子重新分配到每个格子中。看下面示例

    
      test1 3
      test2 23
      test3 444
      test3 4444
      test3 444
      test3 444
    

grid-template-columns: repeat(auto-fit, minmax(100px,1fr));

效果

css如何使用repeat()函数

兼容性

css如何使用repeat()函数

最新版本的主流浏览器基本都能支持，依旧不支持ie。

关于“css如何使用repeat()函数”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


分享标题：css如何使用repeat()函数-创新互联
URL链接：http://cdkjz.cn/article/jhcih.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都网站推广广东帝美豪门窗小谭网创广告机柜租用seo优化青年旅行社成都封阳台注册域名四川正泰动物成都网站建设

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图