20個經常使用的CSS知識點

時間 2021-04-03

標籤 css web chrome 瀏覽器 less dom 字體 flex 動畫 url 欄目 CSS 简体版

原文原文鏈接

1. 如何隱藏滾動條

// chrome 和Safari
*::-webkit-scrollbar { width: 0 !important }
// IE 10+
* { -ms-overflow-style: none; }
// Firefox
* { overflow: -moz-scrollbars-none; }

2. 修改滾動條樣式

*::-webkit-scrollbar {
  /*定義縱向滾動條寬度*/
  width: 12px!important;
  /*定義橫向滾動條高度*/
  height: 12px!important; 
}
*::-webkit-scrollbar-thumb {
  /*滾動條內部滑塊*/
  border-radius: 16px;
  background-color:#c1c1c1;
  transition: background-color 0.3s;
  &:hover {
    /*鼠標懸停滾動條內部滑塊*/
    background: #bbb;
  }
 }
*::-webkit-scrollbar-track {
  /*滾動條內部軌道*/
  background: #f1f1f1;
}

3. 修改input框placeholder的顏色

input::input-placeholder{
    color:red;
}

4. 按鈕不可點擊的樣式

cursor: not-allowed

5. CSS鼠標指針事件：阻止任何JS事件

.disabled { pointer-events: none; }

6. 文字超出強制n行超出部分用省略號代替

div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: n; // 行數
  -webkit-box-orient: vertical;
}

7. 修改字體間距

letter-spacing: 8px

8. 谷歌瀏覽器控制檯提示/deep/將要被移除

<style scoped lang="less">
// 採用的less的轉義和變量插值
@deep: ~'>>>';
.select {
     @{deep} .ivu-card-body {
        width: 100%;
      }
    }
</style>

9. animate動畫停在某個關鍵幀

animation-fill-mode: forwards;

10. 盒子陰影

box-shadow: 0 2px 2px rgba(10,16,20,.24),0 0 2px rgba(10,16,20,.12);
transition: box-shadow .5s;

11.使圖片覆蓋它的整個容器

img {
  object-fit: cover;
}

12. 表格中td的內容自動換行

<table style="word-break:break-all; word-wrap:break-all;">

13. 瀏覽器打印功能圖片失效

body {
    -webkit-print-color-adjust: exact;
}

14. 背景圖像完美適配視口

body {
  background-image: url('xxx');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

15. 如何使用多個背景圖片

body {
  background-image: url('xxx'), url('xxx');
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

16. 如何給背景圖疊加漸變

body {
  background-image: 
    linear-gradient(
      4deg, 
      rgba(38,8,31,0.75) 30%, 
      rgba(213,49,127,0.3) 45%, 
      rgba(232,120,12,0.3) 100%),
      url("xxx");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center
}

17. 如何將背景圖設爲文本顏色

<body>
    <h1>hello!!!</h1>
</body>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 100vh;
  font-size: 120px;
}

h1 {
   background-image: url("xxx");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

18. 如何獲取和設置盒子的寬高

//第一種
dom.style.width/height //只能獲取內聯樣式的元素寬高
//第二種
dom.currentStyle.width/height //只有IE瀏覽器支持
//第三種
dom.getComputedStyle(Dom).width/height //只有瀏覽器渲染後才能獲取 兼容好
//第四種
dom.getBoundingClientRect().width/height //計算一個元素的絕對位置（相對於視窗左上角） 能拿到元素的left、right、width、height

19. 如何讓圖片垂直居中

img {
  vertical-align: middle;
  margin-top: -xpx;
}

20. 消除圖片自帶的間距

img {
  display: block;
}

// 或者 父盒子

div {
  font-size: 0;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

20個經常使用的CSS知識點

1. 如何隱藏滾動條

2. 修改滾動條樣式

3. 修改input框placeholder的顏色

4. 按鈕不可點擊的樣式

5. CSS鼠標指針事件：阻止任何JS事件

6. 文字超出強制n行 超出部分用省略號代替

7. 修改字體間距

8. 谷歌瀏覽器控制檯提示/deep/將要被移除

9. animate動畫停在某個關鍵幀

10. 盒子陰影

11.使圖片覆蓋它的整個容器

12. 表格中td的內容自動換行

13. 瀏覽器打印功能 圖片失效

14. 背景圖像完美適配視口

15. 如何使用多個背景圖片

16. 如何給背景圖疊加漸變

17. 如何將背景圖設爲文本顏色

18. 如何獲取和設置盒子的寬高

19. 如何讓圖片垂直居中

20. 消除圖片自帶的間距

6. 文字超出強制n行超出部分用省略號代替

13. 瀏覽器打印功能圖片失效