css inset属性

在uniapp下使用了swiper来实现滑动,默认属性下,一个item占满整个屏幕我这想要的效果是所有的item,横向排列,最终实现的效果如下所示实现这种效果很简单就是使用了css中的inset属性inset属性说明如下：inset CSS属性，它具有与简写边距相同的多值语法。虽然是CSS逻辑属性规范的一部分，但它定义物理偏移量，而不考虑元素的书写模式、方向和文本方向。属性值可以为长度，百分比，关

码农致富

19799人浏览 · 2022-06-13 07:14:13

码农致富 · 2022-06-13 07:14:13 发布

一、前言

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

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

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

二、说明

inset属性说明如下：

inset 属性用作定位元素的 top、right、bottom、left 这些属性的简写。类似于 margin 和 padding 属性，依照“上右下左”的顺序。举个例子：

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 浏览器上不支持该属性。