CSS使用知识点

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

空格符

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

2.&ensp;

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

3.&emsp;

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

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

5.&zwnj;

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

6.&zwj;

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

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

字符间距设置

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

posted @ 2019-08-21 09:51 kevin_峰阅读(265) 评论(0) 编辑收藏举报

刷新页面返回顶部

CSS使用知识点

公告