css关于 overflow属性的一些小技巧

2024-01-17 13:57 小编
一:overflow基本属性
    overflow基本属性有:visibel,hidden,scroll,auto,inherit,overflow-x和overflow-y
    overflow-x和overflow-y设置一样的值,等同于overflow。如果不同,其中一个赋予visibel,auto,另一个赋值visibel,auto,hidden。则会被重置为auto。
    作用的前提
    1.非display:inline水平!
    2.对应方位的尺寸限制,width/height/max-width/max-height/absolute拉伸
    overflow:visibel妙用
    IE7浏览器下,文字越多,按钮两侧padding留白就越大。给所有按钮添加css样式overflow:visible
    二:overflow与滚动条
    滚动条出现的条件
    1.overflow:auto/overflow:scroll有些元素自带滚动条<html><textarea>
    body/html与滚动条
    无论什么浏览器,默认滚动条均来自html!而不是body标签
    ie8+html{overflow:auto}
    所以,如果我们想要去除页面默认滚动条,只需要:
    html{overflow:hidden}
    body/html与滚动条-js与滚动高度
    兼容写法
    varst=document.body.scrollTop||document.documentElement.scrollTop
    overflow的padding-bottom缺失现象
    .box{width:400px;height:100px;padding:100px0;overfow:auto;}
    在chrome浏览器下bottom是可以滚动出来的。
    滚动条的宽度
    盒子宽度(带滚动条)-盒子内宽度=滚动条宽度
    IEfirefoxchrome均是17像素。
    水平居中跳动问题
    修复方法
    1.html{overflow-y:scroll;}
    2..container{padding-left:calc(100vw-100%);}
    100vw-浏览器宽度;100%-可用内容宽度
    自定义滚动条-webkit
    整体部分::-webkit-scrollbar
    两端按钮::-webkit-scrollbar-button
    外层轨道::-webkit-scrollbar-track
    内层轨道::-webkit-scrollbar-track-piece
    滚动滑块::-webkit-scrollbar-thumb
    边角::-webkit-scrollbar-corner
    实际常用
    ::-webkit-scrollbar{//宽度width:8px;height:8px;}
    ::-webkit-scrollbar-thumb{//拖动条background-color:rgba(0,0,0,.3);border-radius:6px;}
    ::-webkit-scrollbar-track{//背景槽background-color:#ddd;border-radius:6px;}
    自定义滚动条-IE
    可以使用自定义滚动插件
    IOS原生滚动回调效果
    -webkit-overflow-scrolling:touch;
    三:overflow与BFC
    清除浮动,自适应布局等。
    BFCblockformattingcontext块级格式化上下文
    页面之结界,内部元素在怎么折腾都影响不到外面。
    overflow与BFC
    1.清除浮动影响
    2.避免margin穿透问题
    3.两栏自适应布局
    内部浮动无影响
    .clearfix{*zoom:1;}
    .clearfix:after{centent:'';display:table;clear:both;}
    避免margin穿透问题
    设置overflow:scroll,,overflow:auto,overflow:hidden
    为什么有这样特性?
    流体特性下自适应布局
    1.左浮动,右普通
    .left{float:left;width:128px;}
    .right{min-height:190px;background-color:#beceeb}
    2.左浮动,右margin
    .left{float:left;width:128px;}
    .right{min-height:190px;margin-left:150px;background-color:#beceeb}
    3.左浮动,右padding
    .left{float:left;width:128px;}
    .right{min-height:190px;padding-left:150px;background-color:#beceeb}
    4.左浮动
    .left{float:left;width:128px;}
    .right{min-height:190px;overflow:hidden;background-color:#beceeb}
    给div设置了overflow属性就是将元素BFC化,使用padding做流体自适应布局时候,万万不可让自适应层BFC化。
    是不是所有BFC属性都有如此表现
    yes.由于自身特性,具体表现不一
    overflow:hidden;自适应,单溢出不可见限制应用场景
    float+float包裹性+破坏性无法自适应,块状浮动布局
    position:absolute脱离文档流,自娱自乐
    display:inline-block包裹性,无法自适应
    display:table-cell包裹性,但天生无溢出特性,绝对宽度也能自适应。
    只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化
    两栏自适应布局
    .cell{
    display:table-cell;width:2000px;//2000保证比父元素大
    *display:inline-block;*width:auto;//IE7-伪BFC特性
    }
    四:overflow与绝对定位
    隐藏失效与滚动固定
    overflow:hidden失效
    .overflow-hidden{
    width:300px;
    height:200px;
    border:5pxsolid#333;
    overflow:auto
    }
    img{postion:absolute;}
    失效原因
    绝对定位元素不总被父级overflow属性剪裁,尤其当overflow在绝对定位元素及其包含块之间的时候
    包含块指“含position:relative/absolute/fixed”声明的父级元素,没有则body元素
    如何避免失效
    1.overflow元素自身成为包含块
    2.overflow元素的子元素成为包含块
    3.任意合法transform声明当作包含块
    overflow失效妙用
    h0{height:0;}
    .ovh{overflow:hidden;}
    .tr{text-align:right;}
    .abs{position:absolute;}
    <divclass="h0ovhtr">
    <imgsrc=""class="absml10mt30"></img>
    </div>
    五:依赖overflow的样式表现
    resize拉伸
    css3有个属性名为resize,可以拉伸元素尺寸。
    .resize:both水平垂直两边拉;
    .resize:horizontal只有水平方向拉伸
    resize:vertical只有垂直方向拉伸
    但是,此声明想要其作用,元素的overflow属性值不能是visible!
    <buttonstyle="resize:both;overflow:hidden">按钮</button>
    这样一个按钮就可以实现拉伸效果了。
    文本域自带resize属性,因为文本域默认overflow:auto
    文本域resize拖拽渔区大小是17*17像素。也就是滚动条的尺寸
    ellipsis文字溢出点点点省略
    text-overflow:ellipsis
    <buttonstyle="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden">
    这是一个按钮,宽度仅200像素
    </button>
    六:overflow与锚点技术
    锚点定位的本质:该变容器的滚动高度
    锚点对位的触发
    1.url地址中的锚链与锚点元素;
    2.可focus的锚点元素处于focus态;
    锚点定位的作用
    1.快速定位
    2.锚点定位与overflow选项卡技术

(⊙o⊙)嗯( ⊙ o ⊙ )是的额21

Tag: 技巧
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码