In this chapter, we will bring you some tips on the overflow attribute, which have certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1: Overflow basic attributes
The basic overflow attributes are: visibel, hidden, scroll, auto, inherit, overflow-x and overflow-y
Set overflow-x and overflow-y to the same value, which is equivalent to overflow. If they are different, one of them is assigned visibel, auto, and the other is assigned visibel, auto, hidden. will be reset to auto.
Prerequisites for the function 1. Non-display: inline level!
2. Dimensions of the corresponding orientation, width/height/max-width/max-height/absolute stretchoverflow: Visibel
# Under the IE7 browser, the more text there is, the larger the padding space on both sides of the button will be. Add css style overflow to all buttons: visible
2: overflow and scroll barConditions for the scroll bar to appear
1.overflow: auto/overflow:scroll Some elements have their own scroll bars
body/html and scroll barsNo matter what you browse The default scroll bars are all from html! instead of the body tag
ie8+ html{overflow:auto}
So, if we want to remove the default scroll bar from the page, we only need:
html{overflow:hidden}
body/html and scrollbar-js Compatible with scroll height
Writing
var st = document.body.scrollTop || document.documentElement.scrollTop overflow的padding-bottom缺失现象 .box{width:400px;height:100px;padding:100px 0; overfow:auto;}
Bottom can be scrolled out in the chrome browser.
Scroll bar widthBox width (with scroll bar)-box width = scroll bar width
IE firefox chrome is 17 pixels .
Horizontal center jumping problem修复方法
1.html{overflow-y:scroll;}
2. .container{padding-left:calc(100vw-100%);}
整体部分 ::-webkit-scrollbar
两端按钮 ::-webkit-scrollbar-button
外层轨道 ::-webkit-scrollbar-track
内层轨道 ::-webkit-scrollbar-track-piece
滚动滑块 ::-webkit-scrollbar-thumb
边角 ::-webkit-scrollbar-corner
实际常用
::-webkit-scrollbar{//宽度 width:8px; height:8px; }
::-webkit-scrollbar-thumb{//拖动条 background-color:rgba(0,0,0,.3); border-radius : 6px; }
::-webkit-scrollbar-track{//背景槽 background-color:#ddd; border-radius:6px; }
You can use a custom scroll plug-in
IOS native scroll callback effect
-webkit-overflow-scrolling:touch;
Clear float, adaptive layout, etc.
BFC block formatting context Block-level formatting context
The enchantment of the page, no matter how the internal elements are tossed, they will not affect the outside.
overflow and BFC1. Clear the floating effect
2. Avoid margin penetration problem
3. Two columns automatically Adapt to layout
Internal floating has no effect
.clearfix{*zoom:1;} .clearfix:after{centent:'';display:table;clear:both;}
Avoid margin penetration problem
Set overflow:scroll, overflow:auto, overflow:hidden
Why does it have this feature?Adaptive layout under fluid characteristics
1. Left floating, right normal
.left{float:left;width:128px;} .right{min-height:190px;background-color:#beceeb}
2. Left floating, right margin
.left{float:left;width:128px;} .right{min-height:190px;margin-left:150px;background-color:#beceeb}
3 .Left float, right padding
.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 the div is to BFC the element. When using padding for fluid adaptive layout, you must not let it Adaptation layer BFC.
Do all BFC attributes behave like this?
yes. Due to its own characteristics, the specific performance varies
overflow:hidden; 自适应,单溢出不可见 限制应用场景 float + float 包裹性+破坏性 无法自适应,块状浮动布局 position:absolute 脱离文档流,自娱自乐 display:inline-block 包裹性,无法自适应 display:table-cell 包裹性,但天生无溢出特性,绝对宽度也能自适应。 只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化
Two column adaptive layout
.cell{ display:table-cell; width:2000px; //2000保证比父元素大 *display:inline-block;*width:auto; //IE7-伪BFC特性 }
Four: overflow and absolute positioning
Hidden failure and scroll fixation
overflow:hidden failure.overflow-hidden{
width:300px;
height:200px;
border:5px solid #333;
overflow:auto
}
img{postion:absolute;}
The containing block refers to the parent element declared with "position:relative/absolute/fixed". Without it, the body element
How to avoid invalidation
2. The child elements of the overflow element become a containing block
3. Any legal transform statement is treated as a containing block
The magical effect of overflow failure
h0{height:0;} .ovh{overflow:hidden;} .tr{text-align:right;} .abs{position:absolute;} <div class="h0 ovh tr"> <img src="" class="abs ml10 mt30"></img> </div>
resize stretching
css3 has a property called resize, which can stretch the size of elements.
.resize:both Stretch horizontally and vertically;
.resize:horizontal Stretch only in the horizontal direction
resize:vertical Stretch only in the vertical direction
However, for this declaration to work, the element's overflow attribute value cannot be visible!
<button style="resize:both;overflow:hidden">按钮</button>
Such a button can achieve the stretching effect.
The text field has its own resize attribute, because the text field defaults to overflow: auto
The size of the text field resize drag fishing area is 17*17 pixels. That is, the size of the scroll bar
ellipsis text overflows and is omitted
text-overflow:ellipsis <button style="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden"> 这是一个按钮,宽度仅200像素 </button>
Anchor point positioning The essence: the scroll height of the variable container
Triggering of anchor point alignment
1. Anchor chain and anchor element in url address;
2. The focusable anchor element is in focus;
The role of anchor positioning
1. Quick positioning
2. Anchor positioning and overflow tab technology
Application scenario: single page application
The above is the detailed content of Some tips about overflow attribute in css, introduction to overflow attribute. For more information, please follow other related articles on the PHP Chinese website!