深⼊理解CSS溢出overflow
深⼊理解CSS溢出overflow
⼀、总结
⼀句话总结：overflow⽤于对溢出内容的处理。
1、overflow有哪5个常⽤参数，分别是什么意思？
visible | hidden | scroll | auto | inherit
visible 元素的内容在元素框之外也可见
auto 如果内容被剪裁，则浏览器会显⽰滚动条以便查看其余的内容
scroll 元素的内容会在元素框的边界处剪裁，但浏览器会显⽰滚动条以便查看其余的内容
hidden 元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见
⼆、深⼊理解CSS溢出overflow
前⾯的话
  当⼀个元素固定为某个特定⼤⼩，但内容在元素中放不下。此时就可以利⽤overflow属性来控制这种情况
定义
overflow溢出
  值: visible | hidden | scroll | auto | inherit
  初始值: visible
  应⽤于: 块级元素、替换元素、表单元格
  继承性: ⽆
  [注意]除了IE7-浏览器外，其他浏览器都不⽀持给table-cell元素设置overflow属性。firefox和IE11浏览器不⽀持给table-cell元素的设置100%⾼度的⼦元素设置overflow属性
测试内容
overflow-X | overflow-y
  overflow-x和overflow-y的属性原本是IE浏览器独⾃拓展的属性，后来被CSS3采⽤，并标准化。overflow-x主要⽤来定义对⽔平⽅向内
容溢出的剪切，⽽overflow-y主要⽤来定义对垂直⽅向内容溢出的剪切
  [注意]如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同，且其中⼀个值显式设置为visible或未设置默认为visible，⽽另外⼀个值是⾮visible的值。则visible值会被重置为auto
  值: visible | hidden | scroll | auto | inherit | no-display | no-content
  初始值: visible
  应⽤于: 块级元素、替换元素、表单元格
  继承性: ⽆
测试内容
属性
visible
  元素的内容在元素框之外也可见
  [注意1]IE6-浏览器中元素的包含块会延伸，使得可以包裹其超出的内容
.box{
height: 200px;
width: 200px;
background-color: lightgreen;
}
.in{
width: 300px;
height: 100px;
background-color: lightblue;
css去掉滚动条
}
<div class="box">
<div class="in"></div>
</div>
  左图为IE6-浏览器，右图为其他浏览器
  [注意2]IE7-浏览器的按钮(包括<button>和<input type="button">两种)存在bug，当按钮上的⽂字越多时，按钮两侧的padding就越⼤。通过设置overflow:visible就可解决该问题
  左图为默认情况，右图为设置overflow后的情况
auto
  如果内容被剪裁，则浏览器会显⽰滚动条以便查看其余的内容
  [注意]对于⼀般浏览器来说，<html>和<textarea>默认带有overflow:auto的属性。但IE7-浏览器则不同，默认存在纵向滚动条
//IE7-浏览器
html{overflow-y: scroll;}
//其他浏览器
html{overflow: auto;}
//去除页⾯默认滚动条
html{overflow: hidden;}
scroll
  元素的内容会在元素框的边界处剪裁，但浏览器会显⽰滚动条以便查看其余的内容
  [注意]firefox和IE8+浏览器在overflow:scroll或auto时，存在padding-bottom缺失现象
.box{
width: 100px;
height: 100px;
padding: 50px;
background-color: pink;
overflow:scroll;
}
.in{
width: 100px;
height: 200px;
background-color: lightgreen;
}
<div class="box">
<div class="in"></div>
</div>
  左图为chrome浏览器的情况，右图为firefox浏览器的情况
hidden
  元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见
no-display
  当内容溢出容器时不显⽰元素，类似于元素添加了display:none属性⼀样
no-content
  当内容溢出窗⼝时不显⽰内容，类似于元素添加了visibility: hidden属性⼀样
  [注意]no-display和no-content这两个属性⽬前没有浏览器⽀持
失效
  绝对定位元素不总是被⽗级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候
    [注意]由于固定定位是相对于视窗定位的，所以固定定位元素⽆法被其所有的⽗级元素overflow属性剪裁
测试⽂字
【解决办法】
【1】overflow元素⾃⾝为包含块
  给⽗级设置position:absolute或fixed或relative
测试⽂字【2】overflow 元素的⼦元素为包含块
  在绝对定位元素和overflow 元素之间增加⼀个元素并设置position:absolute 或fixed 或relative
<div style ="overflow:hidden;">
<div style ="position:relative">
<div style ="position:absolute">绝对定位元素</div >
</div >
</div >
应⽤
  当overflow 设置为
auto 或scroll 或hidden 时可以触发BFC ，使得overflow 可以实现⼀些相关应⽤。
【1】清除浮动影响
  [注意]IE6-浏览器使⽤overflow 这种⽅式并不能清除浮动，常⽤的消除浮动的⽅法是
.clear {
*zoom : 1;
}
.clear:after {
content : '';
display :
block ;
clear : both ;
}
【2】避免margin 穿透
  [注意]使⽤overflow属性只是避免margin穿透的很多⽅法中的⼀个，其他的⽅法还有BFC化、设置padding、设置border等【3】两栏⾃适应布局
  [注意]使⽤overflow属性的场景限制⽐较明显，常⽤的两栏⾃适应布局的⽅法:
.cell{
display: table-cell; width: 2000px;
*display: inline-block; *width:auto;
}
【4】选项卡
  overflow选项卡主要⽤于单页应⽤
<div class="box">
<ul class="show">
<li class="show-in" id="one">1</li>
<li class="show-in" id="two">2</li>
<li class="show-in" id="three">3</li>
<li class="show-in" id="four">4</li>
</ul>
<nav class="con">
<a class="con-in" href="#one">1</a>
<a class="con-in" href="#two">2</a>
<a class="con-in" href="#three">3</a>
<a class="con-in" href="#four">4</a>
</nav>
</div>
body{
margin: 0;
text-align: center;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
.show{
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
line-height: 100px;
font-size: 40px;
}
.show-in{
width: 100px;
height: 100px;
}
#one{
background-color: lightgreen;
}
#two{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。