Skip to content

CSS Tips

Jump to bottom
EricYang edited this page Oct 19, 2021 · 13 revisions

CSS tips

隐藏滚动条

    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
        width: 0;
    };

限制文字显示行数

  1. -webkit-line-clamp
    display: -webkit-box;
    overflow: hidden;
    max-height: calc(2*1.15*1.5rem);
    line-height: 25px;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  1. text-overflow: ellipsis
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

Sticky

  • 用法：容器要有height，overflow: scroll/auto; 子元素position: sticky;基于top, right, bottom, 和 left的值进行偏移。

  • 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

  • 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

  • 该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。

getComputedStyle()

  • Window.getComputedStyle(获取计算样式的Element,要匹配的伪元素的字符串)方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。

  • CSS属性的值: initial, computed, resolved, specified, used, and actual values.即初始、计算、解析、指定、使用和实际值。

let elem1 = document.getElementById("elemId");
let style = window.getComputedStyle(elem1, null);

// 它等价于
// let style = document.defaultView.getComputedStyle(elem1, null);

clear

  • clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

  • 要被清除的相关浮动元素指的是在相同块级格式化上下文中的前置浮动。

  • 注意：如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

#container::after {
  content: "";
  display: block;
  clear: both;
}

SCSS/SASS

  • SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

  • 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

  • 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

# index.scss  定义变量并导出
$primary-color: #f40000;

:export {
  primaryColor: $primary-color;
}

# index.js
import styles from './index.scss';
// 可以直接引入并使用scss变量
console.log('styles', styles.primaryColor);

查看UI轮廓outline

  • 这里没有使用 border 的原因是 border 会增加元素的大小但是 outline 不会；
  • 通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置，还能帮助我们方便地查看任意网站的布局；
  • 所有浏览器都支持 outline 属性;outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用;
  • 轮廓线不会占据空间，也不一定是矩形（比如 2D 转换等）。
html * {
  outline: 1px solid red;
}

Clone this wiki locally