rem+vw布局的原理,grid布局属性
程序员文章站
2022-03-06 12:45:20
...
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;
}
上一篇: 函数类型和数据类型
推荐阅读
-
css3的@media属性实现页面响应式布局示例代码
-
Winform中在使用Dock属性设计页面布局控件的顺序导致页面效果不同的问题
-
关于瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
-
rem布局完成响应式开发,通俗且详细的原理解析和代码实现
-
移动端开发rem布局之less+媒体查询布局的原理步骤和心得
-
详解css3中dispaly的Grid布局与Flex布局
-
实例讲解CSS3中的box-flex弹性盒属性布局
-
布局的一些属性和开关、创建log图片
-
关于android studio布局文件中不能自动补齐属性的解决方法
-
WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系