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.
Compatibility:
① 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%.
Prerequisites:
① 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
Therefore, you want to remove the page scroll bar html {overflow: hidden }.
JS rolling height:
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:
.clearfix{*zoom:1;}.clearfix:after{content:'';display:table;clear:both;}
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> 25. 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
