css中overflow属性的使用技巧有哪些

发布时间:2022-03-02 09:45:03 作者:小新
来源:亿速云 阅读:221

这篇文章给大家分享的是有关css中overflow属性的使用技巧有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

  一: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">

  &nbsp;<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选项卡技术

  应用场景:单页应用


css中overflow属性的使用技巧有哪些


感谢各位的阅读!关于“css中overflow属性的使用技巧有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. CSS中overflow属性如何使用
  2. 怎么使用css text-overflow属性

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css overflow

上一篇:perl和python怎么实现替换

下一篇:怎么用biopython将cds序列翻译成蛋白序列

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》