学习02-css（图片垂直对齐，去除图片底部空白缝隙，溢出文字用省略号显示，css三角之美，字体图标）

图片垂直对齐

基线对齐	vertical-align： baseline；	默认的是文字和图片基线对齐
垂直居中	vertical-align： middle；	默认的是文字和图片基线对齐
顶部对齐	vertical-align： top；	默认的是文字和图片基线对齐

去除图片底部空白缝隙

img vertical-align: middle |top | bottom	让图片不要基线对齐
display： block：	转换为块级元素

溢出文字用省略号显示

white-space:normal; //当文字显示不开的时候，自动换行
white-space:nowrap; //强制在同一行显示文本，直到文本遇到br才换行
overflow:hidden; //超出的部分隐藏
text-overflow:ellipsis; //文字用省略号替代超出的文本

css三角之美

width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent red;
font-size:0pt; 
color:#454545;
line-height: 0;

1.宽度高度为0

2.4个边框都要写颜色，其余改为透明色transparent

3.为照顾兼容性低版本浏览器加上font-size：0； line-height：0；

字体图标

网址http://icomoon.io或者http://www.iconfont.cn

字体样式

@font-face {
			  font-family: 'icomoon';
			  src:  url('fonts/icomoon.eot?7ndcdh');
			  src:  url('fonts/icomoon.eot?7ndcdh#iefix') format('embedded-opentype'),
			    url('fonts/icomoon.ttf?7ndcdh') format('truetype'),
			    url('fonts/icomoon.woff?7ndcdh') format('woff'),
			    url('fonts/icomoon.svg?7ndcdh#icomoon') format('svg');
			  font-weight: normal;
			  font-style: normal;
			  font-display: block;
		}

字体使用

span {
	font-family: 'icomoon';
	font-size:0pt; color:#454545;"
        color: red;
		}

 

来源：oschina

链接：https://my.oschina.net/u/4454049/blog/3176127