博客列表 >rem+vw布局的原理,grid布局属性

rem+vw布局的原理,grid布局属性

木子木杉
木子木杉原创
2022年01月04日 09:39:17556浏览

rem+vw布局原理

1.布局视图=视觉视图
2.理想视图=视觉视图
100vw=375px
100px=100wv/3.75
100px=1rem

  1. html {
  2. font-size: calc(100vw / 3.75);
  3. }
  4. body {
  5. font-size: 0.16rem;
  6. }

grid布局属性

1.容器属性
display: grid; grid的布局
grid-template-columns:列数
grid-template-rows:行数

  1. .content {
  2. width: 30em;
  3. height: 30em;
  4. background-color: lightblue;
  5. display: grid;
  6. grid-template-columns: 10em 10em 10em;
  7. grid-template-rows: 10em 10em 10em;
  8. grid-template-rows: repeat(3, 10em);
  9. grid-template-columns: repeat(3, 10em);
  10. grid-template-rows: repeat(3, 1fr);
  11. grid-template-columns: repeat(3, 1fr);
  12. }

2.项目属性
grid-row:起始行/结束行;
grid-column:起始列/结束列;
span+数字:跨多少行/列
grid-area:起始行/起始列/行结束/列结束;
gap:行间距 列间距
隐式网格:容纳超出网格的项目
grid-auto-flow:row/column;行排列或列排列
grid-auto-rows:10em;

  1. .content > .item {
  2. background-color: lightcoral;
  3. grid-row: 2/3;
  4. grid-column: 2/3;
  5. grid-row: 2/4;
  6. grid-column: 2/4;
  7. grid-row: 2 / span2;
  8. grid-column: 1 / span3;
  9. grid-area: 1/1/2/4;
  10. grid-area: 3/1 / span1/span3;
  11. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议