CSS deep understanding of Study Notes-overflow, cssoverflow

Source: Internet
Author: User

CSS deep understanding of Study Notes-overflow, cssoverflow

1. Basic Attributes of Overflow

Overflow: visible (default)/hidden/scroll/auto/inherit;

Visible: visible when the part is exceeded.

Hidden: Hide the excess part.

Scroll: scroll out.

Auto: the scroll bar appears only when the value exceeds the threshold.

Inherit: inheritance. (IE8 +)

Note: The value of overflow-x is different from that of overflow-y. If one of the attribute values is granted with visible and the other value is assigned with hidden/scroll/auto, visible is reset to auto.


① The scroll bar looks different;

② The width setting mechanism is different.


The width of IE7 is calculated as PX, but the vertical scroll bar occupies part of the width, so the horizontal scroll bar appears. To remove this horizontal scroll bar, you only need to delete width: 100%.


① Non-display: inline level;

② Size limit of corresponding orientation. Width/height/max-width/max-height/absolute stretch;

③ For cell td and so on, the table must be in the table-layout: fixed state.

  Overflow: visible:


2. Overflow and scroll bar

  The condition that the scroll bar appears:① Auto/scroll; ② the content exceeds the box.

  Body/html and scroll bar:

No matter what browser, the default scroll bar is from

    • The default IE-7 Browser: html {overflow-y: scroll ;}
    • IE-8 + browser default: html {overflow-y: auto ;}

Therefore, you want to remove the page scroll bar html {overflow: hidden }.

  JS rolling height:

    • Chrome: document. body. scrollTop;
    • Other browsers: document.doc umentElement. scrollTop;


Note: In addition to the chrome browser, the padding-bottom of all other browsers is missing and not displayed. The scrollHeight value is also different.


  Scroll Bar Width mechanism:

The scroll bar occupies the available width or height of the container.


  Horizontal center beating problem repair:

① Html {overflow: scroll ;};

②. Container {padding-left: calc (100vw-width) *. 5);} -- 100vw indicates the browser width, and width indicates the center container width.

  Custom scroll bar:



  Ios native rolling callback:-Webkit-overflow-scrolling: touch;

3. Overflow and block format Context

Block-level format context (BFC): For details, refer to BFC (Block-level format context)

It is not recommended to use overflow to fix the floating, which will affect the layout.Common floating recovery methods:


  Common two-column Adaptive Layout:

. Cell {display: table-cell; width: 2000px; // IE8 + BFC features * display: inline-block; * widht: auto; // IE7-pseudo BFC features}

4. absolute positioning of overflow and absolute

Under absolute positioning, overflow hiding and scrolling will become invalid.

Cause: absolute positioning elements are not always cropped by parent-level overflow attributes, especially when overflow is presentContains a block (including the parent element declared by position: relative/absolute/fixed. If not, it is a body element).

Q: How to Avoid invalidation?

A: ① The overflow element itself serves as the inclusion block;

② The child element of the overflow element is the inclusion block;

③ The transform statement is regarded as the inclusion block: I overflow element transform (only IE9 +/FireFox supported); II overflow sub-element transform (IE9 +/FireFox/Chrome/Safari/Opera supported)

Ineffective overflow:

The menu bar is fixed.


Code implementation:

 1 <!DOCTYPE html> 2 

5. Style representation dependent on overflow

The resize attribute of CSS3 works on the premise that overflow cannot be visible.

The default size of the drag and drop area of resize is 17px * 17px. The size of the scroll bar is also 17px.

Text overflow ellipsis display attribute text-overflow: ecllipsis. The premise is white-space: nowrap and overflow: hidden.

6. overflow and anchor Technology

(1) anchor and anchor

Anchor: "# XXXX", which is common in our URLs ".

Anchor: the ID of the tag.

Anchor positioning: uses the anchor to locate the anchor position.

(2) essence of anchor Positioning

On the page, you can scroll through the anchor to its corresponding anchor element, that isChange the scroll height of a container.

Premise: ① The container can be rolled; ② the anchor element is in the container.

(3) triggering of anchor locating

① The Anchor and anchor elements in the url;

② The Anchor element that can be focused is in the focus state;

(4) Positioning of the anchor

① Fast Positioning

② Tab Technology

③ Single-page application

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.