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

相关推荐
渣渣xiong29 分钟前
从零开始:前端转型AI agent直到就业第五天-第十一天
前端·人工智能
布局呆星37 分钟前
Vue3 | 组件通信学习小结
前端·vue.js
C澒40 分钟前
IntelliPro 企业级产研协作平台:前端智能生产模块设计与落地
前端·ai编程
OpenTiny社区2 小时前
重磅预告|OpenTiny 亮相 QCon 北京,共话生成式 UI 最新技术思考
前端·开源·ai编程
前端老实人灬2 小时前
web前端面试题
前端
Moment2 小时前
AI 全栈指南:NestJs 中的 Service Provider 和 Module
前端·后端·面试
IT_陈寒2 小时前
为什么我的JavaScript异步回调总是乱序执行?
前端·人工智能·后端
Moment2 小时前
AI全栈入门指南:NestJs 中的 DTO 和数据校验
前端·后端·面试
小码哥_常2 小时前
告别RecyclerView卡顿!8个优化技巧让列表丝滑如德芙
前端
小村儿3 小时前
Harness Engineering:为什么你用 AI 越用越累?
前端·后端·ai编程