【学习笔记】CSS深入理解之overflow

Ali_ 发布于2019-08-30 15:54 / 1450人阅读

摘要：张鑫旭的深入理解之学习笔记基本属性属性介绍默认当与值相同时，等同于当与值不相同时，其中一个值被赋予时，若另一个值为，那这个会被重置为作用前提元素非对应方位的尺寸限制拉伸对于单元格等需要为状态才可以与滚动条页面默认滚动条来自与无

《张鑫旭的CSS深入理解之overflow》学习笔记

overflow基本属性 overflow属性介绍

overflow: visible(默认)|hidden|scroll|auto|inherit

当overflow-x 与 overflow-y值相同时，等同于overflow

当overflow-x 与 overflow-y值不相同时，其中一个值被赋予hidden|auto|scroll时，若另一个值为visible，
那这个visvible会被重置为auto

https://codepen.io/curlywater...

overflow作用前提

元素非 display: inline
对应方位的尺寸限制: width/height/max-width/max-height/absolute拉伸
对于单元格等, 需要 table 为 table-layout: fixed 状态才可以

overflow与滚动条

页面默认滚动条来自html（与body无关），因此若要去除默认滚动条，只需要

html {
    overflow: hidden;
}

获取滚动高度

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
/* chrome浏览器：document.body.scrollTop */
/* 其他浏览器：document.documentElement.scrollTop*/

内部padding-bottom缺失

除Chrome之外的其他浏览器会有padding-bottom缺失效果，将导致scrollHeight值不一致

滚动条宽度机制

滚动条会占用容器的可用宽度|高度

计算滚动条宽度：containerWidth - boxWidth

因宽度占用，overflow: auto可能会造成容器内部局部混乱，因此容器内部需使用自适应布局

水平居中跳动问题，容器定宽居中时，当视口高度变化导致滚动条出现将导致容器跳动。

解决方法：

针对IE9以下浏览器，强制设置html滚动

其他浏览器，利用calc函数计算滚动条宽度（浏览器宽度 - 可用内容区宽度），通过padding把宽度补给容器 - 效果演示

自定义滚动条

webkit自定义滚动条，详细解读

自定义滚动条插件

malihu-custom-scrollbar-plugin - 支持IE8+，扩展性极佳

antiscroll - cross-browser native OS X Lion scrollbars

iOS原生滚动回调

-webkit-overflow-scrolling: touch;

overflow与BFC

overflow: visible不会产生BFC

overflow: hidden|scroll|auto 产生BFC，但是具有溢出不可见的副作用

overflow与绝对定位

overflow失效：绝对定位元素不总是被overflow元素剪裁/随滚动条滚动，尤其当overflow元素处于绝对定位元素和其包含块中间时

避免失效的方法：

overflow元素自身为包含块

overflow元素的子元素为包含块

overflow元素的子元素有transform声明

依赖overflow的样式表现

在overflow为visible时，resize属性将会失效

text-overflow: ellipsis以overflow: hidden为前提

overflow与锚点技术

锚点技术的实质时容器改变滚动高度

云服务器 GPU云服务器深入理解webrtc之aec 如何深入理解深度学习深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117045.html

【学习笔记】CSS深入理解之relative

摘要：张鑫旭的深入理解之对绝对定位元素的限制限制定位限制层次限制，原本对绝对定位元素无效，容器设置的情况下生效的定位特性相对于自身无侵入，不会对其他元素的布局产生影响与与同时存在时，忽视的层叠特性可以提高层叠上下文为具体数值时，限制内部绝对定位张鑫旭的CSS深入理解之relative relative对绝对定位元素的限制限制定位限制层次限制overflow，overflow原本对绝...

nanfeiyan 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之border

摘要：张鑫旭的深入理解之学习笔记不支持百分比，原因是边框本身具有宽度固定的意义，不同设备的边框不会因设备宽度而等比改变。可以利用该特性实现图标变色的效果与定位不计算区域，只限于以内的盒子。张鑫旭的CSS深入理解之border学习笔记 border-width border-width不支持百分比，原因是边框本身具有宽度固定的意义，不同设备的边框不会因设备宽度而等比改变。因此从语义上来说，...

he_xd 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之z-index

摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。张鑫旭的CSS深入理解之z-index学习笔记层叠上下文什么是层叠上下文？在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。如何产生层叠上下文？根元素具有根层叠上下文 z-index不为auto的定位元素一个 z-index 值不为 ...

Steven 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之vertical-align

摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值百分...

ermaoL 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之float

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。张鑫旭的CSS深入理解之float浮动学习笔记 float的历史 float为产生文字环绕效果而生 float的特性 — 包裹和破坏包裹：即产生一个BFC破坏：使父容器...

denson 2019-08-29 17:31 评论0 收藏0