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實現(xiàn)窗口變化時，元素仍然居中

.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%);
}

chrome中文界面上會默認將小于12px的文本強制按照12px顯示，解決方法：-webkit-text-size-adjust:none;

css樣式重置代碼

@charset "utf-8";
body{margin: 0;}
h1,h2,h3,h4,h5,h6{margin: 0;}
p{margin: 0;}
form{margin: 0;}
input,select{color: #333;margin: 0;padding: 0;border: none;outline: none;-webkit-appearance: none;}
textarea{padding: 0;border: none;outline: none;color: #333;resize: none;text-align: justify;}
a{color: #333;text-decoration: none;-webkit-tap-highlight-color: rgba(255,255,255,0);}
b{font-weight: normal;}
i{font-style: normal;}
ul,ol{margin: 0;padding: 0;}
li{list-style: none;}
img{border: 0;}
table{border-collapse: collapse;text-align: center;}
td,th{padding: 0;}
.clearfix:after{content: "";display: block;clear: both;height: 0;}
.clearfix{zoom: 1;}
.fl{float: left;}
.fr{float: right;}

關于手機端

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scale=no">
<meta name="applicable-device" content="mobile">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">

媒體查詢?@media only screen and (min-width: 320px) and (max-width: 374px)

轉載于:https://www.cnblogs.com/thisxiaojiu/p/6602219.html

總結

以上是生活随笔為你收集整理的关于css方面的技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。