overflow Introduction
Define : overflow attribute specifies when it overflowed its block-level container, whether the content clip, scroll bar or display content rendering.
Property Value
overflow:visible //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden //内容会被修剪。超出内容被隐藏
overflow:scroll //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 overflow:inherit //规定从该父元素继承overflow属性的值 Note: No versions of Internet Explorer (including IE8) support the property value "inherit".
When the overflow is set to a value other than the default value (visible) outside, will create a will 块级式化上下文(to clear a way floating), you can view more in-depth understanding of BFC and Margin Collapse
Small tips
When the line of text for the portion of the process beyond what properties may be used. (Width to be set while the value of the element, as well as overflow:hidden;and white-space:nowrap;)
text-overflow:clip //修剪文本。
text-overflow:ellipsis //显示省略符号来代表被修剪的文本。
text-overflow:string //使用给定的字符串来代表被修剪的文本。
For multiple lines of text you need to use non-standard properties -webkit-line-clamp, do not go into detail here. Click here Reference
Horizontal and vertical scroll bars
use overflow-xand overflow-ymay be disposed separately and the horizontal scroll bar in the vertical direction.
Custom scrollbars achieve
This section webkit browser for the kernel, use pseudo-classes to change the default style scroll bar, as follows:
scroll bar part
:: - webkit-scrollbar integral part of the scroll bar :: - webkit-scrollbar-thumb scroll bar inside the small box, can be moved upward downward (leftward or rightward movement) :: - webkit-scrollbar-track Track scrollbar (which is equipped with Thumb) :: - at both ends of the track buttons webkit-scrollbar-button scroll bar, due to the location by clicking the small box of fine-tuning. :: - webkit-scrollbar-track- piece inner orbit scroll bar intermediate portion :: - webkit-scrollbar-corner edges, i.e., where the vertical scroll bar and a horizontal scroll bar intersecting :: - webkit-resizer two scrollbars drag the resized element for widgets on the intersection
Scroll bar composition structure is as follows:
(This section for webkit browser kernel, use pseudo-classes to change the default scroll bar style)
IE scrollbar style
| Scroll bar style | Support for | Supported browser version | You can inherit | description |
|---|---|---|---|---|
| scrollbar-3dlight-color | Specific IE | IE5.5 + | Y | Setting the color of the scroll box and the upper left edge of the scroll bar arrows |
| scrollbar-highlight-color | Specific IE | IE5.5 + | Y | Setting the color of the scroll box and the upper left edge of the scroll bar arrows |
| scrollbar-face-color | Specific IE | IE5.5 + | Y | Setting the scroll box and a scroll bar arrows color |
| scrollbar-arrow-color | Specific IE | IE5.5 + | Y | Set the color of the scroll bar arrows |
| scrollbar-shadow-color | Specific IE | IE5.5 + | Y | Setting the color of the scroll box and the lower right edge of the scroll bar arrows |
| scrollbar-dark-shadow-color | Specific IE | IE5.5 + | Y | Set the color of the scroll bar groove |
| scrollbar-base-color | Specific IE | IE5.5 + | Y | Is provided to the color of the scroll bar portion of the main |
| scrollbar-track-color | Specific IE | IE5.5 + | Y | Set the scroll bar track part of the color |
Firefox scrollbar changes
http://bbs.kafan.cn/thread-1529981-1-1.html