CSS易忘属性

1. 文本属性

|------------------------------------------------------------------------------------------------------------|
| 文本间距: 1. 字母间距:letter-spacing 2. 单词间距: word-spacing(通过空格识别词) 3. 属性值为像素(px),正值让间距增大,负值让间距缩小。 |

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 文本修饰: 属性名:text-decoration 可选值: 1. none:无装饰线(常用) 2. underline:下划线(常用) 3. overline:上划线 4. line-through:删除线 可搭配如下值使用: 1. dotted:虚线 2. wavy:波浪线 3. 也可以指定颜色 举例: p{ text-decoration: overline wavy red; } |

|----------------------------------------------------------------------------------------------------|
| 文本缩进: 属性名:text-indent 属性值:css中的长度单位,例如:px 举例: div{ text-indent:40px; } |

|---------------------------------------------------------------------------------------------------------------------------------------------------|
| 文本对齐-水平方向: 属性名:text-align 常用值: 1. left:左对齐(默认值) 2. right:右对齐 3. center:居中对齐 举例: div{ text-align:center; } |

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 行高: 属性名:line-height 可选值: 1. normal:由浏览器根据文字大小决定的一个默认值。 2. 像素(px)。 3. 数字:参考自身font-size的倍数(很常用)。 4. 百分比:参考自身font-size的百分比。 备注:由于字体设计的原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感。 举例: div{ line-height:60px; line-height:1.5; line-height:150%; } 行高注意事项: line-height过小文字会产生重叠,且最小值是0,不能为负数。 line-height是可以继承的,且为了能更好的呈现文字,最好写数值。 line-height的关系: 1. 设置了heigth,那么高度就是height的值 2. 不设置height的时候,会根据line-height计算高度。 |

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 文本对齐-垂直方向: 1. 顶部:无需任何属性,在垂直方向上,默认就是顶部对齐。 2. 居中:对于单行文字,让height = line-height即可。 3. 底部:对于单行文字,目前一个临时的方式: 让line-height = (height*2)-font-size-x。 备注:x是根据字体族,动态决定的一个值。 |

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| vertical-align 属性名: vertical-align 作用:用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式。 常用值: 1. baseline(默认值):使元素的基线与父元素的基线对齐。 2. top:使元素的顶部与其所在行的顶部对齐。 3. middle:使元素的中部与父元素的基线加上父元素字母x的一半对齐。 4. bottom:使元素的底部与其所在行的底部对齐。 特别注意:vertical-align不能控制块元素。 |

相关推荐
瓜瓜怪兽亚4 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院4 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233404 小时前
React组件完全指南
前端·javascript·react.js
qq7798233404 小时前
React Hooks完全指南
前端·javascript·react.js
Moment4 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI4 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead5 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
lecepin6 小时前
AI Coding 资讯 2025-10-22
前端·javascript·后端
BumBle6 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app