CSS Learning Note Four

I. Overflow
1. Compatibility IE7 width:100% will appear scroll bar, to resolve the removal of width:100%
2.overflow:visible Magical
IE7 Browser, the more text, the button on both sides of the padding left white is bigger
Workaround add CSS styles to the elements used overflow:visible
3. The premise of functioning
3.1 Non-display:inline level
3.2 The dimension limit of the corresponding azimuth. Width/height/max-width/max-height/absolute stretching
3.3 for cell TD and so on, you also need the table to set the table-layout:fixed state.
4.body/html and scroll bars
No matter what browser, the default scroll bar is from ie7-browser default: Html{overflow-y:scroll;}
ie8+ and other browsers default: Html{overflow:auto;}
Remove the default scroll bar, just html{overflow:hidden;}

5body, HTML and scroll bar-js and scrolling height
5.1chrome browser: document.body.scrollTop;
5.2 Other browsers: Document.documentElement.scrollTop;
because it does not exist at the same time, the usual notation:
var st=document.body.scrolltop+document.documentelement.scrolltop;
should be:
var st= document.body.scrolltop| | Document.documentElement.scrollTop
6.overflow Padding-bottom missing phenomenon
such as. box{width:400px;height:100px;padding : 100px 0;overflow:auto;}
Causes: Different scrollheight (element content height) Chrome has values, other browsers do not have
7.overflow:auto potential layout pitfalls
ScrollBars will occupy the size of the container, the original harmonious layout, the scroll bar may appear after the dislocation.
8. Horizontal Center runout problem
. container{width:1150px;margin:0 AUO;}
Repair method: 1 kinds, html{overflow-y:scroll;} IE6,IE7
2 kinds. Container{padding-left:calc (100vw-100%)} 100VW is the width of the browser, 100%-the usable content width ie9+
9. Custom ScrollBar-webkit
Whole part
::-webkit-scrollbar
Both buttons
::-webkit-scrollbar-button
Outer track
::-webkit-scrollbar-track
Inner track
::-webkit-scrollbar-track-piece
Scroll slider
::-webkit-scrollbar-thumb
Corner
::-webkit-scrollbar-corner

10.overflow and BFC apply ie7+
10.1 to clear the floating effect
. Clearfix{*zoom:1;}
. Clearfix:after{content: ';d isplay:table;clear:both;}
10.2 Avoid margin penetration issues
10.3 Two-column adaptive layout
Img.left (left floating)
Div.right (background color) >img*2
11. Two column Adaptive layout
. cell{
display:table-cell;width:2000px;ie8+ BFC Attribute
*display:inline-block;*width:auto;ie7-pseudo-BFC attribute
}
12. Overflow failure
is the child element style of the package set absolute
13.overflow to avoid the invalidation method
13.1 Overflow element itself as a containing block;
<div style= "position: Relative "class=" Overflow-hide ",

</div>
13.2 Overflow element's child element is the containing block;
<div Class= "Overflow-hide",
<div style= "position:relative",

</div>
</div>
13.3 Any valid transformer declaration as a containing block; ie9+

14.resize stretching
CSS3 has a property named resize and can stretch the element size:
14.1 Resize:both horizontal vertical side pull;
14.2 Resize:horizontal only the horizontal direction pulls;
14.3 resize:vertical only vertical direction pull;
However, to work, the overflow attribute value of an element cannot be visible!
text-overflow:ellipsis text overflow dot point omitted. To function, the overflow attribute value of an element cannot be visible!

CSS Learning Note Four