css样式中通过overflow属性来设置溢出隐藏，溢出隐藏指的是当内容溢出元素框时发生的操作，常用的设置值有visible，hidden， scroll和auto四种。
visible是overflow属性的默认值，内容溢出不会被修剪，在元素框外显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 300px;height: 100px;border: 1px black
             solid;  overflow: visible;}
    </style>
</head>
<body>
    <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站，
        全球领先的人工智能公司。2000年1月1日创立于中关村，
        公司创始人李彦宏拥有“超链分析”技术专利，
        使中国成为美国、俄罗斯、韩国之外，
        全球仅有的四个拥有独立搜索引擎核心技术的国家之一。
        基于对人工智能的多年布局与长期积累，
        百度在深度学习领域领先世界，
        并在2016年被《财富》杂志称为全球AI四巨头之一。</div>
</body>
</html>

超出元素框的范围，内容不做任何隐藏或修建操作。
hidden
可以看出堆溢出的内容进行裁剪，且修建的内容不会被显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box{width: 300px;height: 100px;border: 1px black solid;
        overflow: hidden;       
    }
    </style>
</head>
<body>
    <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站，
            全球领先的人工智能公司。2000年1月1日创立于中关村，
            公司创始人李彦宏拥有“超链分析”技术专利，
            使中国成为美国、俄罗斯、韩国之外，
            全球仅有的四个拥有独立搜索引擎核心技术的国家之一。
            基于对人工智能的多年布局与长期积累，
            百度在深度学习领域领先世界，
            并在2016年被《财富》杂志称为全球AI四巨头之一。</div>
</body>
</html>

scroll
可以对元素设置滚动条，当内容溢出时，可通过拖拽滚动条来查看溢出的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box{width: 300px;height: 100px;border: 1px black solid;
        overflow:scroll;}
    </style>
</head>
<body>
    <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站，
            全球领先的人工智能公司。2000年1月1日创立于中关村，
            公司创始人李彦宏拥有“超链分析”技术专利，
            使中国成为美国、俄罗斯、韩国之外，
            全球仅有的四个拥有独立搜索引擎核心技术的国家之一。
            基于对人工智能的多年布局与长期积累，
            百度在深度学习领域领先世界，
            并在2016年被《财富》杂志称为全球AI四巨头之一。</div>
</body>
</html>

这里要注意，当内容没有溢出时，也会自动添加滚动条样式。
auto
auto是自适应的意思，当内容没有溢出时不添加滚动条，当内容有溢出时再添加滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box{width: 300px;height: 100px;border: 1px black solid;
        overflow:auto;}
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站，
            全球领先的人工智能公司。2000年1月1日创立于中关村，
            公司创始人李彦宏拥有“超链分析”技术专利，
            使中国成为美国、俄罗斯、韩国之外，
            全球仅有的四个拥有独立搜索引擎核心技术的国家之一。
            基于对人工智能的多年布局与长期积累，
            百度在深度学习领域领先世界，
            并在2016年被《财富》杂志称为全球AI四巨头之一。</div>
</body>
</html>

如果只针对水平或垂直方向单独设置滚动条，可以通过overflow-x属性或overflow-y属性来针对某一个发向设置滚动条。
通过overflow-x属性或overflow-y属性针对某一个方向设置滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 300px;
        height: 100px;
        border: 1px black solid;
        overflow-y: scroll;}
    </style>
</head>
<body>
    <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站，
            全球领先的人工智能公司。2000年1月1日创立于中关村，
            公司创始人李彦宏拥有“超链分析”技术专利，
            使中国成为美国、俄罗斯、韩国之外，
            全球仅有的四个拥有独立搜索引擎核心技术的国家之一。
            基于对人工智能的多年布局与长期积累，
            百度在深度学习领域领先世界，
            并在2016年被《财富》杂志称为全球AI四巨头之一。</div>
</body>
</html>

透明度
对HTML标签进行透明度设置是网页开发中的常用方式。透明度设置分为opacity和rgba两种方式。
opacity
opacity值可以用来设置元素的透明度，opacity取值范围为0~1，0表示透明，1表示不透明，半透明可以设置为0.5。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box{width: 200px; height: 50px; background-color: cyan;
    opacity: 0.5;}
    </style>
</head>
<body>
    <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站，
            全球领先的人工智能公司。</div>
</body>
</html>

元素的背景颜色和内容都进行啦半透明的处理，但是有时只需背景半透明而内容无需半透明，可以采用第二种方式来实现。
rgba
rgba处设置背景颜色外还可以设置透明度。rgba取值范围也是0~1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box{width: 200px; height: 50px; background:rgb(255,0,0,0.5);
    opacity: 0.5;}
    </style>
</head>
<body>
    <div id="box">百度——全球最大的中文搜索引擎及最大的中文网站，
            全球领先的人工智能公司。</div>
</body>
</html>

当设置rgba值时，背景颜色成半透明，而女人不透明，如果想让内容透明，可针对color属性再次设置rgba。这种方法比较灵活。