一、文本样式属性1.1 text-transform 文本大小写转换作用​ 设置文本的大小写形式可选值说明uppercase字母全部大写lowercase字母全部小写capitalize首字母大写none文本正常显示默认值.upper { text-transform: uppercase; /* HELLO WORLD */ } .lower { text-transform: lowercase; /* hello world */ } .capitalize { text-transform: capitalize; /* Hello World */ }1.2 text-decoration 文本装饰作用​ 设置文本的修饰效果可选值说明underline下划线overline上划线line-through删除线none无装饰效果.deco1 { text-decoration: underline; /* 下划线 */ } .deco2 { text-decoration: line-through; /* 删除线 */ } .deco3 { text-decoration: overline; /* 上划线 */ }1.3 间距控制属性/* 字符间距 */ letter-spacing: 2px; /* 每个字符之间的间距 */ letter-spacing: -1px; /* 负值可使字符更紧凑 */ /* 单词间距 */ word-spacing: 10px; /* 单词之间的间距 */1.4 text-align 文本对齐作用​ 设置文本的水平对齐方式可选值说明left左对齐默认值center居中对齐right右对齐.center { text-align: center; } .right { text-align: right; }重要特性需要有足够的空间才能让文本移动该属性可以被继承1.5 text-indent 首行缩进作用​ 设置首行文本的缩进.indent { text-indent: 2em; /* 首行缩进2个字符 */ }属性值说明正数向右缩进负数向左缩进大数值可用于隐藏元素内容1.6 文本溢出处理white-space作用​ 设置网页如何处理空白可选值说明nowrap文本不换行text-overflow作用​ 文本溢出时的显示方式可选值说明ellipsis显示省略号表示被截断的文本单行文本省略号实现经典三件套.ellipsis { width: 200px; /* 必须设置宽度 */ white-space: nowrap; /* 强制不换行 */ overflow: hidden; /* 溢出隐藏 */ text-overflow: ellipsis; /* 溢出显示省略号 */ }1.7 阴影效果text-shadow 文本阴影text-shadow: h-shadow v-shadow blur color;参数说明是否必写h-shadow水平位移距离正值向右负值向左✅ 必写v-shadow垂直位移距离正值向下负值向上✅ 必写blur模糊半径值越大越模糊默认0❌ 可选color阴影颜色默认字体颜色❌ 可选.shadow-text { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }box-shadow 盒子阴影box-shadow: h-shadow v-shadow blur color;参数含义与text-shadow相同。.shadow-box { box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); }1.8 vertical-align 垂直对齐作用​ 设置行内元素或表格单元格的垂直对齐方式可选值说明baseline基线对齐默认middle居中对齐top顶部对齐bottom底部对齐.middle-align { vertical-align: middle; }解决图片三像素空白问题图片底部与父元素之间会出现约3像素的空白间隙以下是四种解决方案/* 方案一设置vertical-align为非baseline值 */ img { vertical-align: top; } /* 方案二将元素转换为块级元素 */ img { display: block; } /* 方案三父元素设置font-size:0注意不影响文本 */ .parent { font-size: 0; } /* 方案四使用定位脱离文档流 */ img { position: absolute; }二、文档流与元素类型2.1 文档流概念网页是多层结构文档流位于最底层创建的元素默认都在文档流中元素状态有两种在文档流中​ /脱离文档流2.2 元素类型及特点元素类型特点块级元素​独占一行宽度默认父元素的100%高度默认被内容撑开行内元素​不独占一行宽高默认被内容撑开不能自定义设置行内块元素​兼具块级和行内元素特点存在三像素空白问题重要提示一旦元素脱离文档流就不再区分块级、行内、行内块元素也就不再有以上特点。三、盒模型3.1 盒子组成页面中的每个元素都被视为一个矩形盒子由四部分组成┌─────────────────────────────┐ │ 外边距 (Margin) │ │ ┌───────────────────────┐ │ │ │ 边框 (Border) │ │ │ │ ┌─────────────────┐ │ │ │ │ │ 内边距 (Padding) │ │ │ │ │ │ ┌───────────┐ │ │ │ │ │ │ │ 内容区 │ │ │ │ │ │ │ │ (Content) │ │ │ │ │ │ │ └───────────┘ │ │ │ │ │ └─────────────────┘ │ │ │ └───────────────────────┘ │ └─────────────────────────────┘组成部分说明内容区​子元素和文本内容的排列区域内边距​内容区与边框之间的空间边框​盒子的边界线外边距​盒子与其他元素之间的距离3.2 盒子大小计算盒子大小 内容区 内边距 边框注意外边距不影响盒子本身的大小只影响元素的位置和与其他元素的距离。四、边框设置4.1 边框基本语法border: 宽度 样式 颜色;属性说明默认值宽度边框粗细1-3px样式边框样式必须指定无颜色边框颜色黑色样式可选值值说明solid实线double双线dotted点状虚线dashed条状虚线none无边框.box { border: 2px solid red; /* 2px红色实线边框 */ }4.2 单边边框设置border-top: 2px solid red; /* 上边框 */ border-right: 2px solid blue; /* 右边框 */ border-bottom: 2px solid green; /* 下边框 */ border-left: 2px solid yellow; /* 左边框 */4.3 边框属性分开设置/* 边框宽度上 右 下 左 */ border-width: 1px 2px 3px 4px; /* 四个值 */ border-width: 1px 2px 3px; /* 三个值上 左右 下 */ border-width: 1px 2px; /* 两个值上下 左右 */ border-width: 1px; /* 一个值统一设置 */ /* 边框颜色上 右 下 左 */ border-color: red blue green yellow; /* 四个值 */ border-color: red blue green; /* 三个值 */ border-color: red blue; /* 两个值 */ border-color: red; /* 一个值 */实战案例自定义小箭头.arrow { border: 10px solid red; border-color: red transparent transparent transparent; /* 上边框红色其余三边透明形成一个向下的三角形箭头 */ }五、内边距Padding5.1 内边距特性影响盒子的可见框大小元素的背景会延伸到内边距区域盒子大小由内容区、内边距和边框共同决定5.2 内边距设置方式/* 统一设置 */ padding: 20px; /* 分别设置四边上 右 下 左 */ padding: 10px 20px 30px 40px; /* 单边设置 */ padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 25px;六、外边距Margin6.1 外边距特性设置元素与其他元素之间的距离不影响可见框的大小但影响元素位置属于盒子的外部空间6.2 外边距设置/* 单边设置 */ margin-top: 20px; /* 上外边距正值向下移动负值向上移动 */ margin-right: 20px; /* 右外边距块元素默认无效果 */ margin-bottom: 20px; /* 下外边距影响下方元素位置 */ margin-left: 20px; /* 左外边距正值向右移动负值向左移动 */ /* 水平居中 */ margin: 0 auto; /* 块元素水平居中 */6.3 外边距注意事项操作效果设置上外边距改变自身位置正值向下负值向上设置左外边距改变自身位置正值向右负值向左设置右外边距影响其他元素位置设置下外边距影响其他元素位置负值使元素向反方向移动七、总结本文详细介绍了CSS文本样式和盒模型概念的核心知识点文本样式大小写转换、文本装饰、间距控制、对齐方式、首行缩进、溢出处理、阴影效果、垂直对齐文档流与元素类型块级、行内、行内块元素的特点和区别盒模型内容区、内边距、边框、外边距的组成和作用边框设置基本语法、单边设置、属性拆分内边距与外边距设置方式、特性和注意事项掌握这些知识后你将能够精确控制网页中元素的尺寸和位置实现各种复杂的页面布局效果。