css中当我们设置position:absolute的时候，一般都会去设置它的left/right/bottom/top，但是最近我看到chrome上，将left/right/bottom/top信息，变成了一个inset属性，同时还有inset-inline和inset-block属性，今天一起来看看这几个属性。

inset

inset这个属性是用来简化left/right/bottom/top这几个属性的，因为这几个属性写起来是在是太长，太麻烦了。我们看看inset基本用法：

.element {

position: absolute;

inset: 0;

/* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */

inset: 1em 2em;

/* 等同于 `top: 1em; right: 2em; bottom: 1em; left: 2em;` */

inset: 1em 2em 3em;

/* 等同于 `top: 1em; right: 2em; bottom: 3em; left: 2em;` */

inset: 1em 2em 3em 4em;

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

}

我们可以看到，inset用法其实和margin，padding比较像，都是上/右/下/左的属性，参数简写的情况也和margin/padding是一样的。我们看看下面的例子：

上面就是设置了inset:10px 20px 30px 40px，相当于top:10px;right:20px;bottom:30px;left:40px;关键css代码如下：

#a {

border: 1px solid red;

position: absolute;

inset: 10px 20px 30px 40px;

}

inset-inline

inset-inline相当于设置了left/right，需要注意的是，如果设置了writing-mode: vertical-lr;那么就会去设置top/bottom:

关键css代码如下：

p{

margin:0px;

padding:0px;

position: relative;

}

#a {

inset-inline: 20px 0px;

}

#b {

inset-inline: auto 20px;

}

#c{

writing-mode: vertical-lr;

inset-inline: 20px 0px;

}

#d{

writing-mode: vertical-lr;

inset-inline: auto 20px;

}

除了inset-inline，还有inset-inline-start和inset-inline-end，相当于分别设置这两个数值。

inset-block

inset-block相当于设置top/bottom，需要注意，如果设置了writing-mode: vertical-lr;就会去设置left/right:

关键css如下：

p{

margin:0px;

padding:0px;

position: relative;

}

#a {

inset-block: 20px 0px;

}

#b {

inset-block: auto 20px;

}

#c{

writing-mode: vertical-lr;

inset-block: 20px 0px;

}

#d{

writing-mode: vertical-lr;

inset-block: auto 20px;

}

除了inset-block，还有inset-block-start和inset-block-end，相当于分别设置这两个值。

注意

这几个属性，目前测试在chrome/ff上可以，但是safaric上还不行。

这几个属性都是用来设置left/right/top/bottom之类的，因此一定要设置position:relative或者position:absolute，否则没有效果。

CSS inset()函数是一个图形函数，用于指定某种基本图形类型。inset()函数用于定义矩形。

CSS 代表一种基本图形，它通过图形函数来定义一个图形。一个基本图形可以作为shape-outside属性，或clip-path属性的参数使用，经这些属性应用在一个元素上，可以使这个元素周围的内容环绕在它的周围，或者使用指定的图形来剪裁内容。

inset()函数的语法如下：

inset() = inset( [offset]{1,4} [round ]? )

/* 其中.. */

offset = |

inset()函数指定一个inset类型的矩形。它的参数为4个偏移值，用于指定矩形4条边在参考盒模型各个方向上的偏移。

4个偏移值的取值方式和margin相同，如果只给出一个值，那么上右下左4条边都使用这个值作为偏移值。如果给出3个值，那么第一个值代表上边部的偏移值，第二个值代表左右边部的偏移值，第三个值代表下边部的偏移值。如果给出2个值，那么第一个值代表上下边部的偏移值，第二个值代表左右边部的偏移值。如果给出了4个值，那么它们分别代表上右下左4条边的偏移值。

除了4个偏移值，inset()函数还有一个可选的参数，用于指定矩形的圆角。它的语法格式和border-radius属性相同。如果要指定圆角，必须带上round关键字。

下面都是有效的inset()函数声明。

inset(10% 20% round 5px);

/*一个带5像素圆角的矩形，上下2条边向内10%，左右2条边向内20%*/

inset(15px 20px 30px);

inset(25% round 10px 30px);

inset(10px 20px 30px 40px round 10px);

浏览器支持

相关阅读

总结.png

前言

谈可以将其他Drawable内嵌到自己当中。 当View需要一个小于View的实际边界的背景时使用。

对应于标签，它可以将其他Drawable内嵌到自己中，并且可以留出一定的间距。当view希望自己的背景比自己的实际区域小的时候，可以采用。

语法

xmlns:android="http://schemas.android.com/apk/res/android"

android:drawable="@drawable/drawable_resource"

android:insetTop="dimension"

android:insetRight="dimension"

android:insetBottom="dimension"

android:insetLeft="dimension" />

定义插入可绘制对象。这必须是根元素。

属性：

xmlns:android

字符串。必备。定义 XML 命名空间，其必须是 "http://schemas.android.com/apk/res/android"。

android:drawable

可绘制对象资源。必备。引用要插入的可绘制对象资源。

android:insetTop

尺寸。顶部插入，表示为尺寸值或尺寸资源

android:insetRight

尺寸。右边插入，表示为尺寸值或尺寸资源

android:insetBottom

尺寸。底部插入，表示为尺寸值或尺寸资源

android:insetLeft

尺寸。左边插入，表示为尺寸值或尺寸资源

实例

android:drawable="@drawable/red_drawable"

android:insetTop="10dp"

android:insetRight="10dp"

>

XML中：这里放两个TextView进行对比

android:layout_width="match_parent"

android:layout_height="49dp"

android:background="#fdff"/>

android:layout_width="match_parent"

android:layout_height="49dp"

android:background="@drawable/inset_darawable"/>

效果图：

image.png