Some tips about overflow attribute in css, introduction to overflow attribute

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 stretch

overflow: 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 bar

Conditions for the scroll bar to appear

1.overflow: auto/overflow:scroll Some elements have their own scroll bars100db36a723c770d327fc0aef2ce13b1 4750256ae76b6b9d804861d8f69e79d3

body/html and scroll bars

No 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 width

Box 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%);}

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

Custom scroll bar-webkit

 整体部分 ::-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; }

Custom scroll bar-IE

You can use a custom scroll plug-in

IOS native scroll callback effect

-webkit-overflow-scrolling:touch;

Three : overflow and BFC

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 BFC

1. 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;}

Reason for failure

Absolutely positioned elements are not always clipped by the parent overflow attribute, especially when the overflow is between the absolutely positioned element and its containing block

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

How to avoid invalidation

1.The overflow element itself becomes a containing block

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>

5: Rely on the style expression of overflow

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>

6: overflow and anchor point technology

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!