I met a problem when I made the anniversary theme skin for the home page. I wrote a demo and then met another problem


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1200px;
            height: 900px;
            margin: auto;
            position: relative;
        }

        .main-banner {
            width: 1200px;
            height: 100%;
            background: pink;
        }

        .banner-plugins {
            position: absolute;
            top: 0;
        }

        .banner-bg-left {
            left: -311px;
        }

        .banner-bg-right {
            right: -293px;
        }
    </style>
</head>
<body>
    <div class="main">
        <img src="./banner-bg-left.png" class="banner-plugins banner-bg-left">
        <img src="./banner-bg-right.png" class="banner-plugins banner-bg-right">
        <div class="main-banner"></div>
    </div>
</body>
</html>
Copy the code

That’s what it looks like

The W3C standard states that the contents of a box are usually limited within the box’s boundaries. But sometimes there is an overflow, where some or all of the content goes outside the box boundaries. Overflow occurs when one of the following conditions is met:

  1. The width of a non-newline line element exceeds the container box width.
  2. A block element of fixed width is placed in a container box that is narrower than it.
  3. The height of an element exceeds the height of the container box.
  4. A descendant element, part of the content caused by the negative margin value on the outside of the box.
  5. The text-indent attribute causes the inline elements to be outside the left and right boundaries of the box.
  6. An absolutely positioned descendant element, part of the content is outside the box. But the excess is not always trimmed. The contents of descendant elements are not clipped by overflow Settings of the ancestor element between the descendant element and its containing block.

If I’m from Mars, it’s not against the law to show affection. If I come to Earth, it’s against the law to show affection, but hey, it’s not against me. That’s the idea. (Involving knowledge points including blocks)

Once the cause of the problem is identified, a solution can be found to hide the content when it is out of view!

It’s natural to add overflow-x: Hidden on top of the body. Of course, it does work, but if the middle body is 1200px, hopefully the horizontal scrollbar will appear if the viewable area is less than 1200px, but adding this to the body will not work. So what can you do? The best thing to do is switch to a background image.

This is the pit duety stepped in.

Well, I met a problem when writing the demo, or the beginning of the code, when viewing area width less than content width, a horizontal scroll bar, then you will find a problem, when I when the width of a narrow viewing area to a scroll bar, will find that the image on the left will be cut, but the right of the image due to overflow, Pull the scroll bar to see all the pictures. Why is the left side cut?

When I adjusted the width of the viewable area to exactly 1200, I found that the body content + overflow is exactly the width of the pink part + the image on the right

I’ve thought about it for a long time, and my personal guess is: because absolute positioning is out of document flow.

Well, how to understand. Document flow is when elements are automatically arranged from left to right and top to bottom when they are typesetted, and there is no CSS in this order. However, out of the document flow, it is not necessarily in the same order as the document was written, and it does not take up the space it would normally occupy in a normal document flow.

To understand this, I think of it like this:

Element typesetting layout, because the width of the viewing area is exactly equal to the width of pink part of the document flow, and absolutely positioned on the left side of the that is not part of the space, so the pink part listed next to the edge of the browser, then look at absolute positioning from the part of document flow, a piece of CSS is pushed to the left to the left, But viewing area is only allowed to see the pink part, pink part already close to the edge, and cling to the left of the scroll bar, even if the scroll bar, also cannot cross to the left, right, and so is not visible on the left, but the dom structure still exists, as much as to say, although we can’t see on the left side of the part, but it still is with us;

The browser continues rendering, and when it gets to the absolute right, we still can’t see it because the width doesn’t allow it, but because of the overflow, there is a scrollbar, so slide the scrollbar to the viewable area to see it.

If the viewable area is a little bit larger, the width of the pink area is a little bit more, and see what it looks like

Or according to the above, from left to right rendering, pink part in more visual area, when rendering absolutely positioned elements, viewing area except normal document flow width = 91, 1291-1200 with 91 px, the width of this width for elements from the document flow to divide the viewing area (because pink is centered), So the left part of the CSS takes up the position to the left of the pink part and the visible width is 46px (why not 45.5, that’s another story). In the same way, the right part is only visible at that point.

My personal guess is this. We can talk about that.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Direction: LTR; direction: LTR; direction: LTR; Writing mode: vertical-rl; vertical-rl; vertical-rl; vertical-rl; vertical-rl; This is for text alignment, should be easier to think of how to use a little bit, can also understand