div固定大小文字溢出自动缩小_Css 常用文字属性

点击上方 蓝字关注我们~软件测试大师  让测试so easy

01

CSS常用文本属性

1.字体、字号类：

①font-weigh：字体粗细 bold-加粗 normal-正常 lighter-细体　也可以用100-900数值，400表示normal，700表示bold。

②font-style:字体样式。italic-倾斜 normal-正常

③font-size:字号。可以写px单位，也可以写%
200%表示浏览器默认大小(16px)的两倍=32px

④font-family:字体系列(字体族)。可以直接写字体名，也可以写字体系列明。

常用字体系列：serif-衬线体，sans-serif-非衬线体；

font-family可以接收多个值，用逗号分隔，表示优先使用第一个，如果没有这个字体，依次向后使用。通常，最后一个为字体系列名；

比如：font-family:"黑体","微软雅黑",sans-serif;

⑤font缩写形式：

顺序必须是：font-weight font-size/line-height font-family

不同属性之间，用空格分隔；

1.font-size/line-height 必须一组用/分隔
2.font-family多个字体之间，用逗号分隔
3.font:bold italic 30px/2 "黑体","微软雅黑",sans-serif

2、字体颜色：

①color：字体颜色 可以是单词、16进制、RGB等。

②opacity：透明度可选值0-1

[opacity和rgba区别]

rgba本身可以设置颜色，而opacity必须配合其他颜色属性使用；

rgba仅仅是让当前元素设置的颜色透明，而opacity，会让当前元素里面当所有文字、背景、子元素都透明。

3、行距对齐、其他类：

①line-height:行高，可以写px单位可以直接写数字(表示默认行距的几倍)、可以写%(默认行距的百分比)

　　行高重要作用：让单行文字下div中垂直居中，设置行高等于div高度，即可让单行文字垂直居中。

②text-align:设置区域内的行级元素水平对齐：left/center/right

③letter-spacing:字符间距，字与字之间距离

④text-decoration:文本修饰　underline-下划线、overline-上划线、line-through-删除线、none-去掉超链接下划线

⑤overflow : 设置超出区域文字的显示方式。

1.overflow：hidden；超出区域的文字隐藏不显示；

2.overflow：scroll；无论文字多少，都会显示水平垂直滚动条

3.overflow：auto;自动，默认效果。文字多显示滚动条，文字少，不显示滚动条。

可以使用overflow-x和overflow-y单独修改两个方向的滚动

4.overflow-x:scroll;overflow-y:hidden

⑥text-overflow:设置行末多余文字显示方式

clip-多余文字裁剪掉 ellipsis-多余文字显示省略号，需要配合white-space：nowrap；使用【重点】设置行末显示省略号(三行代码，缺一不可)

overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

⑦white-space：nowrap；设置中文行末，不断行显示

⑧ text-indent:首行缩进，单位px

⑨-webkit-text-stroke: 0.5px blue;文字描边

-webkit-表示只有webkit内核的浏览器生效、常见有chrome、safari

⑩text-shadow:文字阴影，有四个属性值，空格分隔
水平阴影距离，正数阴影右移，负数阴影左移
垂直阴影距离，正数阴影下移，负数阴影上移
阴影模糊距离，0表示阴影一点也不模糊
阴影的颜色。

text-shadow: 2px 2px 2px blue;

02

CSS常用背景属性

1.background-color:背景色

2.background-image:背景图。使用url("")选择背景图片，背景图和背景色同时存在时，背景图覆盖背景色

3.background-repeat:背景图的重复方式，no-repeat不平铺，repeat平铺，repeat-x延x轴平铺，repeat-y延y轴平铺。

4.background-size:背景图的大小

[指定宽度高度]

宽度高度的指定，可以写px，也可以写%(父容器宽高的百分比)
当写两个属性时，分别表示宽度、高度；
党写一个属性时，表示宽度，高度等比缩放。

[使用其他属性]

contain:图片等比缩放，直到宽或高中较大的一边缩放到100%为止(可能导致较短的一边小于100%，图片无法覆盖全部区域。

cover:图片等比缩放，直到宽或高中较小的一边缩放到100%为止(可能导致较长的一边大于100%，图片超出区域显示不全。

background-position:背景图偏移量

①指定位置：left/center/right top/center/bottom
当只有一个值时，另一个默认居中

②指定坐标：两个属性分别表示：水平位移和垂直位移，坐标的值可以是px单位，也可以是百分数

当写像素单位时：水平方向正右负左，垂直方向正下负上(左负右正，上负下正)

当写百分数时：一般为正数，表示的是去掉图片的宽高，剩余空白区域的分布比例

　background-position:30%;水平方向去掉图片宽度，剩余区域3:7分。

“努力的意义就是，以后的日子里，放眼望去，全部都是自己喜欢的人和事”

这里是软件技术大师专门分享

软件工程师成长方向和各种 tips

面试技巧、职场知识以及其他有趣的内容...

END 

扫码关注我们

更多学习资料和干货等着你们

▼

往期精彩回顾

▼

软件测试者宝藏资源库

萌新能不能转行软件测试？ 点分享 点点赞

点在看