Great god Zhang Xin Xu mu class net CSS Series Tutorial study notes 03:overflow

Why is 03, because I just realized from today the output is also a very important part of the learning process, so from today, I will learn the new knowledge every day to record, warm and know new.

Reiterate, each article is my study of the day record, because I am small white, the level is limited, inevitably appear flaws, follow-up will be corrected in time. Welcome you to point out the mistake!!!

1, Let's take a look at the 5 basic properties of overflow：

1. Visible default value. The content is not trimmed and is rendered outside the element box.
2. Hidden content is trimmed, and the rest is not visible.
3. Scroll content is trimmed, but the browser displays scroll bars to see the rest of the content.
4. Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
5. Inherit specifies that the value of the overflow property should be inherited from the parent element.

1-1 overflow-x and overf-y simultaneous use of the problem

If the values of Overflow-x and overflow-y are the same, they are equivalent to overflow; if the values are different, one of them is given a visible value and the other is given a auto,hidden,scroll, where the visible is reset to auto.

the magical 1-2 of Overflow:visible

IE7 Browser, the more text, buttons on both sides of the padding left white is bigger!  

and the same content under IE8:  

Add CSS style overflow:visible to all buttons after the IE7 browser:

2, let's look at the relationship between the overflow and the scroll bar:

2-1, the scrollbar appears on the condition with the scroll bar of the label source.

1,overflow:auto or Overflow:scroll. 2, Grass can't hide Phoenix, diving trapped dragon.

2, no matter what browser, the default scroll bar is from the

Padding-bottom missing

In a non-Chrome browser. If the scrolling area writes up and down padding, then Padding-bottom is missing, which results in a different scrollheight (element content height).

Scroll bar causes layout problems

The scroll bar will occupy the width, so it is best to keep the width reserved enough.

The problem of horizontal center beating

The. container{width:1150px;margin:0 Auto} Container container will bounce around the page.

3, the relationship between overflow and BFC:

The 4 properties of 3-1,overflow trigger BFC in addition to the other 3 (auto scroll hidden) in the visible one.

3-2,overflow implementation of BFC Application: 1, clear floating effect. 2, avoid the problem of margin penetration and overlap. 3, bright blue adaptive layout.

3-2-1, a child element floats, causes the parent element to collapse highly. Adding the 3 overflow attributes mentioned above to the parent element triggers BFC so that the parent element is no longer affected by the floating child element.

3-2-3, using the two-column adaptive layout of float and overflow:

<style>        * {margin:0;padding:0;        }. Box{Margin-top:200px;Height:50px;Background-color:Pink;        }. Left{width:50px;Height:50px;Background-color:Deepskyblue;            /*Left box floating on left*/float: Left;        }. Right{            /*Box-sizing:border-box;*/            /*padding-left:50px;*/Height:50px;Background-color:orangered;            /*the box on the right is set Overflow:hidden*/Overflow:Hidden;        }  </style>

<Divclass= "box">    <Divclass= "Left">Left Fixed width</Div>    <Divclass= "Right">Right Width adaptive</Div></Div>

The tutorial mentions the two-column adaptive layout scheme:

4, the relationship between overflow and Position:absolute:

4-1-1, the parent element already has the Overflow:auto attribute, and adding the Position:absolute attribute to the IMG in the diagram will invalidate the scrollbar and the picture does not move with the scroll bar.

4-1-2, the parent element has the Overflow:hidden property, and then adds the Position:absolute attribute to the IMG, causing the picture to overflow.

4-1-3 causes the Overflow:hidden and scrollbars to fail:

4-1-4, the method of avoiding failure:

4, overflow with resize stretching:

4, overflow and Anchor Point technology:

This method applies only to single-page applications.

This article is I learned today a big overflow explanation of a little record, if you are also interested in the depth of the CSS, please be sure to Zhang Big blog to see. Finally, this article is written in a relatively hasty, follow-up will be supplemented by explanation.

Great god Zhang Xin Xu mu class net CSS Series Tutorial study notes 03:overflow