CSS深入理解之overflow新手第一篇博客，整理一下最近学的css深入理解之overflowoverflow基本属性

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

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>

后记

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

继续学习！！