css實現單行文字溢位顯示 …
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
實現多行文字溢位顯示…
display:
-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;
讓**不可複製
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
盒子垂直水平居中
提供4種方法:
1、定位 盒子寬高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;
2、table-cell布局 父級 display: table-cell; vertical-align: middle; 子級 margin: 0 auto;
3、定位 + transform ; 適用於 子盒子 寬高不定時; (這裡是本人常用方法)
position: relative / absolute;
/*top和left偏移各為50%*/
top:50%
; left:50%
;/*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
transform:
translate(-
50%,-
50%); 注意這裡啟動了3d硬體加速哦 會增加耗電量的 (至於何是3d加速 請看瀏覽器程序與執行緒篇)
4、flex 布局
父級:
/*flex 布局*/
display: flex;
/*實現垂直居中*/
align-items: center;
/*實現水平居中*/
justify-content: center;
再加一種水平方向上居中 :margin-left : 50% ; transform: translatex(-50%);
更短的陣列去重寫法
[
...new
set([2
,"12",2
,12,1
,2,1
,6,12
,13,6
])]// [2, "12", 12, 1, 6, 13]
前端知識點
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 知識點 ul li 中預設選擇class active firstli rem...
前端知識點
關於html 1.html語義化標籤的理解 結構化的理解 能否寫出簡潔的html結構 seo優化 2.h5中新增的屬性 如自定義屬性data,類名classname等,新增表單元素,拖拽drag 3.h5中新增的api,修改的api,廢棄的api 稍作了解 離線儲存,audio,video 關於cs...
前端知識點
ie8相容 ie8功能與其他瀏覽器不同,則可能為標籤未閉合。顯示居中 使用margin left auto margin right auto margin 0 auto 會影響其他設定。jq tab選項卡實現 主要 this on click function line height只要正對ie,...