可視化效果(Visual effects)

時間 2019-12-05

標籤可視化效果 visual effects 简体版

原文原文鏈接

Overflow and clipping

通常地，一個塊盒的內容都被限制在該盒的content邊內。某些狀況下，一個盒可能會溢出，意味着它的部份內容或者所有內容位於該盒外部，例如：javascript

一行沒法拆分，致使行盒比塊盒寬css
一個塊級盒對其包含塊來講太寬了。當一個元素的width屬性具備一個能讓生成盒從包含塊的邊內溢出的值時，可能會發生這種狀況html
一個元素的高度超出了爲其包含塊顯式指定的高度（即，包含塊的高度由height屬性決定，而不是由內容高度）java
一個後代盒是絕對定位的，部份內容在該盒外部。這種盒並不必定會根據其祖先的overflow屬性裁剪。特殊的，它們不會被介於自身和包含塊之間的任意祖先的overflow裁剪css3
一個後代盒具備負margin，致使它的部份內容被定爲在該盒外部segmentfault
text-indent屬性讓一個行盒掛在該塊盒的left或者right邊上瀏覽器

出現溢出時，overflow屬性指定了一個盒是否應該被裁剪到其padding邊內，以及是否須要提供一種滾動機制來訪問全部被裁剪掉的內容ide

Overflow

overflow各類屬性值的表現wordpress

在本例中,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等,還須要table爲table-layout:fixed狀態才行

對於ie7瀏覽器來講,使用overflow會有一些bug:

滾動條樣式不一樣(這一條在win10中都同樣)
寬度設定機制,對於子元素設置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與滾動條

滾動條出現的條件

overflow:auto/overflow:scroll,html標籤,textarea標籤
子元素超出父元素限制

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

清除浮動影響
避免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與錨點技術

錨點與錨鏈

在這個例子中,經過<a>的#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: <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建立響應式圖形