巧妙使用"/>
overFlow的含义与巧妙使用
一、overFlow意义
overflow：容器（满的）溢出，它有以下取值：
1、visible（默认）溢出部分可见
2、hidden溢出部分隐藏
3、auto适当加入滚动条（当父元素高度固定，内容溢出，设置overflow: auto会出现滚动条）
overflow-x和overflow-y也有这三种取值，分别代表水平或者垂直方向溢出的处理
二、实现案例
1、默认展示
2、当鼠标悬浮在某一卷时，其他的内容隐藏，该卷展开，效果如下：
3、代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>金刚经</title><style type="text/css">#{ margin: 0px; padding: 0px;}section{ width: 800px;height: 460px;margin: auto;}article{ float: left;width:200px;height: 460px;overflow: hidden;}h3{ font-size: 16px;font-weight: bold;margin: 10px 50px;}p{ margin: 10px 50px;}.chapter_1 { background-color: #A3A3A3;}.chapter_2 { background-color: #81559d;}.chapter_3 { background-color: #54709d;}.chapter_4 { background-color: #4f9d89;}section:hover>article{overflow: hidden;width: 50px;}section>article:hover {width: 650px;}</style></head><body><section><article class="chapter_1"><h3>金刚经第一卷</h3><p>如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。</p></article><article class="chapter_2"><h3>金刚经第二卷</h3><p>如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。</p></article><article class="chapter_3"><h3>金刚经第三卷</h3><p>如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。</p></article><article class="chapter_4"><h3>金刚经第四卷</h3><p>如是我闻，一时，佛在舍卫国祗树给孤独园，与大比丘众千二百五十人俱。尔时，世尊食时，著衣持钵，入舍卫大城乞食。于其城中，次第乞已，还至本处。饭食讫，收衣钵，洗足已，敷座而坐。</p></article></section></body>
</html>
更多推荐
overFlow的含义与巧妙使用
发布评论