CSS笔记 第三天

2.8css字体属性

text-align：center;水平居中

vertical-align:center；垂直居中

使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。只针对于行内元素或者行内块元素有效。

baseline 默认，元素放置在父元素的基线上。

top 把元素的顶端与行中最高元素的顶端对齐。

middle 把此元素放置在父元素的中部

bottom 把元素的顶端与行中最低元素的顶端对齐

溢出文字省略号显示

单行文本溢出文字省略号显示必须满足三个条件

1.先强制一行内显示文本

white-space: nowrap;(默认 normal自动换行)

2.超出的部分隐藏

overflow: hidden;

3.文字用省略号替代超出部分

text-overflow: ellipsis;

多行文本溢出文字省略号显示

兼容性问题比较严重，适用于webkit浏览器或移动端

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
弹性伸缩盒子模型显示
-webkit-line-clamp: 2;
限制在一个块元素显示的文本的行数，第几行写第几行的数值
-webkit-box-orient: vertical;
设置或检索伸缩盒对象的子元素的排列方式

字体	font-family： ‘字体名称’；多个字体用“，”隔开
字体大小颜色	font-size:xxxpx;color:字体大小；颜色 16
字体粗细	fond-weight：xxx； 0 - 400（正常）-1000 （100整数倍数） normal默认值，推荐数字400
字体方向	direction：rtl或ltr；
单词间的距离	word-spacing：xxxpx;
文本阴影	text-shadow：{ xxxpx水平，xxxpx垂直，xxxpx模糊的距离，颜色}
文本间距	letter-spacing：xxxpx;
字体每行的间距（行高）	line-height：xxxpx
居中	<center> </center>
文字居中	标签{text-decoration:center}
取消超链接下划线	a{text-decoration:none;}
字体下划线	标签 {text-decoration:underline;}
文字样式	font-style: ; normal默认值，italic斜体样式<i>**标签 字体倾斜**
文本靠左水平对齐	style="text-align:left;" text-align: center;水平居中对齐
文本颜色	color颜色表示1.直接用英文。2.16进制#ffffff。3.rgb代码：rgb（255，255，0，0.3）最后一个透明度
文本缩进	text-indent: 20px;只缩进首行 首行缩进2字符：2em，rem参照整个页面

2.9css书写顺序

布局属性>自身属性>文本属性>其他属性（css3）

width：100vh;/vw;一百的视口高度宽度

不透明度opacity：1

溢出隐藏overflow: hidden;