CSS - inset 屬性

上一頁
下一頁

CSS 的inset 屬性用於控制元素相對於其包含塊的位置。它是一個簡寫屬性，用於在一個語句中為 top、right、bottom 和/或 left 屬性定義值。為了使該屬性生效，必須宣告 position 屬性。

語法

inset: auto | length | percentage | initial | inherit;

屬性值

值 描述
auto 根據元素的內容或其他佈局因素確定元素的大小。預設值。
length 使用長度單位（例如 px、em、rem 等）設定元素的內嵌距離。可以使用負值。
percentage 使用相對於其父容器的百分比值設定元素的內嵌距離。
initial 將屬性設定為其預設值。
inherit 從父元素繼承該屬性。

CSS Inset 屬性示例

以下示例說明了使用不同值的inset 屬性。

使用 Auto 值的 Inset 屬性

為了讓瀏覽器根據元素的預設行為或其他因素計算定位，我們使用auto 值。此值通常用於根據元素包含塊的邊緣對齊元素的位置。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .text {
         position: absolute;
         inset: auto;
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: auto
   </h4>
   <div class="container">
      <p class="text">
         TutorialsPoint offers extensive online tutorials
         and courses on various tech topics, including 
         programming, web development, and data science.
      </p>
   </div>
</body>

</html>

使用長度值的 Inset 屬性

為了設定元素的位置，我們可以使用長度單位（例如 px、rem、em 等）。inset 屬性最多接受四個值。根據提供的數值，相應的邊將受到影響。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
      }

      .one-val {
         inset: 15px;
      }

      .two-val {
         inset: 15px 40px;
      }

      .three-val {
         inset: 15px 35px 45px;
      }

      .four-val {
         inset: 15px 25px 35px 45px;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 15px (all four sides
      have 15px distance)
   </h4>
   <div class="container">
      <p class="values one-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 40px (top and bottom have 
      15px distance while left and right 
      have 40px distance)
   </h4>
   <div class="container">
      <p class=" values two-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 35px 45px (top has 15px 
      distance, left and right have 35px 
      distance and bottom has 45px distance)
   </h4>
   <div class="container">
      <p class=" values three-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 25px 35px 45px (top has 15px 
      distance, right has 25px distance, bottom 
      has 35px distance and left has 45px distance)
   </h4>
   <div class="container">
      <p class=" values four-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

使用百分比值的 Inset 屬性

為了設定元素的位置，我們可以使用百分比值（例如 5%、10% 等）。inset 屬性最多接受四個值。根據提供的數值，相應的邊將受到影響。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
      }

      .one-val {
         inset: 15%;
      }

      .two-val {
         inset: 5% 15%;
      }

      .three-val {
         inset: 5% 25% 15%;
      }

      .four-val {
         inset: 5% 25% 30% 15%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 15% (all four sides have 
      15% distance of the container)
   </h4>
   <div class="container">
      <p class="values one-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
   </div>
   <h4>
      inset: 5% 15% (top and bottom have 
      5% distance while left and right 
      have 15% distance of the container)
   </h4>
   <div class="container">
      <p class=" values two-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 5% 15% 25% (top has 5% distance, 
      left and right have 15% distance and 
      bottom has 25% distance of the container)
   </h4>
   <div class="container">
      <p class=" values three-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 5% 25% 30% 15% (top has 5% distance, 
      right has 25% distance, bottom has 30% 
      distance and left has 15% distance of 
      the container)
   </h4>
   <div class="container">
      <p class=" values four-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

使用混合值的 Inset 屬性

為了設定元素的位置，我們可以結合使用長度單位（例如 px、rem、em 等）和百分比值（例如 10%、20% 等）。inset 屬性最多接受四個值。根據提供的數值，相應的邊將受到影響。以下示例演示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
         inset: 25px 10% 15px 35%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 25px 10% 15px 35% (top has 25px distance, 
      right has 10% distance from the container, bottom 
      has 15px distance and left has 35% distance from 
      the container)
   </h4>
   <div class="container">
      <p class="values">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

注意：inset 屬性接受不同數量的引數，因此根據提供的數值，相應的邊將受到影響。

  • 一個值：它將距離均勻地應用於所有四個邊。
  • 兩個值：第一個值提供頂部和底部的距離，第二個值提供左側和右側的距離。
  • 三個值：第一個值提供頂部邊緣的距離，第二個值提供左側和右側邊緣的距離，第三個值提供底部邊緣的距離。
  • 四個值：第一個值提供頂部邊緣的距離，第二個值提供右側邊緣的距離，第三個值提供底部邊緣的距離，第四個值提供左側邊緣的距離。

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
inset 88.0 88.0 66.0 14.1 73.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告