当前位置：首页 > news >正文

常见CSS属性

news 2026/2/9 20:19:52

常见CSS属性。

1. display:

定义：display 属性控制元素如何渲染在文档流中，影响了元素是否占用空间、位置及盒子模型的行为。
使用说明：它可以设置为如block, inline, inline-block, flex, grid, none等值，用于决定元素显示模式。
属性值：除了上述列出的值，还有inline-table, table-row-group, table-column-group, table-header-group, table-footer-group, table-row, table-column, table-cell, marker, run-in, list-item, 和 table-caption等。
示例：.container { display: flex; } 将使 .container 元素以弹性布局方式显示。
浏览器兼容：大部分现代浏览器（包括IE9+）都支持此属性，但某些古老的浏览器可能不支持特定的值。

2. box-sizing:

定义：box-sizing 控制元素的盒模型计算方式，即边框（border）和内填充（padding）是否包含在元素总尺寸内。
使用说明：可以设为content-box (默认) 或者border-box，前者边距和宽度/高度会增加到元素上，后者则不会。
属性值：content-box 和 border-box.
示例：.container { box-sizing: border-box; } 会让.container 的总大小等于内容区域加上边框和内填充。
浏览器兼容性良好，所有主流浏览器都支持。

3. position:

定义：position 设置元素的定位类型，对于布局有重要影响。
使用说明：可以是static, relative, absolute, fixed, 或 sticky。比如 relative 和 absolute 是常用的绝对定位方式，fixed 则让元素相对于浏览器窗口定位。
属性值：static, relative, absolute, fixed, sticky.
示例：.header { position: absolute; top: 0; left: 0; } 将 .header 定位在其父元素顶部左侧。
大多数现代浏览器支持，但IE8及更早版本不支持fixed和sticky。

如何用display属性创建表格布局？

在 Vue 中，你可以使用 CSS 的 display 属性结合 HTML 表格元素 table、thead, tbody, tfoot, tr, th, 和 td来创建表格布局。以下是一些基本步骤：

HTML 结构:

创建一个

根元素。
可能包含多个（表头）、（主体）和（页脚）。

Html
<table class="my-table"><thead><tr><th>Header 1</th><th>Header 2</th></tr></thead><tbody><tr v-for="(item, index) in items" :key="index"><td>{{ item.column1 }}</td><td>{{ item.column2 }}</td></tr></tbody><tfoot><tr><td>Total</td><td>Total Value</td></tr></tfoot>
</table>

CSS样式:
使用 display: table; 设置 table 元素为表格模式。
使用 display: table-row; display: table-cell; 分别设置 tr (行) 和 td (单元格) 为行和单元格模式。

Css
.my-table {display: table;width: 100%;
}.my-table th,
.my-table td {padding: 8px;border: 1px solid #ddd;display: table-cell;
}

Vue 数据绑定:
如果数据是从 Vue 实例中获取的，比如 items 数组，你可以使用 v-for 指令进行数据循环渲染。
确保在 Vue 组件内部正确地设置了数据，并且通过 v-bind:class 或者直接在 CSS 里添加类名来自定义样式，以适应不同场景的需求。

常见CSS属性