overflow的属性学习

overflow的属性学习

学习原因是今天工作中发现使用overflow：hidden;和不使用该设置文字有些许的上下移动，至于为什么搞不清楚。

笔记来源 慕课网的张鑫旭的overflow课程

overflow的基本属性

1. visible(默认)
2. hidden
3. scroll
4. auto
5. inherit

overflow生效的条件

• display不为inline
• 对应方位属性的设定width/height/max-height/max-width

overflow-x overflow-y的简单了解

若overflow-x与overflow-y的值是相同的，则等同于对overflow进行复制，可以使用overflow简写
若overflow-x与overflow-y的值设置的不同，且其中一个属性值为visible或默认未设置，
另一个属性值为hidden scroll auto则visible的属性值将会被自动修改为auto

滚动条的千丝万缕

无论什么浏览器滚动条均来自与html而不是body。（那么写移动页面时出现两条滚动条是为什么）

滚动条会占用容器的宽度或高度
若出现水平居中跳动的问题，可以使用 html {overflow-y: scroll;}先将滚动条的位置占上即可

overflow不为visible的属性可以产生BFC的效果

作用：

1. 清除浮动的影响
2. 避免margin穿透的问题
3. 两栏自适应布局

新建的html空白页，body元素是有0.5em的margin值的

怪不得我写的一个手机页面联系width为100%时，老是不能够充满屏幕呢

未完待续