前端知識點

2021-10-22 22:40:26 字數 1534 閱讀 2969

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,...