逻辑尺寸与偏移属性详解
概述
本文档系统讲解 逻辑尺寸与偏移属性详解 中的各个属性。每个属性都配有来自 MDN 的可交互演示，可以直接点击运行查看效果。
逻辑尺寸
block-size
逻辑属性：块方向的尺寸（垂直书写模式下等于宽度）。
block-size 交互演示（MDN）
逻辑属性：块方向的尺寸（垂直书写模式下等于宽度）。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>block-size 属性演示 - MDN 示例</title>
<meta name="description" content="演示block（size 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
justify-content: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">块-size: 150px;</button>
<button class="snippet-btn" data-index="1">块-size: 150px;</button>
<button class="snippet-btn" data-index="2">块-size: auto;</button>
<button class="snippet-btn" data-index="3">块-size: auto;</button>
</div>
<div class="preview-panel">
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">This is a box where you can change the 块-size.</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
block-size: 150px;
writing-mode: horizontal-tb;
}`,
`#example-element {
block-size: 150px;
writing-mode: vertical-rl;
}`,
`#example-element {
block-size: auto;
writing-mode: horizontal-tb;
}`,
`#example-element {
block-size: auto;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
inline-size
逻辑属性：行方向的尺寸（等于书写模式下的宽度）。
inline-size 交互演示（MDN）
逻辑属性：行方向的尺寸（等于书写模式下的宽度）。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inline-size 属性演示 - MDN 示例</title>
<meta name="description" content="演示inline（size 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">inline-size: 150px;</button>
<button class="snippet-btn" data-index="1">inline-size: 150px;</button>
<button class="snippet-btn" data-index="2">inline-size: auto;</button>
<button class="snippet-btn" data-index="3">inline-size: auto;</button>
</div>
<div class="preview-panel">
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">This is a box where you can change the inline-size.</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
inline-size: 150px;
writing-mode: horizontal-tb;
}`,
`#example-element {
inline-size: 150px;
writing-mode: vertical-rl;
}`,
`#example-element {
inline-size: auto;
writing-mode: horizontal-tb;
}`,
`#example-element {
inline-size: auto;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
min-block-size
逻辑属性：块方向的最小尺寸。
min-block-size 交互演示（MDN）
逻辑属性：块方向的最小尺寸。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>min-block-size 属性演示 - MDN 示例</title>
<meta name="description" content="演示min（block-size 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
justify-content: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">min-块-size: 150px;</button>
<button class="snippet-btn" data-index="1">min-块-size: 150px;</button>
<button class="snippet-btn" data-index="2">min-块-size: 20px;</button>
<button class="snippet-btn" data-index="3">min-块-size: 15em;</button>
</div>
<div class="preview-panel">
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box where you can change the minimum 块 size. <br />If there is More content than the minimum the
box will grow in the block dimension as needed by the content.
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
min-block-size: 150px;
writing-mode: horizontal-tb;
}`,
`#example-element {
min-block-size: 150px;
writing-mode: vertical-rl;
}`,
`#example-element {
min-block-size: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
min-block-size: 15em;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
min-inline-size
逻辑属性：行方向的最小尺寸。
min-inline-size 交互演示（MDN）
逻辑属性：行方向的最小尺寸。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>min-inline-size 属性演示 - MDN 示例</title>
<meta name="description" content="演示min（inline-size 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">min-inline-size: 200px;</button>
<button class="snippet-btn" data-index="1">min-inline-size: 200px;</button>
<button class="snippet-btn" data-index="2">min-inline-size: 20px;</button>
<button class="snippet-btn" data-index="3">min-inline-size: 75%;</button>
</div>
<div class="preview-panel">
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">Change min-inline-size</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
min-inline-size: 200px;
writing-mode: horizontal-tb;
}`,
`#example-element {
min-inline-size: 200px;
writing-mode: vertical-rl;
}`,
`#example-element {
min-inline-size: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
min-inline-size: 75%;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
max-inline-size
逻辑属性：行方向的最大尺寸。
max-inline-size 交互演示（MDN）
逻辑属性：行方向的最大尺寸。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>max-inline-size 属性演示 - MDN 示例</title>
<meta name="description" content="演示max（inline-size 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">max-inline-size: 150px;</button>
<button class="snippet-btn" data-index="1">max-inline-size: 150px;</button>
<button class="snippet-btn" data-index="2">max-inline-size: 20px;</button>
<button class="snippet-btn" data-index="3">max-inline-size: 75%;</button>
</div>
<div class="preview-panel">
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">This is a box where you can change the max-inline-size.</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
max-inline-size: 150px;
writing-mode: horizontal-tb;
}`,
`#example-element {
max-inline-size: 150px;
writing-mode: vertical-rl;
}`,
`#example-element {
max-inline-size: 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
max-inline-size: 75%;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
逻辑偏移
inset-block
逻辑属性：块方向偏移（top/bottom）的简写。
inset-block 交互演示（MDN）
逻辑属性：块方向偏移（top/bottom）的简写。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inset-block 属性演示 - MDN 示例</title>
<meta name="description" content="演示inset（block 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.example-container {
border: 0.75em solid #ad1457;
padding: 0.75em;
text-align: left;
position: relative;
width: 100%;
min-height: 200px;
}
#example-element {
background-color: #07136c;
border: 6px solid #ffa000;
color: white;
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">inset-block: 10px 20px;</button>
<button class="snippet-btn" data-index="1">inset-block: 20px 40px;</button>
<button class="snippet-btn" data-index="2">inset-block: 5% 20%;</button>
<button class="snippet-btn" data-index="3">inset-block: 1rem auto;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="example-container">
<div id="example-element">I am absolutely positioned.</div>
<p>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would
not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up
Holborn Hill.
</p>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
inset-block: 10px 20px;
writing-mode: horizontal-tb;
}`,
`#example-element {
inset-block: 20px 40px;
writing-mode: vertical-rl;
}`,
`#example-element {
inset-block: 5% 20%;
writing-mode: horizontal-tb;
}`,
`#example-element {
inset-block: 1rem auto;
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
inset-block-start
逻辑属性：块起始方向的偏移。
inset-block-start 交互演示（MDN）
逻辑属性：块起始方向的偏移。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inset-block-start 属性演示 - MDN 示例</title>
<meta name="description" content="演示inset（block-start 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 0.75em solid;
padding: 0.75em;
position: relative;
width: 100%;
min-height: 200px;
unicode-bidi: bidi-override;
}
#abspos {
background-color: yellow;
color: black;
border: 3px solid red;
position: absolute;
inset-block-start: 50px;
inline-size: 140px;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">writing-mode: horizontal-tb;</button>
<button class="snippet-btn" data-index="1">writing-mode: vertical-rl;</button>
<button class="snippet-btn" data-index="2">writing-mode: horizontal-tb;</button>
<button class="snippet-btn" data-index="3">writing-mode: vertical-lr;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="example-container" id="example-element">
<div id="abspos">I am absolutely positioned with inset-block-start: 50px</div>
<p>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would
not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up
Holborn Hill.
</p>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
writing-mode: horizontal-tb;
}`,
`#example-element {
writing-mode: vertical-rl;
}`,
`#example-element {
writing-mode: horizontal-tb;
direction: rtl;
}`,
`#example-element {
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
inset-block-end
逻辑属性：块结束方向的偏移。
inset-block-end 交互演示（MDN）
逻辑属性：块结束方向的偏移。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inset-block-end 属性演示 - MDN 示例</title>
<meta name="description" content="演示inset（block-end 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 0.75em solid;
padding: 0.75em;
position: relative;
width: 100%;
min-height: 200px;
unicode-bidi: bidi-override;
}
#abspos {
background-color: yellow;
color: black;
border: 3px solid red;
position: absolute;
inset-block-end: 20px;
inline-size: 140px;
min-block-size: 200px;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">writing-mode: horizontal-tb;</button>
<button class="snippet-btn" data-index="1">writing-mode: vertical-rl;</button>
<button class="snippet-btn" data-index="2">writing-mode: horizontal-tb;</button>
<button class="snippet-btn" data-index="3">writing-mode: vertical-lr;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="example-container" id="example-element">
<div id="abspos">I am absolutely positioned with inset-block-end: 20px</div>
<p>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would
not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up
Holborn Hill.
</p>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
writing-mode: horizontal-tb;
}`,
`#example-element {
writing-mode: vertical-rl;
}`,
`#example-element {
writing-mode: horizontal-tb;
direction: rtl;
}`,
`#example-element {
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
inset-inline
逻辑属性：行方向偏移（left/right）的简写。
inset-inline 交互演示（MDN）
逻辑属性：行方向偏移（left/right）的简写。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inset-inline 属性演示 - MDN 示例</title>
<meta name="description" content="演示inset（inline 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.example-container {
border: 0.75em solid #ad1457;
padding: 0.75em;
text-align: left;
position: relative;
width: 100%;
min-height: 200px;
}
#example-element {
background-color: #07136c;
border: 6px solid #ffa000;
color: white;
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">inset-inline: 5% 10%;</button>
<button class="snippet-btn" data-index="1">inset-inline: 10px 40px;</button>
<button class="snippet-btn" data-index="2">inset-inline: 5% 10%;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="example-container">
<div id="example-element">I am absolutely positioned.</div>
<p>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would
not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up
Holborn Hill.
</p>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
inset-inline: 5% 10%;
writing-mode: horizontal-tb;
}`,
`#example-element {
inset-inline: 10px 40px;
writing-mode: vertical-rl;
}`,
`#example-element {
inset-inline: 5% 10%;
writing-mode: horizontal-tb;
direction: rtl;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
inset-inline-start
逻辑属性：行起始方向的偏移。
inset-inline-start 交互演示（MDN）
逻辑属性：行起始方向的偏移。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inset-inline-start 属性演示 - MDN 示例</title>
<meta name="description" content="演示inset（inline-start 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 0.75em solid;
padding: 0.75em;
position: relative;
width: 100%;
min-height: 200px;
unicode-bidi: bidi-override;
}
#abspos {
background-color: yellow;
color: black;
border: 3px solid red;
position: absolute;
inset-inline-start: 50px;
inline-size: 140px;
min-block-size: 80px;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">writing-mode: horizontal-tb;</button>
<button class="snippet-btn" data-index="1">writing-mode: vertical-rl;</button>
<button class="snippet-btn" data-index="2">writing-mode: horizontal-tb;</button>
<button class="snippet-btn" data-index="3">writing-mode: vertical-lr;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="example-container" id="example-element">
<div id="abspos">I am absolutely positioned with inset-inline-start: 50px</div>
<p>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would
not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up
Holborn Hill.
</p>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
writing-mode: horizontal-tb;
}`,
`#example-element {
writing-mode: vertical-rl;
}`,
`#example-element {
writing-mode: horizontal-tb;
direction: rtl;
}`,
`#example-element {
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
inset-inline-end
逻辑属性：行结束方向的偏移。
inset-inline-end 交互演示（MDN）
逻辑属性：行结束方向的偏移。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inset-inline-end 属性演示 - MDN 示例</title>
<meta name="description" content="演示inset（inline-end 属性演示）效果。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
border: 0.75em solid;
padding: 0.75em;
position: relative;
width: 100%;
min-height: 200px;
unicode-bidi: bidi-override;
}
#abspos {
background-color: yellow;
color: black;
border: 3px solid red;
position: absolute;
inset-inline-end: 50px;
inline-size: 140px;
min-block-size: 80px;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">writing-mode: horizontal-tb;</button>
<button class="snippet-btn" data-index="1">writing-mode: vertical-rl;</button>
<button class="snippet-btn" data-index="2">writing-mode: horizontal-tb;</button>
<button class="snippet-btn" data-index="3">writing-mode: vertical-lr;</button>
</div>
<div class="preview-panel">
<section id="default-example">
<div class="example-container" id="example-element">
<div id="abspos">I am absolutely positioned with inset-inline-end: 50px</div>
<p>
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would
not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up
Holborn Hill.
</p>
</div>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
writing-mode: horizontal-tb;
}`,
`#example-element {
writing-mode: vertical-rl;
}`,
`#example-element {
writing-mode: horizontal-tb;
direction: rtl;
}`,
`#example-element {
writing-mode: vertical-lr;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>