您的位置：首页 > 其它

overflow（2）

2015-10-10 12:54 274 查看

9、内部浮动无影响

.clearFix{overflow: hidden; zoom: 1}

.clear{zoom: 1}
.clear:after{content: ''; display: table;clear: both}

10、overflow 的两栏自适应布局

设置左边浮动，右边overflow

.left { float: left; width: 128px }

.right { min-height: 190px; overflow: hidden; }

11、绝对定位元素不总是被父级overflow属性剪裁，尤其是overflow 在绝对定位元素机器包含块之间的时候。

12、ellipsis 文字溢出点点点省略

text-overflow: ellipsis

13、overflow 与锚点，制作单页面应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;;
height: 300px;
border: 1px solid #ddd;
overflow: hidden;
}

.list{
text-align: center;
width: 300px;;
height: 300px;
font-size: 50px;
line-height: 300px;
}
#one{
background-color: #ff0043;

}
#two{
background-color: #00ff00;
}
#three{
background-color: #c06090;
}
#four{
background-color: #a069c3;
}

.an{
display: inline-block;
text-decoration: none;
color: #ffffff;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #cce2c1;
}
</style>
</head>
<body>
<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>

<div class="links">
<a class="an" href="#one">1</a>
<a class="an" href="#two">2</a>
<a class="an" href="#three">3</a>
<a class="an" href="#four">4</a>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： overflow

相关文章推荐

新的分享

章节导航