Novice first blog, collate recently learned CSS in-depth understanding of overflow

Overflow basic attributes

  • visible
  • hidden
  • auto
  • scroll
  • inherit

Overflow function premise

  1. nondisplay:inlineThe level of
  2. Dimensional limits for the corresponding azimuth
  3. For cells such as TD, table is also requiredtable-layout:fixed

If overflow-x is the same as overflow-y, it is equivalent to overflow: visible

overflow-x: scroll; overflow-y: scroll; Overflow :scroll */Copy the code

/* overflow-x: hidden; /* overflow-x: hidden; overflow-y: visible;Copy the code

Overflow and scroll bars

  • No matter what browser, the default scroll bar comes from<html>Tag! Rather than<body>The label
  • The body tag has a.5em margin of around 8px by default
  • IE7- Browser defaulthtml{overflow-y: scroll; }
  • Default for Internet Explorer 8+ :html{overflow: auto; }
  • If you want to get rid of the default scroll bar, you just need tohtml{overflow: hidden; }
  • Chrome’s scroll bar is 17px wide

Rely on overflow style presentation

  • Resize stretch — button
<! < p style= "max-width: 100%; clear: both; min-height: 1em"resize: both; overflow:hidden;"</button>Copy the code

  • Resize stretch — text field
<! <textarea>Hello,Cassie</textarea>Copy the code

Resize the size of the drag area is 17px by 17px, the size of the scroll bar

Overflow and anchor technology

The essence of anchor positioning is to change the rolling height of the container so that the upper edge of the anchor element is aligned with the upper edge of the scrollable container

<div class="box1">
        <div class="list" id="one">1</div>
        <div class="list" id="two">2</div>
        <div class="list" id="three">3</div>
        <div class="list" id="four">4</div>
    </div>
    <div class="link">
        <a class="click" href="#one">1</a>
        <a class="click" href="#two">2</a>
        <a class="click" href="#three">3</a>
        <a class="click" href="#four">4</a>
Copy the code

Afterword.

End of the first notes, knowledge comes from longed for lesson net Zhang Xinxu teacher tutorial at https://www.imooc.com/learn/256

Keep learning!!