前端開發(fā)技巧常見css樣式

css 一行文本超出...

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box; 
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

擴展
代碼經(jīng)過編譯或者打包后可能把-webkit-box-orient: vertical干掉了
解決方案一

/* autoprefixer: off*/
 -webkit-box-orient: vertical; 
/* autoprefixer: on*/

解決方案二

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

擴展,autoprefixer 瀏覽器前綴處理工具
autoprefixer不僅會幫你加-webkit-之類的prefixer，
它還會幫你刪除你自己寫在 css/sass/less里的樣式，
真是厲害了
關(guān)閉autoprefixer的自動刪除功能，這樣

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */

用注釋包裹的中間這一句就不會被刪除

div::-webkit-scrollbar {
    display: none;
}

div::-webkit-scrollbar 滾動條整體部分
div::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條
div::-webkit-scrollbar-track 滾動條的軌道（里面裝有 Thumb
div::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調(diào)小方塊的位置
div::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動條中間部分（除去
div::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
div::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件注意此方案有兼容性問題，一般需要隱藏滾動條時我都是用一個色塊通過定位蓋上去，或者將子級元素調(diào)大，父級元素使用 overflow-hidden 截掉滾動條部分。暴力且直接。

元素寬高設(shè)置為 0，通過 border 屬性來設(shè)置，讓其它三個方向的 border 顏色為透明或者和背景色保持一致，剩余一條 border 的顏色設(shè)置為需要的顏色。

div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: red;
}

定位

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

flex

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

html 中大部分標(biāo)簽都是不可以編輯的，但是添加了 contenteditable 屬性之后，標(biāo)簽會變成可編輯狀態(tài)。

<div contenteditable="true"></div>

不過通過這個屬性把標(biāo)簽變?yōu)榭删庉嫚顟B(tài)后只有 input 事件，沒有 change 事件。也不能像表單一樣通過 maxlength 控制最大長度。我也忘記我在什么情況下用到過了，后面想起來再補吧。

這是一個 css 屬性，我一般稱之為 css 表達式。可以計算 css 的值。最有趣的是他可以計算不同單位的差值。很好用的一個功能，缺點是不容易閱讀。接盤俠沒辦法一眼看出 20px 是啥。

div {
    width: calc(25% - 20px);
}