rem+vw布局的原理,grid布局属性
程序员文章站
2022-03-01 18:36:27
...
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;
}
上一篇: 表单事件,字符串,数组apl
下一篇: html圣杯布局