欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-06 12:45:20
...

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. }