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

相关推荐
C澒5 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
清山博客6 小时前
OpenCV 人脸识别和比对工具
前端·webpack·node.js
要加油哦~6 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能
程序员Sunday6 小时前
说点不一样的。GPT-5.3 与 Claude Opus 4.6 同时炸场,前端变天了?
前端·gpt·状态模式
yq1982043011566 小时前
静思书屋:基于Java Web技术栈构建高性能图书信息平台实践
java·开发语言·前端
aPurpleBerry6 小时前
monorepo (Monolithic Repository) pnpm rush
前端
青茶3606 小时前
php怎么实现订单接口状态轮询请求
前端·javascript·php
鹏北海7 小时前
micro-app 微前端项目部署指南
前端·nginx·微服务
发现一只大呆瓜7 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
css趣多多7 小时前
add组件增删改的表单处理
java·服务器·前端