前端 学习笔记 【持更】

一. 文本换行

1. word-wrap：normal | break-word

设置文本行超出容器边界时是否换行。
normal：控制连续文本换行。
break-word：内容将在边界换行，可能出现词内换行。

2. word-break：normal | break-all | keep-all

属性值与文本语言有关系。
normal：根据亚洲语言与非亚洲语言的文本规则，允许字内换行。
break-all：同亚洲语言的normal，允许强行截断英文单词，达到词内换行的效果。
keep-all：同非亚洲语言的normal，对中日韩文不允许字断开，适合包含少量亚洲语言的非亚洲文本。

二. 段首缩进：text-indent

根据具体的字符大小设置段落首行缩进，一般为两个字符大小。

三. 垂直对齐

1. 文本垂直对齐方式：vertical-align

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。

2. 行高line-height = 容器高度

四. 列表样式

1. 列表符号：list-style-type

无序列表：

disc实心圆、circle空心圆、square实心方块、none无符号。

有序列表：

decimal十进制数字、decimal-leading-zero前导零十进制（01、02、03）、
lower/upper-roman小/大写罗马数字、lower/upper-alpha小/大写英文字母、
none无标记、inherit继承父元素标记

2.自定义列表符号：list-style-imag：url{…}

五. HSLA颜色值

Hue（色调），0或360代表红色，120代表绿色，240代表蓝色。
Saturation（饱和度），取值0%~100%。
Lightness（亮度），取值0%~100%。
不透明度opacity取值0~1。

六. 背景图像固定

background-attachment：scroll（随滚动条一起滚动） | fixed（固定在页面的可见区域）

七.鼠标效果

cursor：url（…）
解决图标在不同浏览器中大小不同：32×32以下。

八.覆盖手机端链接或JS可点击元素的点击高亮。

-webkit-tap-highlight-color：transparent

九.svg使用< img>标签外部引入

需规定height与width。
若需要JavaScript操作dom则需要内联引入svg代码。

十.大小写：text-transform

capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。
none：标准 、transparent：继承

十一.文字两端对齐

text-align: justify;
text-justify: inter-ideograph

十二.省略

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

<div style="width: 90%;line-height: 30px;margin-top: 6px;
text-overflow: ellipsis;white-space:nowrap;overflow: hidden;">
    <span style="color: #999999;">首付预算：</span>
     <span style="color: orangered;opacity: 0.6">
         净首付92.5万，月供、税费点击进入税费计算器</span>
     <span  style="color: gray;position: absolute;right: 8%">
         <van-icon name="arrow" style="position: relative;top: 2px"/>
     </span>
</div>

两行省略

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
width:...;