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不能控制块元素。 |

相关推荐
羽沢3121 分钟前
ECharts 学习
前端·学习·echarts
LYFlied23 分钟前
WebAssembly (Wasm) 跨端方案深度解析
前端·职场和发展·wasm·跨端
七月丶24 分钟前
实战复盘:我为什么把 TypeScript 写的 CLI 工具用 Rust 重写了一遍?
前端·后端·rust
over69727 分钟前
《闭包、RAG与AI面试官:一个前端程序员的奇幻LangChain之旅》
前端·面试·langchain
JIngJaneIL32 分钟前
基于java+ vue交友系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·交友
拉不动的猪42 分钟前
回顾计算属性的缓存与监听的触发返回结果
前端·javascript·vue.js
karshey1 小时前
【IOS webview】h5页面播放视频时,IOS系统显示设置的icon
前端·ios
树欲静而风不止慢一点吧1 小时前
小米手环9应用/游戏开发快速入门
前端·javascript·小程序
小七不懂前端1 小时前
我用 NestJS + Vue3 + Prisma + PostgreSQL 打造了一个企业级 sass 多租户平台
前端·vue.js·后端