一、前言

在uniapp下使用了swiper来实现滑动,默认属性下,一个item占满整个屏幕

我这想要的效果是所有的item,横向排列,最终实现的效果如下所示

实现这种效果很简单就是使用了css中的inset属性

二、说明

inset属性说明如下:

inset 属性用作定位元素的 toprightbottomleft 这些属性的简写。类似于 marginpadding 属性,依照“上右下左”的顺序。举个例子:

inset: 0;
/* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */
inset: 1px 2px;
/* 等同于 `top: 1px; right: 2px; bottom: 1px; left: 2px;` */
inset: 1px 2px 3px;
/* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 2px;` */
inset: 1px 2px 3px 4px;
/* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 4px;` */

inset CSS属性,它具有与简写边距相同的多值语法。虽然是CSS逻辑属性规范的一部分,但它定义物理偏移量,而不考虑元素的书写模式、方向和文本方向。属性值可以为长度,百分比,关键字(auto),全局的值(inherit; initial; revert; revert-layer; unset;)

注意:inset 属性只作用于定位元素。Internet Explorer 浏览器上不支持该属性。

css inset属性相关推荐

  1. 在HTML中hr的默认值inset,CSS inset属性用法及代码示例

    CSS中的inset属性用于定义物理偏移量,而不用于内联偏移量或逻辑块.此属性可以应用于任何writing-mode属性. 用法: inset:length|percentage|auto|inher ...

  2. 常用css样式属性大全(中文注释)

    一 CSS文字属性:color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...

  3. CSS代码属性大全(HTML)

    CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ f ...

  4. CSS style属性大全

    CSS style属性大全 I 元素 | i 对象 IMG 元素 | img 对象 DHTML 对象 IFRAME 元素 | iframe 对象 --------------------------- ...

  5. CSS 样式属性大全

    CSS(Cascading Style Sheets)简介 CSS(Cascading Style Sheets)简介 y^uO8U2ZkM0当初一帮技术人员想出HTML,主要侧重于定义内容,比如&l ...

  6. 2021-11-15 入门前端VScode必装的常用插件, HTML+CSS常用属性速记.

    Html + Css 学习 一.VSCode常用 //1. VScode常用快捷键 * 新建文件:ctrl + N * 切换自动换行:alt + Z * 复制当前行:ctrl + C:ctrl + V ...

  7. Html中的边框弧边,CSS边框属性一---border-radius

    1.CSS outline 属性 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. p { outline:#00FF00 dotted thick; } ...

  8. CSS常用属性速查表

    属性太多,对于我这种不深入WEB的人员,还是有个速查表方便多了,注意利用开头的目录,会不断更新的 CSS 字体属性(Font) 属性 描述 CSS  font 在一个声明中设置所有字体属性. 1  f ...

  9. css inset默认值,css中的inset/inset-inline/inset-block

    css中当我们设置position:absolute的时候,一般都会去设置它的left/right/bottom/top,但是最近我看到chrome上,将left/right/bottom/top信息 ...

  10. css中的inset,CSS inset()用法及代码示例

    inset()函数是CSS中的内置函数,与filter属性一起使用以更改图像的插入. 用法: inset( length | percentage ); 参数:此函数接受单个参数长度,该参数长度用于保 ...

最新文章

  1. php空间xpyun_无限流量免费 PHP 空间 – FreeWebHostingArea
  2. loadruner11 socket脚本-10053错误
  3. 微软引入linux内核,微软内部已在讨论Linux内核中加入exFAT的可能性
  4. be my friend
  5. ubuntu终端连接远程计算机
  6. 计算机硬件基础知识微盘,第1章 电脑硬件基础知识.pdf
  7. 【Computer Organization笔记13】指令流水中的结构冲突和数据冲突
  8. ubuntu20 系统 Apache+花生壳(内网穿透)服务项目上线
  9. 如何检测手机号名字男女
  10. 利用opencv对图像进行二值化处理
  11. UCHome源码阅读
  12. windows下icns转png或ico
  13. Linux中rpm详解
  14. apkeditor pro_APK编辑器:APK Editor Pro
  15. java 代码加壳,专家和您一同谈谈java加壳的问题[Java编程]
  16. Windows与嵌入式linux设备数据传送工具——tftpd32软件使用说明
  17. Elasticsearch Ingest-Attachment
  18. Chrome浏览器架构演变。
  19. 剪切板上的隐私泄露,真的很严重
  20. 登陆后台时,弹出Cann't connect to DB!

热门文章

  1. 计算机考研需要分数线,计算机考研分数线是多少?
  2. bert中最大处理序列长度超过512的处理策略
  3. vant 表单按钮置灰_Vant Switch 开关
  4. 垃圾盒制作过程大揭密!
  5. 怎么样域名绑定服务器显示成功,域名备案成功后怎么绑定服务器
  6. 华为防火墙配置命令大全,超级详细
  7. 杭州地铁四期极有可能被砍掉一部分线路,可能是某条新建线路,或者是某条延伸段
  8. 杭州地铁四期尘埃落定和我预测差异,看地铁空白地,遥想地铁五期规划
  9. 计算机类毕业设计评语导师评语,毕业设计导师评语
  10. Ubuntu18.04关闭内核自动更新