资讯专栏INFORMATION COLUMN

可视化效果(Visual effects)

JowayYoung / 2941人阅读

摘要:一般地,一个块盒的内容都被限制在该盒的边内。这种盒并不一定会根据其祖先的属性裁剪。默认情况下,元素不会被裁剪。在闭合路径内的内容会显示,而路径外边的都会被剪掉著作权归作者所有。

Overflow and clipping

一般地,一个块盒的内容都被限制在该盒的content边内。某些情况下,一个盒可能会溢出,意味着它的部分内容或者全部内容位于该盒外部,例如:

一行无法拆分,导致行盒比块盒宽

一个块级盒对其包含块来说太宽了。当一个元素的width属性具有一个能让生成盒从包含块的边内溢出的值时,可能会发生这种情况

一个元素的高度超出了为其包含块显式指定的高度(即,包含块的高度由height属性决定,而不是由内容高度)

一个后代盒是绝对定位的,部分内容在该盒外部。这种盒并不一定会根据其祖先的overflow属性裁剪。特殊的,它们不会被介于自身和包含块之间的任意祖先的overflow裁剪

一个后代盒具有负margin,导致它的部分内容被定为在该盒外部

text-indent属性让一个行盒挂在该块盒的left或者right边上

出现溢出时,overflow属性指定了一个盒是否应该被裁剪到其padding边内,以及是否需要提供一种滚动机制来访问所有被裁剪掉的内容

Overflow

overflow各种属性值的表现

在本例中,overflow:visible默认,对溢出不作处理;overflow:hidden对溢出部分进行隐藏;overflow:scroll对右边以及下边做出滚动条处理,不管元素是否溢出;overflow:auto对溢出部分做滚动条处理;overflow:inherit应该从父元素继承overflow属性的值

css3新特性

css3中增加了overflow-x以及overflow-y分别代表水平方向和垂直方向的overflow,这两个属性是相同值时,等同于overflow的属性值;这两个值一个非overflow:visible,一个为overflow:visible时,overflow:visible的属性值会变为
overflow:auto

overflow起作用的前提:

display:inline水平

对应方位的尺寸限制.width/height/max-width/max-height/absolute拉伸

对于单元格td等,还需要tabletable-layout:fixed状态才行

对于ie7浏览器来说,使用overflow会有一些bug:

滚动条样式不同(这一条在win10中都一样)

宽度设定机制,对于子元素设置width:100%,ie7会按照父元素宽度计算,也就是400px,而子元素有垂直滚动条占据一部分空间,所以实际水平宽度不到400px,因此水平滚动条会出现
解决方法是去掉width:100%

