阅读 1100

CSS深入理解之overflow

新手第一篇博客,整理一下最近学的css深入理解之overflow

overflow基本属性

  • visible
  • hidden
  • auto
  • scroll
  • inherit

overflow作用前提

  1. display:inline水平
  2. 对应方位的尺寸限制
  3. 对于单元格td等,还需要table为 table-layout:fixed

如果overflow-x与overflow-y值相同 则等同于overflow:visible

    overflow-x: scroll;
    overflow-y: scroll; 
    /* 等同于overflow:scroll */
复制代码

如果overflow-x与overflow-y值不同 其中一个是visible 另外一个是auto,scroll,hidden其中一个,则visible会被重置为auto

 /*  overflow-x overflow-y不同时 其中一个为visible 另一个为其他时 visible被重置为auto*/
    overflow-x: hidden;
    overflow-y: visible; 
复制代码

overflow与滚动条

  • 无论什么浏览器,默认滚动条均来自<html>标签 !而不是<body>标签
  • body标签默认有.5em的margin值 大约8px
  • IE7-浏览器默认 html{overflow-y: scroll;}
  • IE8+浏览器默认:html{overflow: auto;}
  • 如果要去掉页面默认滚动条,只需要 html{overflow: hidden;}
  • chrome浏览器滚动条宽度为17px

依赖overflow的样式表现

  • resize拉伸--按钮
 <!-- 按钮拉伸效果在有overflow效果下起作用,如果没有overflow按钮便没有拖拽区域 -->
    <button style="resize: both; overflow:hidden;">我是按钮</button>
复制代码

  • resize拉伸--文本域
<!-- 文本域默认overflow:auto 自带resize:both效果 -->
    <textarea>Hello,Cassie</textarea>
复制代码

发现:resize拖拽区域的大小是17px*17px 也就是滚动条的尺寸

overflow与锚点技术

锚点定位的本质:改变容器的滚动高度,使锚元素的上边缘和可滚动容器上边缘对齐

<div class="box1">
        <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="link">
        <a class="click" href="#one">1</a>
        <a class="click" href="#two">2</a>
        <a class="click" href="#three">3</a>
        <a class="click" href="#four">4</a>
复制代码

后记

第一次笔记整理结束,知识来源于慕课网张鑫旭老师的教程https://www.imooc.com/learn/256

继续学习!!

文章分类
前端
文章标签