CSS, each front-end person’s basic skills, or general or skilled or proficient! Here’s a look at some CSS you may not know about

  • 1. Flex layout affects Overflow
  • 2. The table does not support box-shadow

    1. The following three situations will result in position: Fixed Misposition:

      (1) Elements whose transform attribute value is not None;

      (2). Elements whose perspective value is not None;

      (3) Specify any CSS properties in will-change

    1. Inline-block elements are affected by white space between them, which can be cleared using font size: 0
    1. The object-fit attribute specifies how the contents of an element should fit into the specified height and width of the container.

    Object-fit is generally used for IMG and video tags. Generally, these elements can be cut, scaled or directly stretched to retain their original proportions. Object-position Controls the image position.

    1. Add the scrollable container with the scrollable behavior: smooth for silky scrolling.

    You can also use the scroll-snap-type attribute to optimize the scrolling effect. This property specifies whether a container captures the internal scroll action and how to handle the scroll end state. Let the element stop in its proper position after the scrolling operation is complete.

    1. Font: system-UI Automatically selects the default system font for the operating system. Using the system font for a specific operating system by default can improve performance.
    1. : focal-Visible: This selector can effectively display different forms of focus depending on the user’s input method (mouse vs keyboard).
    1. Padding-top,padding-bottom,margin-top,margin-bottom do not apply to inline elements.