1. input中的placeholder
首先我們定義一個input：
<input type="text" placeholder="你點我啊！" />
當我們使用輸入框input中的placeholder時經常需要調里面字體的大小和其他樣式，（由于兼容性問題，對應瀏覽器不同，所以要針對瀏覽器用不同的代碼，）這時就需要用到如下代碼：
input::-webkit-input-placeholder {
/*谷歌*/
color: red;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: black;
}
input::-moz-placeholder {
/*火狐 19+ */
color: pink;
}
input:-moz-placeholder {
/*火狐 18-*/
color: yellow;
}
（簡單用谷歌來實作一下，效果如下圖：）
2.單行多行文本加省略號
在做一些純css頁面時 偶爾要用到文本加省略號，特別是多行文本居中，很容易忘記里面一些代碼
/* 單行文本加省略號 */
.text {
/* 注意定寬 */
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 8px;
}
/*多行文本加省略號 */
.texts {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
3.做一個三角形
做一些下拉框或者串列的時候 做一個小三角就會用到了，不用設定寬高，利用邊框寬度，只需要留下一個邊框的顏色，其他邊框設定成transparent即可
/* css做一個三角形 */
.trangle {
width: 0;
height: 0;
border: 20px solid red;
border-color: transparent transparent red transparent;
}
4.絕對定位后使其居中
注意要使用transform: translate(-50%, -50%); 來讓它以中心點平移，當然你也可以使用margin來調節，
另外其他方法居中也有很多種，高等與行高來垂直居中等其他方法（由于常用就不列舉了）
.center {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: pink;
text-align: center;
}
5.去除重復邊框
首先要在大表格（最外面表）中寫下面的代碼：
table {
border-collapse: collapse;
}
然后再設定tr，th，td的邊框就沒問題了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/137328.html
標籤：java
上一篇：win10安裝軟體時顯示：“現在更新設備， 若要繼續接收應用建議,請立即更新”
下一篇：2020-09-26周總結