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

相关推荐
苏打水com12 分钟前
Tailwind CSS的grid布局
css
Novlan128 分钟前
TDesign UniApp 组件库来了
前端
用户479492835691530 分钟前
React DevTools 组件名乱码?揭秘从开发到生产的代码变形记
前端·react.js
顾安r1 小时前
11.8 脚本网页 打砖块max
服务器·前端·html·css3
倚栏听风雨1 小时前
typescript 方法前面加* 是什么意思
前端
狮子不白1 小时前
C#WEB 防重复提交控制
开发语言·前端·程序人生·c#
菜鸟‍1 小时前
【前端学习】阿里前端面试题
前端·javascript·学习
Jonathan Star1 小时前
LangFlow前端源码深度解析:核心模块与关键实现
前端
用户47949283569152 小时前
告别span嵌套地狱:CSS Highlights API重新定义语法高亮
前端·javascript·css
无责任此方_修行中2 小时前
一行代码的“法律陷阱”:开发者必须了解的开源许可证知识
前端·后端·开源