可视化效果(Visual effects)

头像
人丑就要多读书_
    阅读 6 分钟

    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起作用的前提:

    1. 非display:inline水平

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

    3. 对于单元格td等,还需要table为table-layout:fixed状态才行

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

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

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

      <div class="box">
  <div class="content">
  </div>
</div>

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

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

    Overflow与滚动条

    滚动条出现的条件

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

    2. 子元素超出父元素限制

    Body/Html与滚动条

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

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

    • 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;
}
<div class="box">
  <div class="in" id="in">
  </div>
</div>
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

    1. 清除浮动影响

    2. 避免margin穿透问题

    3. 两栏自适应布局

    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,子元素的&nbsp;被隐藏,后面的图片设置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与锚点技术

    锚点与锚链

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

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

    需要满足的条件:

    1. 容器可滚动

    2. 锚点元素在容器内

    动态图来演示一下

    锚点定位的触发

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

    2. 可focus的锚点元素处于fcous态

    锚点定位的作用

    1. 快速定位

    2. 锚点定位与overflow选项卡技术

    overflow选项卡

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

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

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

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

    Clip&&clip-path

    Clip

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

    clip的剪切例子

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

    这张图片解释了clip的语法

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

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

    Clip-path

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

    clip-path语法:

    clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

    where

    <clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

    where

    <inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

    where

    <length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box = border-box | padding-box | content-box

    上面的语法表示的是:

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

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

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

    clip-path语法实例

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

    Visibility

    visibility属性有两种用法:

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

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

    css
    人丑就要多读书_
    197 声望17 粉丝
    « 上一篇
    z-index
    下一篇 »
    给自己的Fonts教程

    引用和评论

    推荐阅读
    头像
    浏览器工作原理

    人丑就要多读书_赞 1阅读 2.1k

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.4k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 938

    头像
    CSS炫酷光晕按钮特效

    南城FE赞 3阅读 858

    0 条评论
    得票最新