Understand overflow in depth

Writing in the front

How well you know CSS layouts determines how fast you can develop pages in Web development. As Web technology continues to evolve, there are countless ways to implement layouts.

I recently put together a series of articles over the course of half a month, using fragment time, that summarized the various layouts in CSS, as well as their implementation methods and common techniques. This series gives you a new look at CSS layouts.

This series of navigation post I enter, which can quickly jump to the article you want to know (suggested favorites)

Basic properties of Overflow

An overview of the

The overflow property is used for what needs to be done when an element is too big to fit the size of the parent container. There are four common values for this property:

  • visible: Default value. Content is not pruned back and can be rendered outside the element box.
  • hiddenIf the content exceeds the parent container, the excess will be hidden
  • scroll: A scroll bar appears whether the container is exceeded or not.
  • auto: If there are no displays outside the container, they will display normally, if there are, a scroll bar will appear.

Example code is as follows:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Overflow basic attributes</title>
        <style>
            .main {
                width: 1200px;
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
            }
            .container {
                height: 210px;
                width: 260px;
                background-color: #70a1ff;
            }
            img {
                width: 300px;
                opacity: 0.7;
            }
            .visible {
                /* The overflow part is displayed */
                overflow: visible;
            }
            .hidden {
                /* The excess part is hidden */
                overflow: hidden;
            }
            .scroll {
                /* Horizontal and vertical scroll bar, can scroll display */
                overflow: scroll;
            }
            .auto {
                /* The scroll bar appears when the department is exceeded
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="container visible"><img src=".. /image/img.jpg" /></div>
            <div class="container hidden"><img src=".. /image/img.jpg" /></div>
            <div class="container scroll"><img src=".. /image/img.jpg" /></div>
            <div class="container auto"><img src=".. /image/img.jpg" /></div>
        </div>
    </body>
</html>
Copy the code

The following information is displayed:

Overflow – x and overflow – y

Overflow-x and overflow-y can set what to do with overflow when horizontal or vertical, respectively.

Note that if overflow-x has the same value as overflow-y, the result is the same as overflow; If overflow-x and overflow-y have different values, and one property is assigned a visible value and the other a non-Visible value, the first value assigned visible will automatically change to Auto.

Use overflow premises

For overflow to be effective, the container must satisfy the following conditions:

  1. dispalyThe value of theinline 。
  2. Has size limits. (width / height / max-width / max-height / absoluteStretch)
  3. For cellstdAnd so ontable 为 table-layout: fixed Can.

Overflow and scroll bars

The conditions under which the scroll bar appears

The conditions for the emergence of scroll bars are mainly divided into the following two types:

  1. useoverflowProperty to appear in the scroll bar
  2. HTML element, for example<html> 和 <textarea>Properties.

Note that the default scroll bar comes from the < HTML > element, not the element. Scrollbars also take up the available width or height of the container

Gets the scrollbar height

The JavaScript code to get the scrollbar height is as follows:

let st = document.documentElement.scrollTop || document.body.scrollTop;
Copy the code

Custom scroll bar

The WebKit kernel provides the following browser-custom scrollbar style attributes for the WebKit kernel, as follows:

  • ::-webkit-scrollbar– The entire scroll bar.
  • ::-webkit-scrollbar-button– Buttons (up and down arrows) on the scroll bar.
  • ::-webkit-scrollbar-thumb– Scroll slider on the scroll bar.
  • ::-webkit-scrollbar-track– Scroll bar track.
  • ::-webkit-scrollbar-track-piece– Scroll bar track part without slider.

The sample code looks like this:

<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Custom scroll bar</title>
        <style>
            body {
                height: 1000px;
            }
            /* The entire scroll bar. */
            ::-webkit-scrollbar {
                width: 12px;
            }
            /* Scroll bar track */
            ::-webkit-scrollbar-track {
                background-color: #ff7875;
            }
            /* The slider on the scroll bar */
            ::-webkit-scrollbar-thumb {
                background-color: #ffc069;
                border-radius: 6px;
            }
        </style>
    </head>
    <body></body>
</html>
Copy the code

The effect is as follows:

Block formatting context

Block Formatting Context (BFC). The CSS rendering mode for a box layout in a Web page refers to a separate rendering area or a separate container.

BFC layout rules

  1. The internal elements will be placed vertically, one after the other, starting from the top.
  2. The vertical distance of the element is determined bymarginDecision. Belonging to two adjacent elements of the same BFCmarginIt’s going to add up
  3. It all starts on the far left. Per elementmargin boxTo the left, with the containing blockborder boxLeft of (for formatting from left to right, otherwise reverse). This is true even if there is a float
  4. BFC areas are not associated withfloat boxStack.
  5. A BFC is a separate container on a page, and the child elements in the container do not affect the outside elements and vice versa.
  6. When calculating the height of the BFC, the floating element is also involved in the calculation. (When there is a float inside the BFC, the HEIGHT of the floating element is included in the calculation so as not to affect the layout of external elements.)

Create the landing

Block formatting contexts are created in the following ways:

  • The root element (<html>)
  • Float element (element’sfloatnotnone)
  • Absolutely locate the element (element’sposition 为 absolute 或 fixed)
  • Inline block elements (of elementsdisplay 为 inline-block)
  • Table cells (elementdisplay 为 table-cell, HTML table cells default to this value)
  • Table title (element’sdisplay 为 table-caption.HTMLTable title defaults to this value)
  • overflowThe calculated value is notvisibleThe block element
  • displayA value offlow-rootThe elements of the
  • Elastic element (display 为 flex 或 inline-flexThe immediate child of the element)
  • Grid elements (display 为 gridOr a direct child of an inline-grid element)

CSS properties that depend on Overflow

Overflow-dependent CSS properties are invalid if their value is not set to visible. There are two overflow-dependent CSS properties:

1. The resize attribute

This property is used to set whether an element is resizable.

This property has the following values:

  • none: Default value, elements cannot be scaled by the user.
  • both: allows the user to resize elements horizontally and vertically.
  • horizontal: allows the user to resize elements horizontally.
  • vertical: allows the user to resize elements vertically.

2. The text – overflow attributes

This property is used to specify what to do when text overflows.

This property has the following values:

  • clip: Default “truncates the text at the limit of the content area
  • ellipsis:.To represent truncated text
  • <string>: The string content will be appended to the content area. If the space is too small, the string will also be truncated.