css可滚动视图区域

要实现一个简单的可滚动视图区域 pel.png

代码如下：

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

要实现可滚动的视图区域首先要知道overflow属性的几个值的特性：

• visible----默认值。内容不会被修剪，会呈现在元素框之外
• hidden----内容会被修剪，并且其余内容是不可见的
• scroll----内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
• auto----如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
• inherit----规定应该从父元素继承 overflow 属性的值
  以横向滚动区域为例

        .box{
            width: 350px;
            height: 200px;
            margin: 20px auto;
            border:1px solid #000;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;//注意设置不可换行
        }
        .box div{
            width: 150px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: pink;
            display: inline-block;//把子元素设置成行内块元素
        }