CSS overflow 属性用于控制内容溢出元素框时显示的方式
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条
设置 overflow 达到溢出隐藏效果后，也会影响子项定位的效果，当子项定位在盒子外部，将也会随之隐藏
默认的overflow值为visible 会有内容溢出盒子的效果
<style>
.box{
height: 60px;
width: 100px;
background: #ccc;
font-size: 30px;
}
</style>
<body>
<div class="box">
全名制作人大家好，我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap，篮球
</div>
</body>
全名制作人大家好，我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap，篮球
设置overflow值为hidden后，隐藏溢出部分
<style>
.box{
height: 60px;
width: 100px;
background: #ccc;
font-size: 30px;
overflow:hidden;
}
</style>
<body>
<div class="box">
全名制作人大家好，我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap，篮球
</div>
</body>
不要滚动条，实现滚动的方法
//Chrome浏览器支持 清除滚动条
.demo::-webkit-scrollbar {
display: none;
}
//firefox加IE 10+支持 保证内容是可滚动的
.demo {
scrollbar-width: none;
/* firefox */
-ms-overflow-style: none;
/* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}