css布局方式，实现四宫格，九宫格，16宫格等切换

1.借助absolute方位值，实现自适应的网格布局，用伪元素间隔

absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。高度百分比实现自适应。
最外层的父元素使用absolute负责占位，给子元素们把空间拉开，或者固定宽高也行
效果图

ul{height: 100%;padding: 0;position:absolute;left:0;top:0px;right:0;bottom:0;li{float:left;height:33.3%;width:33.3%;position:relative;/*background-color: #FE6278;*/&::before{content:'';position:absolute;left:6px;right:6px;top:6px;bottom:6px;border-radius:6px;background-color: #666666;}}}

2.直接用grid网格布局

<ul :class="['box', 'box_9']" ref="container"><li :class="['item', i==selectedGridIndex?'item_active':'']"v-for="(item, i) in grids" ></li>
</ul>

.box{display: grid;box-sizing: border-box;height: 100%;padding: 0;.item{box-sizing: border-box;background-color: #666666;position: relative;border: 1px solid rgba(255, 255, 255, 0.21);cursor: pointer;position: relative;&_active{border: 1px solid #FE6278;}}}.box_1{grid-template-columns: repeat(1, 100%); //1列，占100%grid-template-rows: repeat(1, 100%); //1行，占100%}.box_4{//四宫格grid-template-columns: repeat(2, 50%); //2列，各占50%grid-template-rows: repeat(2, 50%);//2行，各占50%}.box_9{//9宫格grid-template-columns: repeat(3, 33.33%);//3列，各占33.33%grid-template-rows: repeat(3, 33.33%);//3行，各占33.33%}.box_16{grid-template-columns: repeat(4, 25%);//4列，各占25%grid-template-rows: repeat(4, 25%);//4行，各占25%}

css布局方式，实现四宫格，九宫格，16宫格等切换相关推荐

css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
CSS布局方式有哪些
CSS布局方式有哪些静态布局自适应布局流式布局响应式布局弹性布局 1.静态布局最传统的布局方式,网页中所有尺寸都是由px作为单位,设置了min-width,如果宽度小于就会出现滚动条,如果 ...
常见五大CSS 布局方式总结
常见五大CSS 布局方式总结之所以总结是因为最近也是在看css方面,让我迷惑的是有很多文章关于布局名词都没有听说过,工作中也很少用.但是我们要与时俱进,叫的多了,它就成为正式名词了.比如 '双 ...
css布局方式_网页布局都有哪种？一般都用什么布局？
随着Web技术不断的革新,CSS近几年也变得多年前要更强大.在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的 ...
css布局方式_收藏！40 个 CSS 布局技巧
简介:CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的 ...
前端学习总结——CSS布局方式之传统布局
传统布局传统布局即是早期在平板电脑.智能手机等移动设备并不流行的时候使用的布局方式. 一.表格布局例如:采用表格方式实现如下简单模型的布局 (1)固定布局即用具体的像素值来确定模型的宽和高等值. ...
引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
Div+CSS布局入门教程(四) 页面顶部制作之二
使用列表<li>制作菜单开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV.CSS到index.htm和css.css文件中. 这一节我将告诉大家如何用列表<li> ...
安卓图案密码实现，纯自制，9宫格，16宫格可自定义。
废话不多说,直接贴代码,自己写的,转载请注明出处, /**开发者:易魏 * Created by Administrator on 2018/2/27. */ public class UnLockV ...

css布局方式，实现四宫格，九宫格，16宫格等切换

1.借助absolute方位值，实现自适应的网格布局，用伪元素间隔

2.直接用grid网格布局

css布局方式，实现四宫格，九宫格，16宫格等切换相关推荐

最新文章

热门文章