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

rem+vw布局原理

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

html {
        font-size: calc(100vw / 3.75);
      }
 body {
        font-size: 0.16rem;
      }

grid布局属性

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

.content {
        width: 30em;
        height: 30em;
        background-color: lightblue;
        display: grid;
        grid-template-columns: 10em 10em 10em;
        grid-template-rows: 10em 10em 10em;
        grid-template-rows: repeat(3, 10em);
        grid-template-columns: repeat(3, 10em);
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
      }

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

.content > .item {
        background-color: lightcoral;
        grid-row: 2/3;
        grid-column: 2/3;
        grid-row: 2/4;
        grid-column: 2/4;
        grid-row: 2 / span2;
        grid-column: 1 / span3;
        grid-area: 1/1/2/4;
        grid-area: 3/1 / span1/span3;
      }

rem+vw布局原理

grid布局属性

更多相关文章

随机推荐