.box{ width: 400px; height: 100px; overflow: auto; } .content{ width: 100%; height: 200px; background-color: #beceeb; }

ie7浏览器下,文字越多,按钮两侧padding留白就越大,这时,给按钮样式添加overflow:visiable就能解决

Overflow与滚动条 滚动条出现的条件

overflow:auto/overflow:scroll,html标签,textarea标签

子元素超出父元素限制

Body/Html与滚动条

在浏览器中,默认滚动条均来自而不是

原因:新建一个空白html,默认.5em margin,如果滚动条来自,则应该有边距,而不是靠着浏览器边缘

IE7-浏览器默认: html{ overflow-y:scroll}

IE8+浏览器默认: html{overflow:auto}

所以我们去除页面默认滚动条,只需要:

html{ overflow:hidden}

使用js获取滚动高度

Chrome浏览器是:document.body.scrollTop

其他浏览器: document.documentElement.scrollTop

为了兼容性建议使用: var st=document.documentElement.scrollTop||document.body.scrollTop

Overflow的padding-bottom缺失现象
 .box{
  width: 400px;
  height: 100px;
  padding: 100px 0;
  overflow: auto;
  border: 1px solid #000;
}

上面的代码在Chrome浏览器中会出现padding-bottom,而在其它浏览器中都不会出现,这样就导致出现不一样的scrollHeight

滚动条的宽度

准确说法应该是滚动栏的宽度.下面方法可以简单获得:

.box{
  width: 400px;
  overflow:scroll;
}
.in{
  *zoom:1;
}
var a = console.log (400-document.getElementsById("in").clientWidth);
Overflow:auto的潜在布局隐患

滚动条会占用容器尺寸,原本和谐的布局,滚动条出现后可能会错位或者出现水平滚动条,在实现这种布局时一般使用自适应布局或者预留合适宽度

水平居中跳动问题
.container{width:1150px;margin:0 auto}

这种使用水平居中的布局,因为滚动条会占用一部分空间,所以滚动的时候会跳动,向左偏移滚动条宽度

水平居中跳动问题的修复

1.html{overflow-y:scroll}

这个解决方案唯一缺点就是不美观,会出现滚动条

2..container{padding-left:calc(100vw-100%);}
100vw-浏览器宽度; 100%-可用内容宽度;这个解决方案需要IE9+支持

Overflow与BFC

overflow:visible可以触发BFC

清除浮动影响

避免margin穿透问题

两栏自适应布局

1.overflow内部float无影响,IE6是不支持的,所以才有了广为流传的清除浮动方法:

清除浮动方法

3.overflow与两栏自适应布局

使用overflow实现两栏自适应布局

还有一种广为流传的实现两栏自适应布局的方法,使用table-cell

table-cell实现两栏自适应布局

Overflow与absolute

隐藏失效与滚动固定

在上面的例子中,一旦子元素设置为absolute,父元素的overflow属性会失效

绝对定位元素不总是被父级overflow属性裁剪,尤其当overflow在绝对定位元素及其包含块之间的时候

如何避免失效

overflow元素自身为包含块

overflow元素的子元素为包含块

任意合法transform声明当作包含块

transform声明当作包含块

overflow元素自身transform

overflow子元素transform

避免失效例子

Overflow妙用

居中及边缘对齐定位

这里面的边缘对齐定位,使用的就是父元素overflow:hidden,子元素的 被隐藏,后面的图片设置position:absolute使overflow对于图片的作用失效,从而实现滚动条上下滚动的边缘定位效果

依赖overflow的样式表现

CSS3有个属性名为resize,可以拉伸元素尺寸:

resize:both水平垂直两边拉

resize:horizontal只有水平方向拉伸

resize:vertical只有垂直方向拉伸

但是,此声明起作用的前提是元素不是overflow:visible

一些依赖overflow的样式表现

例1中,我们给button使用了一个overflow:hidden以及resize:both,button可以水平垂直拉伸
例2是一个textarea,因为它默认overflow:auto,所以它默认就能拉伸
例3是我们给段落一个overflow:hidden以及text-overflow:ellipsis,就会在最后显示...(省略号)

Overflow与锚点技术

锚点与锚链

在这个例子中,通过#mm3(锚链)找到图片的id(锚点)来定位

锚点定位的本质就是:改变容器的滚动高度

需要满足的条件:

容器可滚动

锚点元素在容器内

锚点定位的触发

url地址中的锚链与锚点元素

可focus的锚点元素处于fcous态

锚点定位的作用

快速定位

锚点定位与overflow选项卡技术

overflow选项卡

在这个例子中,我们使用了锚点定位技术实现选项卡,并使用overflow:hidden隐藏溢出的选项卡

这种用法有一个不足之处,就是当我们在页面偏下位置时,当你切换选项卡的时候,它会定位到最外层的滚动条,体验很糟糕,所以一般用在单页场景

URL锚点HTML定位技术机制、应用与问题

无JavaScript纯CSS实现选项卡轮转切换效果

Clip&&clip-path Clip

裁剪区域(clipping region)定义了一个元素border box的哪一部分是可见的。默认情况下,元素不会被裁剪。然而,裁剪区域可以通过clip属性显式地设置

clip的剪切例子

使用clip裁剪必须是absolute或者fixed元素,本例中没有逗号分隔的是兼容IE6/7版本

rect(top,right,bottom,left);中的top,bottom是相对于盒子上边框边界的偏移,left,right是相对于盒子左边框边界的偏移

clip属性已经弃用,因为它的适用范围太小,只能用在绝对定位元素下,而且只能用于裁剪矩形,取而代之的是clip-path

Clip-path

clip-path,包括了一条闭合的矢量路径,它可以是CSS中定义的基础形状,也可以是包含了clipPath标签的SVG元素。在闭合路径内的内容会显示,而路径外边的都会被剪掉著作权归作者所有。

clip-path语法:

clip-path:  | [  ||  ] | none

where

 = 
 =  |  |  | 
 =  | fill-box | stroke-box | view-box

where

 = inset( {1,4} [ round  ]? )
 = circle( [  ]? [ at  ]? )
 = ellipse( [ {2} ]? [ at  ]? )
 = polygon( ? , [   ]# )
 =  | margin-box

where

 =  | 
 =  | closest-side | farthest-side
 = [[ left | center | right | top | bottom |  ] | [ left | center | right |  ] [ top | center | bottom |  ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]]
 = nonzero | evenodd
 = border-box | padding-box | content-box = border-box | padding-box | content-box

上面的语法表示的是:

clip-source会是一个剪切元素路径到一个SVG元素,这个元素可以是内部的或者外部的

basic-shape符合CSS Shapes specification定义的基础形状函数

geometry-box 可选项.如果同一起声明,它将为基础形状提供相应的参考盒子.通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被border-radius定义的剪切路径)

clip-path语法实例

css-masking-1
clip-path css-tricks
clip-path MDN
Introducing the CSS clip-path Property
打破盒子模式的限制,使用Clip-Path创建响应式图形

Visibility

visibility属性有两种用法:

取值为hidden时隐藏元素,并将其所占空间用空白占位

取值为collapse时隐藏表格的一行或一列

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112024.html

相关文章

  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    awesome23 评论0 收藏0
  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    antyiwei 评论0 收藏0
  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    KavenFan 评论0 收藏0
  • 深度学习调参入门,有哪些技巧?

    摘要:本文将分享一些自己关于深度学习模型调试技巧的总结思考以为主。不过以卷积神经网络为代表的深层神经网络一直被诟病,这对于模型在工业界的应用推广还是带来了一定的阻碍。 作者杨军,从事大规模机器学习系统研发及应用相关工作。本文将分享一些自己关于深度学习模型调试技巧的总结思考(以CNN为主)。最近因为一些需要,参与了一些CNN建模调参的工作,出于个人习性,我并不习惯于通过单纯的trial-and-er...

    Developer 评论0 收藏0

发表评论

0条评论

JowayYoung

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<