404 lines
9.0 KiB
Vue
404 lines
9.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="css-box-model">
|
|||
|
|
<div class="model-container">
|
|||
|
|
<div class="box-display">
|
|||
|
|
<div
|
|||
|
|
class="margin-box"
|
|||
|
|
:style="{
|
|||
|
|
padding: margin + 'px',
|
|||
|
|
background: '#f3f4f6',
|
|||
|
|
display: 'inline-block'
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="border-box"
|
|||
|
|
:style="{
|
|||
|
|
padding: borderWidth + 'px',
|
|||
|
|
borderStyle: borderStyle,
|
|||
|
|
borderColor: borderColor,
|
|||
|
|
background: '#e5e7eb',
|
|||
|
|
display: 'inline-block'
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="padding-box"
|
|||
|
|
:style="{
|
|||
|
|
padding: padding + 'px',
|
|||
|
|
background: '#d1d5db',
|
|||
|
|
display: 'inline-block'
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="content-box"
|
|||
|
|
:style="{
|
|||
|
|
width: width + 'px',
|
|||
|
|
height: height + 'px',
|
|||
|
|
background: contentColor,
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: '14px',
|
|||
|
|
fontWeight: 'bold'
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ width }} × {{ height }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="controls">
|
|||
|
|
<div class="control-group">
|
|||
|
|
<label>内容宽度 (Width)</label>
|
|||
|
|
<input
|
|||
|
|
type="range"
|
|||
|
|
v-model.number="width"
|
|||
|
|
min="50"
|
|||
|
|
max="200"
|
|||
|
|
class="slider"
|
|||
|
|
/>
|
|||
|
|
<span class="value">{{ width }}px</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="control-group">
|
|||
|
|
<label>内容高度 (Height)</label>
|
|||
|
|
<input
|
|||
|
|
type="range"
|
|||
|
|
v-model.number="height"
|
|||
|
|
min="50"
|
|||
|
|
max="200"
|
|||
|
|
class="slider"
|
|||
|
|
/>
|
|||
|
|
<span class="value">{{ height }}px</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="control-group">
|
|||
|
|
<label>内边距 (Padding)</label>
|
|||
|
|
<input
|
|||
|
|
type="range"
|
|||
|
|
v-model.number="padding"
|
|||
|
|
min="0"
|
|||
|
|
max="50"
|
|||
|
|
class="slider"
|
|||
|
|
/>
|
|||
|
|
<span class="value">{{ padding }}px</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="control-group">
|
|||
|
|
<label>边框宽度 (Border)</label>
|
|||
|
|
<input
|
|||
|
|
type="range"
|
|||
|
|
v-model.number="borderWidth"
|
|||
|
|
min="0"
|
|||
|
|
max="20"
|
|||
|
|
class="slider"
|
|||
|
|
/>
|
|||
|
|
<span class="value">{{ borderWidth }}px</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="control-group">
|
|||
|
|
<label>边框样式 (Style)</label>
|
|||
|
|
<select v-model="borderStyle" class="select">
|
|||
|
|
<option value="solid">solid (实线)</option>
|
|||
|
|
<option value="dashed">dashed (虚线)</option>
|
|||
|
|
<option value="dotted">dotted (点线)</option>
|
|||
|
|
<option value="double">double (双线)</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="control-group">
|
|||
|
|
<label>外边距 (Margin)</label>
|
|||
|
|
<input
|
|||
|
|
type="range"
|
|||
|
|
v-model.number="margin"
|
|||
|
|
min="0"
|
|||
|
|
max="50"
|
|||
|
|
class="slider"
|
|||
|
|
/>
|
|||
|
|
<span class="value">{{ margin }}px</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="control-group">
|
|||
|
|
<label>内容颜色</label>
|
|||
|
|
<input
|
|||
|
|
type="color"
|
|||
|
|
v-model="contentColor"
|
|||
|
|
class="color-picker"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="control-group">
|
|||
|
|
<label>边框颜色</label>
|
|||
|
|
<input
|
|||
|
|
type="color"
|
|||
|
|
v-model="borderColor"
|
|||
|
|
class="color-picker"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="dimensions">
|
|||
|
|
<div class="dimension-item">
|
|||
|
|
<span class="label">总宽度:</span>
|
|||
|
|
<span class="value">{{ totalWidth }}px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="dimension-item">
|
|||
|
|
<span class="label">总高度:</span>
|
|||
|
|
<span class="value">{{ totalHeight }}px</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="calculation">
|
|||
|
|
总宽度 = {{ margin }} + {{ borderWidth }} + {{ padding }} + {{ width }} + {{ padding }} + {{ borderWidth }} + {{ margin }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="code-output">
|
|||
|
|
<div class="code-title">💻 实时 CSS 代码</div>
|
|||
|
|
<pre><code>.box {
|
|||
|
|
/* 内容尺寸 */
|
|||
|
|
width: {{ width }}px;
|
|||
|
|
height: {{ height }}px;
|
|||
|
|
|
|||
|
|
/* 内边距 */
|
|||
|
|
padding: {{ padding }}px;
|
|||
|
|
|
|||
|
|
/* 边框 */
|
|||
|
|
border: {{ borderWidth }}px {{ borderStyle }} {{ borderColor }};
|
|||
|
|
|
|||
|
|
/* 外边距 */
|
|||
|
|
margin: {{ margin }}px;
|
|||
|
|
|
|||
|
|
/* 内容背景色 */
|
|||
|
|
background-color: {{ contentColor }};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 总尺寸计算 */
|
|||
|
|
/* 总宽度: {{ totalWidth }}px */
|
|||
|
|
/* 总高度: {{ totalHeight }}px */</code></pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="explanation">
|
|||
|
|
<div class="exp-title">📦 CSS 盒模型说明</div>
|
|||
|
|
<div class="exp-content">
|
|||
|
|
<strong>Content (内容)</strong>：元素的实际内容，通过 width 和 height 设置
|
|||
|
|
<br><br>
|
|||
|
|
<strong>Padding (内边距)</strong>：内容和边框之间的空间，属于元素内部
|
|||
|
|
<br><br>
|
|||
|
|
<strong>Border (边框)</strong>：包裹内容的边界线
|
|||
|
|
<br><br>
|
|||
|
|
<strong>Margin (外边距)</strong>：元素外部的空间，用于分隔其他元素
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { computed, ref } from 'vue'
|
|||
|
|
|
|||
|
|
const width = ref(100)
|
|||
|
|
const height = ref(100)
|
|||
|
|
const padding = ref(20)
|
|||
|
|
const borderWidth = ref(5)
|
|||
|
|
const borderStyle = ref('solid')
|
|||
|
|
const margin = ref(20)
|
|||
|
|
const contentColor = ref('#3b82f6')
|
|||
|
|
const borderColor = ref('#1e40af')
|
|||
|
|
|
|||
|
|
const totalWidth = computed(() => {
|
|||
|
|
return margin * 2 + borderWidth * 2 + padding * 2 + width
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const totalHeight = computed(() => {
|
|||
|
|
return margin * 2 + borderWidth * 2 + padding * 2 + height
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.css-box-model {
|
|||
|
|
border: 1px solid var(--vp-c-divider);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-container {
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-display {
|
|||
|
|
min-height: 400px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: repeating-conic-gradient(#f9fafb 0% 25%, #fff 0% 50%) 50% / 20px 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.controls {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-group {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-group label {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slider {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 6px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
background: var(--vp-c-divider);
|
|||
|
|
outline: none;
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slider::-webkit-slider-thumb {
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
appearance: none;
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: var(--vp-c-brand);
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slider::-moz-range-thumb {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: var(--vp-c-brand);
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select {
|
|||
|
|
padding: 8px;
|
|||
|
|
border: 2px solid var(--vp-c-divider);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-picker {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40px;
|
|||
|
|
border: 2px solid var(--vp-c-divider);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--vp-c-brand);
|
|||
|
|
font-family: monospace;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dimensions {
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dimension-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dimension-item .label {
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dimension-item .value {
|
|||
|
|
color: var(--vp-c-brand);
|
|||
|
|
font-family: monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calculation {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding-top: 10px;
|
|||
|
|
border-top: 1px solid var(--vp-c-divider);
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--vp-c-text-3);
|
|||
|
|
font-family: monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-output {
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-left: 4px solid var(--vp-c-brand);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-title {
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
pre {
|
|||
|
|
background: #1e1e1e;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 15px;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
code {
|
|||
|
|
font-family: 'Monaco', 'Courier New', monospace;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: #d4d4d4;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.explanation {
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-left: 4px solid var(--vp-c-brand);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exp-title {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exp-content {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
line-height: 1.8;
|
|||
|
|
}
|
|||
|
|
</style>
|