css属性大全

1. 布局和尺寸

属性

• width：设置元素的宽度。
• height：设置元素的高度。
• margin：设置元素的外边距。
• padding：设置元素的内边距。
• border：设置元素的边框。
• box-sizing：设置元素的盒模型。
• display：设置元素的显示方式。
• position：设置元素的定位方式。
• z-index：设置元素的堆叠顺序。
• float：设置元素的浮动方式。
• clear：设置元素的清除浮动。
• flex：设置弹性布局中的项目属性。
• grid：设置网格布局中的项目属性。

示例

.box {
    width: 200px;              /* 宽度 */
    height: 100px;             /* 高度 */
    margin: 10px;              /* 外边距 */
    padding: 10px;             /* 内边距 */
    border: 2px solid black;   /* 边框 */
    box-sizing: border-box;    /* 盒模型 */
    display: block;            /* 显示方式 */
    position: relative;        /* 定位方式 */
    z-index: 1;                /* 堆叠顺序 */
    float: left;               /* 浮动方式 */
    clear: both;               /* 清除浮动 */
    flex: 1;                   /* 弹性布局 */
    grid-area: 1 / 1 / 2 / 2;  /* 网格布局 */
}

2. 文本和字体

属性

• color：设置文本颜色。
• font-family：设置字体系列。
• font-size：设置字体大小。
• font-weight：设置字体粗细。
• font-style：设置字体样式（如斜体）。
• text-align：设置文本的水平对齐方式。
• text-decoration：设置文本的装饰（如下划线）。
• line-height：设置行高。
• letter-spacing：设置字母间距。
• word-spacing：设置单词间距。
• text-transform：设置文本转换（如大写）。
• text-shadow：设置文本阴影。

示例

.text {
    color: blue;               /* 文本颜色 */
    font-family: Arial, sans-serif; /* 字体系列 */
    font-size: 16px;           /* 字体大小 */
    font-weight: bold;         /* 字体粗细 */
    font-style: italic;        /* 字体样式 */
    text-align: center;        /* 文本对齐方式 */
    text-decoration: underline; /* 文本装饰 */
    line-height: 1.5;          /* 行高 */
    letter-spacing: 1px;       /* 字母间距 */
    word-spacing: 2px;         /* 单词间距 */
    text-transform: uppercase;  /* 文本转换 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 文本阴影 */
}

3. 背景和边框

属性

• background-color：设置背景颜色。
• background-image：设置背景图像。
• background-repeat：设置背景图像的重复方式。
• background-position：设置背景图像的位置。
• background-size：设置背景图像的大小。
• border-width：设置边框宽度。
• border-style：设置边框样式。
• border-color：设置边框颜色。
• border-radius：设置圆角。
• box-shadow：设置阴影。

示例

.background {
    background-color: yellow;  /* 背景颜色 */
    background-image: url('image.jpg'); /* 背景图像 */
    background-repeat: no-repeat; /* 背景图像不重复 */
    background-position: center; /* 背景图像居中 */
    background-size: cover;     /* 背景图像覆盖整个元素 */
    border-width: 2px;          /* 边框宽度 */
    border-style: solid;        /* 边框样式 */
    border-color: black;        /* 边框颜色 */
    border-radius: 10px;        /* 圆角 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影 */
}

4. 转换和动画

属性

• transform：设置元素的转换。
• transition：设置过渡效果。
• animation：设置动画。
• @keyframes：定义动画的关键帧。

示例

.transform {
    transform: rotate(45deg);  /* 旋转 45 度 */
    transform: scale(1.5);     /* 放大 1.5 倍 */
    transform: translate(20px, 10px); /* 平移 20px 水平，10px 垂直 */
    transition: all 0.3s ease;  /* 所有属性在 0.3 秒内平滑过渡 */
}

@keyframes example {
    from { background-color: red; }
    to { background-color: yellow; }
}

.animation {
    animation: example 2s infinite; /* 动画名称，持续时间，重复次数 */
}

5. 可见性和透明度

属性

• visibility：设置元素的可见性。
• opacity：设置元素的透明度。

示例

.visibility {
    visibility: visible; /* 可见 */
    visibility: hidden;  /* 隐藏，但占据空间 */
}

.opacity {
    opacity: 0.5; /* 50% 透明度 */
}

6. 其他常用属性

属性

• cursor：设置鼠标指针的形状。
• overflow：设置溢出内容的处理方式。
• white-space：设置空白字符的处理方式。
• vertical-align：设置元素的垂直对齐方式。
• list-style：设置列表项的样式。
• content：在伪元素中插入内容。
• counter-reset：设置计数器的重置。
• counter-increment：设置计数器的递增。

示例

.cursor {
    cursor: pointer; /* 指针形状 */
}

.overflow {
    overflow: visible;  /* 默认值，内容超出时可见 */
    overflow: hidden;   /* 内容超出时隐藏 */
    overflow: scroll;   /* 内容超出时显示滚动条 */
    overflow: auto;     /* 内容超出时根据需要显示滚动条 */
}

.white-space {
    white-space: normal;  /* 默认值，空白字符会被折叠 */
    white-space: pre;     /* 保留空白字符 */
    white-space: nowrap;  /* 不换行 */
}

.vertical-align {
    vertical-align: baseline; /* 基线对齐 */
    vertical-align: top;      /* 顶部对齐 */
    vertical-align: middle;   /* 居中对齐 */
    vertical-align: bottom;   /* 底部对齐 */
}

.list-style {
    list-style: disc;     /* 圆点 */
    list-style: square;   /* 方块 */
    list-style: none;     /* 无样式 */
}

::before {
    content: "前缀"; /* 插入内容 */
}

.counter {
    counter-reset: section; /* 重置计数器 */
    counter-increment: section; /* 递增计数器 */
}

汇总表格

希望这些分类和示例能帮助你更好地理解和使用 CSS 属性。