關於css方面的技巧

標籤：lin   height   psi   order   多行   block   vertica   line   hidden   

1.用span完成三角形的寫法

span{
display: inline-block;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top: 10px solid #fff;
}

2.多行文字超出以......的實行顯示

p{

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 11;
overflow: hidden;
text-overflow: ellipsis;
}

3.塊狀元素使vertical-align:middle有效方法

父元素需要 vertical-align:middle
然後為元素before:{

content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}

需要置中的元素也vertical-align：middle;

4.元素水平垂直置中的方法

1.ele{

position: absolute;
left: 35%;
top: 55%;
margin-top: -320px;
margin-left: -130px;

 

}

2.css實現視窗變化時，元素仍然置中

.ele {
width: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

 

關於css方面的技巧