CSS深入理解之overflow

最新推荐文章于 2021-05-23 13:16:14 发布

小鲸鱼鱼

最新推荐文章于 2021-05-23 13:16:14 发布

阅读量393

点赞数 1

分类专栏：前端知识文章标签： CSS

本文链接：https://blog.csdn.net/qq_45174540/article/details/102892432

版权

前端知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

overflow基本属性

visible
hidden
auto
scroll
inherit

overflow作用前提

非display:inline水平
对应方位的尺寸限制
对于单元格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>

后记

这是前段时间学习的，我把它给整理出来了，我是在慕课网张鑫旭老师的教程里学习的，老师讲课特别逗很好懂！
继续学习~我的梦想是成为一个优秀的程序媛！！FIGHTING！！！

小鲸鱼鱼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS深入理解之overflow

overflow基本属性visiblehiddenautoscrollinheritoverflow作用前提非display:inline水平对应方位的尺寸限制对于单元格td等，还需要table为 table-layout:fixed如果overflow-x与overflow-y值相同则等同于overflow：visible overflow-x: scrol...
复制链接

扫一扫