css常用知识点

解决img标签与p标签之间有空隙的问题
1.将img设置为block: img{display:block}

1. 设置img的竖直对其方式:vertical-align: bottom;
2. 定义容器里的字体大小为0。
   div{
   　　width:110px;
   　　border:1px solid #000000;
   　　font-size:0px;
   }
   css实现图片元素水平垂直居中
   样式

   //style  
   .outer{  
    width: 500px;  
    height: 200px;  
    line-height: 200px;  
    text-align: center;  
    border: green solid 5px;  
   }  
   .inner{  
   display: inline-block;  
   vertical-algin: middle;  
   }

   html

   <div class='outer'>  
   <img src="https://www.baidu.com/img/baidu_jgylogo3.gif">  
   </div>

.one {
position:absolute;
width200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}

.two{
position:fixed;
width:180px;
height:180px;
top:50%；
left:50%;
margin-top:-90px;
margin-left:-90px;
background:orange;
}

.three{
position:fixed; width:160px; height:160px; top:0; right:0; bottom:0; left:0; margin:auto; background:pink;
}
.four{ position:absolute; width:140px; height:140px; top:0; right:0; bottom:0; left:0; margin:auto; background:black;}

css实现单行、多行文本溢出显示省略号
单行文本的移除显示省略号用text-overflow:ellipsis属性，还需要加宽度width属性来兼容部分浏览器。
实现方法：

overflow：hidden;  
white-spacen:nowrap;  
text-overflow:ellipsis;

1.使用overflow：hidden把超出的内容进行隐藏；

1. 然后使用white-space：nowrap设置内容不换行；
2. 最后使用text-overflow：ellipsis设置超出内容为省略号

但是这个属性只支持单行文本的溢出显示省略号。
实现多行文本溢出显示省略号，如下。

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

因为使用了webkit的css扩展属性，该方法适用于webkit浏览器及移动端；
注：
1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的webkit属性。常见结合属性：

1. display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。
2. -webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
   实现方法：

   p{position:relative;line-height:20px;max-height:40px;overflow:hidden;}  
   p::after{content:"...";position:absolute;bottom:0;right:0;padding-left:40px;  
   background: line-gradient(to right,transparent,#fff 55%);  
   background: -webkit-linear-gradient(left, transparent, #fff 55%);  
   background: -o-linear-gradient(right, transparent, #fff 55%);  
   background: -moz-linear-gradient(right, transparent, #fff 55%);  
   }

   该方法使用范围广，但文字未超出行的情况下也会出现省略号，可结合js优化该方法。
   注：
   1.将height设置为line-height的整倍数，防止超出的文字露出。

3. 给p::after添加背景可避免文字只显示一半。
   3.由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after

css3中的transform对行内元素（inline）无效，查资料后发现，transform适用于：所有块级元素及某些内联元素。
相关链接:http://www.css88.com/book/css/properties/transform/transform.htm