Deep understanding of CSS overflow and cssoverflow

Deep understanding of CSS overflow and cssoverflow
* If the [1] Directory defines the [2] attribute [3] invalid [4] before the application

When an element is fixed to a specific size, the content cannot be placed in the element. In this case, you can use the overflow attribute to control this situation.

 

Definition

Overflow

Value: visible | hidden | scroll | auto | inherit

Initial Value: visible

Applies to: block-level elements, replacement elements, and table cells.

Inheritance: None

[Note] For cell td, you also need to set table-layout: fixed to work.

Overflow-X | overflow-y

The attributes of overflow-x and overflow-y were originally extended by IE browser, and were later adopted and standardized by css3. Overflow-x is mainly used to define the cut for horizontal content overflow, while overflow-y is mainly used to define the cut for vertical content overflow.

[Note] If the overflow-x and overflow-y values are the same, they are equivalent to overflow. If the value of overflow-x is different from that of overflow-y, and one of the values is explicitly set to visible or the default value is visvisible, the other value is non-visvisible. The visvisible value is reset to auto

Value: visible | hidden | scroll | auto | inherit | no-display | no-content

Initial Value: visible

Applies to: block-level elements, replacement elements, and table cells.

Inheritance: None

 

Attribute

Visible

The content of the element is also visible outside the element box.

[NOTE 1] IE6-the inclusion block of the element in the browser will extend, so that the excess content can be wrapped.

.box{    height: 200px;    width: 200px;    background-color: lightgreen;}.in{    width: 300px;    height: 100px;    background-color: lightblue;}

<div class="box">    <div class="in"></div></div>

The picture on the left is IE6-browser, and the picture on the right is other browsers.

[NOTE 2] IE7-browser buttons (including <button> and <input type = "button">) have bugs. When there are more words on the buttons, the padding on both sides of the button is larger. You can solve this problem by setting overflow: visible.

The picture on the left shows the default situation, and the picture on the right shows the situation after overflow is set.

Auto

If the content is clipped, the browser displays a scroll bar to view other content.

[Note] for general browsers,

// IE7-browser html {overflow-y: scroll;} // other browsers html {overflow: auto;} // remove the default page scroll bar html {overflow: hidden ;}

Scroll

The content of the element is cropped at the boundary of the element box, but the browser displays the scroll bar to view other content.

[Note] When the firefox and IE8 + browsers overflow: scroll or auto, the padding-bottom is missing.

.box{    width: 100px;    height: 100px;    padding: 50px;    background-color: pink;    overflow:scroll;}.in{    width: 100px;    height: 200px;    background-color: lightgreen;}

<div class="box">    <div class="in"></div></div>

The picture on the left shows the chrome browser, and the picture on the right shows the firefox browser.

Hidden

The content of the element is cropped at the boundary of the element box, and the content beyond the cropping area is invisible.

No-display

When the content overflows the container, no element is displayed, similar to the display: none attribute added to the element.

No-content

When the content overflows, the content is not displayed, similar to the visibility: hidden attribute added to the element.

[Note] no-display and no-content attributes are currently not supported by browsers.

 

Invalid

Absolute positioning elements are not always cropped by parent-level overflow attributes, especially when overflow locates between absolute positioning elements and their contained blocks.

[Note] fixed positioning is relative to window positioning, so fixed positioning elements cannot be tailored by all its parent element overflow attributes.

[Solution]

[1] The overflow element itself is an inclusion Block

Set position: absolute, fixed, or relative for the parent

[2] The child element of the overflow element is the inclusion block.

Add an element between the absolute positioning element and the overflow element and set position: absolute, fixed, or relative

<Div style = "overflow: hidden;"> <div style = "position: relative"> <div style = "position: absolute "> absolute positioning element </div>

 

Application

BFC can be triggered when overflow is set to auto, scroll, or hidden, so that overflow can implement some related applications. The detailed information about BFC is now

[1] Clear floating Effects

[Note] IE6-the browser does not clear the floating by using the overflow method. The common method to eliminate floating is

.clear{    *zoom: 1;}.clear:after{    content: '';    display: block;    clear: both;}

 

[2] avoid margin penetration

[Note] using the overflow attribute is only one of the many methods to avoid margin penetration. Other methods include BFC, padding, and border.

 

[3] two-column Adaptive Layout

[Note] scenarios with overflow attributes have obvious restrictions. The following two-column Adaptive Layout methods are commonly used:

.cell{    display: table-cell; width: 2000px;    *display: inline-block; *width:auto;}

 

[4] Tab

The overflow tab is mainly used for single-page applications.

<div class="box">    <ul class="show">        <li class="show-in" id="one">1</li>        <li class="show-in" id="two">2</li>        <li class="show-in" id="three">3</li>        <li class="show-in" id="four">4</li>    </ul>    <nav class="con">        <a class="con-in" href="#one">1</a>        <a class="con-in" href="#two">2</a>        <a class="con-in" href="#three">3</a>        <a class="con-in" href="#four">4</a>    </nav>    </div>    

body{    margin: 0;    text-align: center;}ul{    margin: 0;    padding: 0;    list-style: none;}a{    text-decoration: none;    color: inherit;}.show{    width: 100px;    height: 100px;    overflow: hidden;    border: 1px solid black;    line-height: 100px;    font-size: 40px;}    .show-in{    width: 100px;    height: 100px;}#one{    background-color: lightgreen;}#two{    background-color: lightyellow;}#three{    background-color: lightblue;}#four{    background-color: pink;}.con{    margin: 10px 0 0 10px;    width: 100px;}.con-in{    display:inline-block;    width: 16px;    line-height: 16px;    border: 1px solid black;    background-color: gray;}