【CSS系统化学习】 - 盒模型与文本属性 第三部分：盒模型与文本属性3. 盒模型盒模型是CSS布局的核心概念，它定义了元素的内容、填充、边框和边距之间的关系。边框（border）作用：设置元素的边框样式、宽度和颜色。语法：.box { border: 2px solid #000; /* 宽度 | 样式 | 颜色 */ }细分属性：border-width：边框宽度。border-style：边框样式（如solid, dashed, dotted）。border-color：边框颜色。填充（padding）作用：设置元素内容与边框之间的空间。语法：.box { padding: 10px; /* 上下左右 */ padding: 10px 20px; /* 上下 | 左右 */ padding: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */ }注意：填充会增加元素的尺寸。边距（margin）作用：设置元素与其他元素之间的空间。语法：.box { margin: 10px; /* 上下左右 */ margin: 10px 20px; /* 上下 | 左右 */ margin: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */ }注意：负边距可用于重叠元素。盒模型计算标准盒模型：width和height仅包含内容区域。替代盒模型：width和height包含内容、填充和边框。.box { box-sizing: border-box; /* 启用替代盒模型 */ }4. 文本属性文本属性用于控制文本的样式和布局。字体系列（font-family）作用：设置文本的字体。语法：body { font-family: "Arial", sans-serif; }注意：提供备用字体以确保兼容性。字体大小（font-size）作用：设置文本的大小。语法：h1 { font-size: 24px; }常用单位：px, em, rem, %。字体粗细（font-weight）作用：设置文本的粗细。语法：.bold-text { font-weight: bold; /* 或数值如700 */ }文字颜色（color）作用：设置文本的颜色。语法：p { color: #333; }行高（line-height）作用：设置文本行之间的间距。语法：p { line-height: 1.5; /* 无单位表示倍数 */ }文本对齐方式（text-align）作用：设置文本的水平对齐方式。语法：.center-text { text-align: center; }文本装饰（text-decoration）作用：设置文本的装饰线（如下划线、删除线）。语法：a { text-decoration: none; /* 去除下划线 */ }文本转换（text-transform）作用：控制文本的大小写。语法：.uppercase { text-transform: uppercase; /* 大写 */ }

【CSS系统化学习】- 大纲 最近失业，苦于之前的所有码农知识都是根据各种教程自学而来的，打算系统化学习一下。CSS 学习大纲基础部分1. 引入CSS 内联样式 内部样式表 外部样式表 2. CSS选择器 元素选择器 类选择器 ID选择器 属性选择器 伪类选择器 伪元素选择器 3. 盒模型 边框（border） 填充（padding） 边距（margin） 4. 文本属性 字体系列（font-family） 字体大小（font-size） 字体粗细（font-weight） 文字颜色（color） 行高（line-height） 文本对齐方式（text-align） 文本装饰（text-decoration） 文本转换（text-transform） 5. 背景 背景颜色（background-color） 背景图片（background-image） 背景重复（background-repeat） 背景位置（background-position） 背景附着（background-attachment） 中级部分6. 定位 浮动（float） 清除浮动（clear） 定位模式（position） 静态定位（static） 相对定位（relative） 绝对定位（absolute） 固定定位（fixed） z-index 7. Flexbox布局 显示Flex容器（display: flex;） 主轴方向（flex-direction） 换行（flex-wrap） 对齐项目（justify-content, align-items, align-self） 8. Grid布局 创建Grid容器（display: grid;） 列模板（grid-template-columns） 行模板（grid-template-rows） 区域模板（grid-template-areas） 自动填充（auto-fill） 自动适应（auto-fit） 网格间距（gap） 9. 过渡与动画 过渡效果（transition） 关键帧动画（@keyframes） 动画属性（animation） 10. 响应式设计 媒体查询（media queries） 视口单位（vw, vh, vmin, vmax） 图片响应式（max-width: 100%; height: auto;） 高级部分11. 变量 CSS变量（--variable-name） 12. 样式继承 了解哪些属性会继承 13. 特殊选择器 后代选择器 子选择器（>） 相邻兄弟选择器（+） 通用兄弟选择器（~） 14. 高级布局技术 多列布局（column-count, column-gap） 形状外边距（shape-outside） 分区布局（container-type, container-name） 15. 性能优化 减少重绘和回流 使用合适的单位 最小化样式的使用