CSS中inset属性详细讲解
CSS 中的 inset 属性是一种用于定位和调整非 static 定位元素的缩略属性。它是四个单独属性的简写，这些属性是 top、right、bottom 和 left。通过 inset 属性，可以同时设置这些属性的值，简化代码书写。
1.属性语法
inset 属性的语法如下：
/* 单个值 */
inset: | ;
/* 两个值 */
inset: | | ;
/* 三个值 */
inset: | | | ;
/* 四个值 */
inset: | | | | ;
①单个值
当提供一个值时，这个值会同时应用于 top、right、bottom 和 left。
.element {
inset: 10px;
/* 等同于 */
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
②两个值
当提供两个值时，第一个值会应用于 top 和 bottom，第二个值会应用于 right 和 left。
.element {
inset: 10px 20px;
/* 等同于 */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;
}
③三个值
当提供三个值时，第一个值应用于 top，第二个值应用于 right 和 left，第三个值应用于 bottom。
.element {
inset: 10px 20px 30px;
/* 等同于 */
top: 10px;
right: 20px;
bottom: 30px;
left: 20px;
}
④四个值
当提供四个值时，这些值会依次应用于 top、right、bottom 和 left。
.element {
inset: 10px 20px 30px 40px;
/* 等同于 */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}
⑤使用示例
以下是一个使用 inset 属性的示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Exampletitle>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.box {
position: absolute;
inset: 10px 20px 30px 40px;
background-color: lightblue;
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
body>
html>
在这个示例中，.box 元素被定位在 .container 元素内部，且它的 inset 属性设置了四个不同的偏移量，这些偏移量分别应用于 top、right、bottom 和 left。
2.正值和负值的区别
①正值
正值使元素从包含块的边缘向内偏移，即距离包含块的边缘更远。
.element {
inset: 10px 20px 30px 40px;
}
top: 10px：从顶部向下偏移 10 像素right: 20px：从右边向左偏移 20 像素bottom: 30px：从底部向上偏移 30 像素left: 40px：从左边向右偏移 40 像素
②负值
负值使元素从包含块的边缘向外偏移，即超出包含块的边缘。
.element {
inset: -10px -20px -30px -40px;
}
top: -10px：从顶部向上偏移 10 像素right: -20px：从右边向右偏移 20 像素bottom: -30px：从底部向下偏移 30 像素left: -40px：从左边向左偏移 40 像素
③示例代码
使用正值的示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Positive Valuestitle>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.box {
position: absolute;
inset: 10px 20px 30px 40px;
background-color: lightblue;
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
body>
html>
在这个示例中，.box 元素会从 .container 的边缘向内偏移不同的距离，整体位于 .container 内部。
使用负值的示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Negative Valuestitle>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.box {
position: absolute;
inset: -10px -20px -30px -40px;
background-color: lightblue;
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
body>
html>
在这个示例中，.box 元素会从 .container 的边缘向外偏移不同的距离，部分区域会超出 .container 的边界。
3.关键点总结
inset属性：用于同时设置top、right、bottom和left四个定位属性。- 正值：元素从包含块的边缘向内偏移。
- 负值：元素从包含块的边缘向外偏移，可能超出包含块的边界。
- 使用场景：通过正值和负值的组合，灵活地控制元素相对于其包含块的位置，从而实现各种布局效果。可以更加简洁和方便地定位和调整元素的位置，使代码更易读和维护
4.注意事项
inset属性只适用于定位元素（非static定位）。- 如果元素没有固定宽高，元素会自适应调整宽和高来同时满足
top、right、bottom和left这四个定位属性。 - 可以使用长度单位（如
px、em）或百分比值来设置inset属性的值。 - 浏览器对
inset属性的支持是逐渐增加的，因此在使用时应考虑到浏览器兼容性。