css

概念行高是指文本行基线间的垂直距离。 基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高，上行的底线和下一行顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距。设置高度和行高相等，但是无法垂直居中（文案偏上）一、使用padding代替line-height line-height: 0; padding: 20px 0;//相当于line-heigh: 40px; 或者 line-height: normal; padding: 20px 0;二、利用flex布局中的垂直居中属性 .parent{ border: 1px solid blue; display: flex; height: 40px; align-items: center; font-size:

一、行内元素居中 水平居中：设置父元素文本对齐方式为居中(taxt-align: center;) 垂直居中：设置父元素的行高等于容器高度 (line-height: 100%;)水平垂直居中：水平居中+垂直居中<style> .ta-center{ text-align: center; } .lhh-block{ line-height: 60px; } </style> <div class="lhh-block center"> <span>行内元素水平垂直居中</span> </div>二、块级元素居中 水平居中

实现效果如下： /* 三角形 */ .lhh-triangle-box{ position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; font-size: 0; /* 清除高度 */ } .lhh-triangle{ position: absolute; width: 0; height: 0; border: 8px solid transparent; } .lhh-triangle.top{ left: 0; top: 50%; border-top-color: black; } .lhh-triangle.bottom{ left: 0; bottom: 50%; border-bottom-color: green; } .lhh-triangle.

一、单行文本省略号 语法：text-overflow: clip|ellipsis|string; 默认值为clip参数：clip修剪文本 | ellipsis显示省略符号来代表被修剪的文本 | string使用给定的字符串来代表被修剪的文本.lhh-single-line{ overflow: hidden; //隐藏溢出文本 white-space: nowrap; //文本不会换行，直到遇到 <br> 标签为止。 text-overflow: ellipsis; //文本溢出显示省略符号... }二、多行文本省略号：兼容ie8及以上 该方法适用范围广，省略号需要结合js控制。将height设置为line-height的整数倍，防止超出的文本显示。给:after添加渐变背景优化显示效果。// html <div class="block lhh-multi-line">多行文本省略号<