CSS中文本属性使用详情

1.文本修饰

1.1.属性名:

text-decoration

1.2.可选值:

none: 无装饰线

underline: 下划线

overline: 上划线

line-through: 删除线

可搭配如下样式

dotted: 虚线

wavy: 波浪线

也可以指定颜色.

2.文本缩进

2.1.属性名:

text-indent

2.2.属性值:

css中的长度单位,例如:px

3.文本对齐方式

3.1.属性名:

text-align

3.2.属性值:

left: 左对齐(默认值)

right:右对齐

center:居中对齐

4.行高

4.1.属性名:

line-height

4.2.可选值:

normal:有浏览器根据文字大小决定的一个默认值.

像素(px):

数字: 参考自身font-size的倍数(很常用).==>1.5

百分比: 参考自身font-size的百分比.==>150%

备注:由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响美感.

4.3.行高注意事项:

1.line-height 过小会造成文字重叠,且最小值是0,不能为负数.

2.line-height 是可以继承的,且为了能更好的呈现文字,最好写数值.

3.line-height 和height是什么关系?

3.1.设置了height,那么高度就是height的值.

3.2.不设置height的时候,会根据line-height计算高度.

5.文本垂直对齐方式:

5.1.属性名:

vertical-align

5.2.作用:

用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式

5.3.常用值:

1.baseline (默认值):使元素的基线与父元素的基线对齐.

2.top 使元素的顶部与其所在行的顶部对齐

3.middle 使元素的中部与父元素的基线加上父元素字母x的一半对齐.

4.bottom 使元素的底部与其所在行的底部对齐.

5.4.特别注意:

vertical-align不能控制块级元素.

相关推荐
摸鱼仙人~30 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码5 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html