Shulou(Shulou.com)06/01 Report--

This article is to share with you about the tips for using the overflow attribute in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

One: basic attributes of overflow

The basic properties of overflow are: visibel,hidden,scroll,auto,inherit,overflow-x and overflow-y

Overflow-x and overflow-y set the same value, which is equivalent to overflow. If not, one assigns visibel,auto and the other assigns visibel,auto,hidden. Will be reset to auto.

The premise of function

1. Non-display:inline level!

two。 Corresponding to the size limit of orientation, width/height/max-width/max-height/absolute stretching

Ingenious use of overflow:visibel

In IE7 browsers, the more text you have, the larger the padding blanks on both sides of the button. Add css style overflow:visible to all buttons

Two: overflow and scroll bar

Conditions for the occurrence of scroll bars

Some elements of 1.overflow:auto/overflow:scroll come with scroll bars.

Body/html and scroll bar

No matter what browser, the default scroll bar comes from html! Not the body tag.

Ie8+html {overflow:auto}

So, if we want to remove the default scroll bar on the page, just:

Html {overflow:hidden}

Body/html and scroll bar-js and scroll height

Compatible writing method

Varst=document.body.scrollTop | | document.documentElement.scrollTop

Padding-bottom deletion in overflow

.box {width:400px;height:100px;padding:100px0;overfow:auto;}

Bottom can be scrolled out in a chrome browser.

The width of the scroll bar

Box width (with scroll bar)-inside box width = scroll bar width

The IEfirefoxchrome is all 17 pixels.

Horizontal center beating problem

Repair method

1.html {overflow-y:scroll;}

2..container {padding-left:calc (100vwmur100%);}

100vw-browser width; 100%-available content width

Custom scroll bar-webkit

Overall part::-webkit-scrollbar

Buttons at both ends::-webkit-scrollbar-button

Outer orbit::-webkit-scrollbar-track

Inner orbit::-webkit-scrollbar-track-piece

Scroll slider::-webkit-scrollbar-thumb

Corner::-webkit-scrollbar-corner

Commonly used in practice

::-webkit-scrollbar {/ / width width:8px;height:8px;}

::-webkit-scrollbar-thumb {/ / drag bar background-color:rgba; border-radius:6px;}

::-webkit-scrollbar-track {/ / background slot background-color:#ddd;border-radius:6px;}

Custom scroll bar-IE

You can use a custom scrolling plug-in

IOS native scrolling callback effect

-webkit-overflow-scrolling:touch

Three: overflow and BFC

Clear floats, adaptive layout, etc.

BFCblockformattingcontext block-level formatting context

At the end of the page, no matter how much the internal elements toss around, they can't affect the outside.

Overflow and BFC

1. Clear floating influence

two。 Avoid margin traversal issu

3. Two-column adaptive layout

Internal floating has no effect.

.clearfix {* zoom:1;}

.clearfix: after {centent:'';display:table;clear:both;}

Avoid margin traversal issu

Set up overflow:scroll,overflow:auto,overflow:hidden

Why is there such a characteristic?

Adaptive layout under fluid characteristics

1. Floating on the left, ordinary on the right

.left {float:left;width:128px;}

.right {min-height:190px;background-color:#beceeb}

two。 Float left, margin right

.left {float:left;width:128px;}

.right {min-height:190px;margin-left:150px;background-color:#beceeb}

3. Float left, padding right

.left {float:left;width:128px;}

.right {min-height:190px;padding-left:150px;background-color:#beceeb}

4. Left float

.left {float:left;width:128px;}

.right {min-height:190px;overflow:hidden;background-color:#beceeb}

Setting the overflow attribute to div is to make the element BFC. When you use padding to do fluid adaptive layout, you must not let the adaptive layer BFC.

Do all BFC properties behave this way?

Yes. Due to their own characteristics, the specific performance is different.

Overflow:hidden; adaptive, single overflow invisible limit application scenario

Float+float encapsulation + destructive can not be adaptive, block floating layout

Position:absolute breaks away from the document stream and entertains itself

Display:inline-block is encapsulated and can not be adaptive.

Display:table-cell is encapsulated, but inherently free of overflow, and its absolute width can be adaptive.

Only overflow:hidden,display:inline-block,display:table-cell can make elements BFC.

Two-column adaptive layout

.cell {

The display:table-cell;width:2000px;//2000 guarantee is larger than the parent element

* pseudo-BFC feature of display:inline-block;*width:auto;//IE7-

}

Four: overflow and absolute positioning

Hidden failure and rolling fixation

Overflow:hidden failure

. overflow-hidden {

Width:300px

Height:200px

Border:5pxsolid#333

Overflow:auto

}

Img {postion:absolute;}

Failure reason

Absolute positioning elements are not always clipped by parent overflow attributes, especially when overflow is between absolute positioning elements and their containing blocks

The containing block refers to the parent element declared "with position:relative/absolute/fixed". If not, the body element

How to avoid failure

The 1.overflow element itself becomes a containing block

The child element of the 2.overflow element becomes the containing block

3. Any legal transform declaration is treated as a containing block

Ingenious use of overflow failure

H0 {height:0;}

.ovh {overflow:hidden;}

.tr {text-align:right;}

.abs {position:absolute;}

Fifth: relying on overflow style performance

Resize stretching

Css3 has an attribute called resize that stretches the size of the element.

.resize: both pull both sides horizontally and vertically

.resize: horizontal only stretches horizontally

Resize:vertical only stretches vertically

However, this declaration wants it to work, and the overflow attribute value of an element cannot be visible!

Button

Such a button can achieve the stretching effect.

The text field comes with the resize attribute, because the text field defaults to overflow:auto

The text field resize drag fishing area is 17x17 pixels. That's the size of the scroll bar.

Ellipsis text overflow dot by dot omission

Text-overflow:ellipsis

This is a button with a width of only 200 pixels

Six: overflow and Anchor Technology

The essence of anchor positioning: the rolling height of the variable container

Trigger of anchor point alignment

Anchor chain and Anchor Point elements in 1.url address

two。 But the anchor element of focus is in the focus state.

The function of anchor point positioning

1. Fast positioning

two。 Anchor Positioning and overflow Tab Technology

Application scenario: single page application

Thank you for reading! This is the end of this article on "what are the skills for using overflow attributes in css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.