Skip to content

CSS Tips

Jump to bottom
EricYang edited this page Oct 8, 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属性的值。
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;
}

Clone this wiki locally