css样式

1.高度和宽度

盒模型样式

• 宽度支持百分比，但高度不支持百分比
• 高度和宽度的设置对行业标签是无效的
• 对块级标签有效

.box {
  width: 300px; /* 宽度 */
  height: 200px; /* 高度 */
  padding: 20px; /* 内边距（内容与边框的距离） */
  padding: 10px 20px; /* 上下 10px，左右 20px */
  
  margin: 15px; /* 外边距（元素与其他元素的距离） */
  margin: 0 auto; /* 水平居中 */
  
  border: 2px solid #ccc; /* 边框（宽度 样式 颜色） */
  border-radius: 8px; /* 边框圆角 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 盒子阴影 */
  
  box-sizing: border-box; /* 盒模型计算方式（border-box 包含 padding 和 border） */
}

注：在 CSS 中，display: inline-block 是一个非常实用的属性值，它结合了 inline 和 block 两种元素的特性，具有以下特点：
1.兼具行内与块级特性：

• 像 inline 元素一样，它不会独占一行，能与其他行内元素并排显示
• 像 block 元素一样，可以设置 width、height、margin（上下方向有效）和 padding 等属性

常见用途：

• 创建水平排列的元素（如导航菜单、图片画廊）
• 控制元素尺寸的同时保持在同一行
• 解决行内元素无法设置宽高的问题

 .c3 {
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: yellow;
            border: 1px solid red;
        }

2.文本样式

控制文字的外观、排版和装饰`

/* 字体相关 */
.text {
  font-family: "Arial", sans-serif; /* 字体类型 */
  font-size: 16px; /* 字体大小 */
  font-weight: bold; /* 字重（normal/bold/100-900） */
  font-style: italic; /* 字体样式（normal/italic/oblique） */
  line-height: 1.5; /* 行高（文本行之间的距离） */
}

/* 文本外观 */
.text {
  color: #333; /* 文本颜色 */
  text-align: center; /* 对齐方式（left/center/right/justify） */
  text-decoration: underline; /* 文本装饰（none/underline/overline/line-through） */
  text-transform: uppercase; /* 大小写转换（none/uppercase/lowercase/capitalize） */
  letter-spacing: 2px; /* 字符间距 */
  word-spacing: 4px; /* 单词间距 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 文本阴影 */
}

3.背景样式

控制元素的背景效果

 .box {
  background-color: #f0f0f0; /* 背景颜色 */
  background-image: url("bg.jpg"); /* 背景图片 */
  background-repeat: no-repeat; /* 背景重复（repeat/repeat-x/repeat-y/no-repeat） */
  background-position: center center; /* 背景位置（left/center/right/top/bottom/坐标） */
  background-size: cover; /* 背景大小（auto/cover/contain/具体尺寸） */
  background-attachment: fixed; /* 背景滚动方式（scroll/fixed） */
  /* 简写属性 */
  background: #f0f0f0 url("bg.jpg") no-repeat center/cover fixed;
}

4.布局样式

控制元素的排列和定位

/* 显示方式 */
.element {
  display: block; /* 块级元素（独占一行） */
  display: inline; /* 行内元素（不独占一行） */
  display: inline-block; /* 行内块元素（兼具两者特性） */
  display: flex; /* 弹性布局 */
  display: grid; /* 网格布局 */
  visibility: hidden; /* 隐藏元素（保留空间） */
  display: none; /* 隐藏元素（不保留空间） */
}

/* 定位方式 */
.element {
  position: static; /* 默认定位（按文档流排列） */
  position: relative; /* 相对定位（相对于自身原位置偏移） */
  position: absolute; /* 绝对定位（相对于最近的定位祖先） */
  position: fixed; /* 固定定位（相对于视口） */
  top: 20px; left: 30px; /* 偏移量（配合定位使用） */
  z-index: 10; /* 层级优先级（数值越大越靠上） */
}

/* 浮动 */
.element {
  float: left; /* 向左浮动 */
  float: right; /* 向右浮动 */
  clear: both; /* 清除浮动影响 */
}

5. 弹性布局（Flexbox）

用于灵活排列子元素（父容器属性）。

.container {
  display: flex;
  flex-direction: row; /* 排列方向（row/column/row-reverse/column-reverse） */
  justify-content: center; /* 主轴对齐（flex-start/center/flex-end/space-between/space-around） */
  align-items: center; /* 交叉轴对齐（flex-start/center/flex-end/stretch/baseline） */
  flex-wrap: wrap; /* 是否换行（nowrap/wrap/wrap-reverse） */
  gap: 10px; /* 子元素间距 */
}

6. 网格布局（Grid）

用于二维网格排列（父容器属性）

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 列宽（fr 为比例单位） */
  grid-template-rows: 100px auto; /* 行高 */
  gap: 15px; /* 单元格间距 */
  justify-items: center; /* 单元格内容水平对齐 */
  align-items: center; /* 单元格内容垂直对齐 */
}

7. 边框与轮廓

控制元素的边框和外轮廓

.element {
  border: 3px dashed #f00; /* 边框（宽度 样式 颜色） */
  border-top: 2px solid #00f; /* 单独设置上边框 */
  border-radius: 50%; /* 圆形（宽高相等时） */
  
  outline: 2px solid #0f0; /* 外轮廓（不占空间，用于突出元素） */
  outline-offset: 5px; /* 轮廓与边框的距离 */
}

8.过渡与动画

实现元素状态变化的平滑效果。

/* 过渡（状态变化时的动画） */
.button {
  transition: all 0.3s ease; /* 过渡属性（属性 时长 缓动函数） */
}
.button:hover {
  transform: scale(1.1); /*  hover 时放大 */
  background-color: #4CAF50;
}

/* 动画（自定义关键帧动画） */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.box {
  animation: slide 2s ease infinite alternate; /* 应用动画（名称 时长 缓动 次数 方向） */
}

9. 其他常用样式

/* 光标样式 */
.cursor {
  cursor: pointer; /* 手型光标 */
  cursor: text; /* 文本输入光标 */
}

/* 透明度 */
.element {
  opacity: 0.7; /* 0（完全透明）~1（完全不透明） */
}

/* 溢出处理 */
.container {
  overflow: hidden; /* 隐藏溢出内容 */
  overflow: scroll; /* 显示滚动条 */
}

/* 列表样式 */
ul {
  list-style-type: none; /* 移除默认列表符号 */
  list-style-image: url("bullet.png"); /* 自定义列表符号 */
}