CSS使用知识点

1.空白符
2.字符间距
3.省略号样式
4.水平垂直居中用法
5.CSS角标实现

空格符

---

1. 

相当于键盘按下的空格，区别是 是可以累加的空格，键盘敲下的空格不会累加

2. 

相当于1/2中文宽度的空格，透明，基本不受字体影响

3. 

相当于一个中文宽度的空格，透明，基本不受字体影响

4. 

窄空格，所占宽度较小，相当于em的六分之一

5.‌

零宽不连字，不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制

6.‍

零宽连字，不打印字符，放在某些需要复杂排版语言的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果

空格（ ）、制表位（ ）、换行（ ）和回车（ ）还有（　）

字符间距设置

---

1.抬头缩进text-indent

例如：text-indent: 20px，表示缩进20像素

2.字间距letter-spacing

例如：letter-spacing: 8px，表示字间距为8px

3.行间距（行高）

例如：line-height: 20px，表示行占高20px

省略号样式

---

1.语法

text-overflow : clip | ellipsis

clip：不显示省略标记（...），只是裁切超出的文本

ellipsis：当文本溢出时显示省略符号（...）

2.使用

省略样式的使用需要配合宽度和white-space来实现，例如：

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;  //强制不换行

3.多行文本的省略符

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

详见SSXfont博客，穿梭>>>

绝对定位元素实现水平垂直居中

---

1.已知宽度高度的绝对定位元素居中实现

.center { 
    position: aboslute;
    // 已知高宽度
    width: 200px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-top: -150px;    /* 高度的一半 */
    margin-left: -100px;    /* 宽度的一半 */
}

2.未知宽度时的居中实现（transform: translate）

.center {
    position: aboslute;
    // 也适用于固定宽高的
    // width: 200px;
    // height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  /* 50%为元素的自身size的一半 */
    -webkit-transform: translate(-50%, -50%); /* 设置浏览器兼容 */
    -moz-transform: translate(-50%, -50%);
}

3.由于transform: translate的兼容性不支持IE10以下的，这时我们可以使用margin:auto来实现

.center {
    width: 200px;
    height: 300px;
    position: aboslute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* auto相当于 margin-top/right/bottom/left:0; */
}

如果只实现垂直方向的居中，可以使用margin-top:0;margin-bottom:0;来实现，同理，水平方向使用margin-left\margin-right

css角标实现

---

1.通过渐变色，设置斜角方向，渐变50%后透明

.jioabiao {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #31b968 50%, transparent 50%);
    /*135deg: 角度，左上角向右下角（左上角角标）； 31b968 50%着色； transparent 50% 透明*/
}

角度说明：0：从下向上  90：从左到右  180：从上向下  270：从右向左

2.使用border制作三角形

.jioabiao {
    width: 0;
    height: 0;
    border-top: 200px solid #7e58e7;
    border-right: 200px solid transparent;
}

3.旋转角度后，使用magin负值实现（需要父级设置，overflow:hidden）

.jioabiao {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    background: #eb67eb;
    transform: rotateZ(45deg);
}

效果：

参照博客，穿越>>>

参考网站与文章

---

http://www.divcss5.com     divCss5

https://www.cnblogs.com/gopark/p/8875655.html