overflow（2）

最新推荐文章于 2021-08-31 00:17:34 发布

快乐的小小编

最新推荐文章于 2021-08-31 00:17:34 发布

阅读量2.5k

点赞数

分类专栏： html+css 文章标签： overflow

本文链接：https://blog.csdn.net/xiaobianjava/article/details/49021841

版权

html+css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>

快乐的小小编

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow（2）

9、内部浮动无影响 .clearFix{overflow: hidden; zoom: 1} .clear{zoom: 1} .clear:after{content: ''; display: table;clear: both}10、overflow 的两栏自适应布局设置左边浮动，右边overflow.left { float: left; width:
复制链接

扫一扫