HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計(jì)（慕課版）（第2版） 課件 范玉玲 第4、5章 盒模型與網(wǎng)頁布局、CSS特效

第4章盒模型與網(wǎng)頁布局《HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計(jì)（第2版）》目錄/Contents4.1盒模型4.2浮動(dòng)與定位4.3布局策略盒模型4.1盒子模型盒子模型就是把HTML頁面中的元素視為一個(gè)矩形區(qū)域，即元素的盒子。盒子由margin（外邊距）、border（邊框）、padding（內(nèi)邊距）和content（內(nèi)容）4部分組成：盒子的各屬性空白區(qū)margin外邊緣邊框區(qū)border內(nèi)邊緣邊框邊椽內(nèi)容區(qū)content填充區(qū)padding填充邊椽其中內(nèi)邊緣和外邊緣并不會(huì)顯示在瀏覽器中盒子模型假如有一例，有一個(gè)標(biāo)題和一些文本。該例的HTML代碼如下（摘自世界人權(quán)宣言）：盒子模型通過添加一些顏色及字體信息，該例可以有以下顯示效果：這個(gè)例子包含了兩個(gè)元素：h1和p。這兩個(gè)元素的盒狀模型如下圖：盒子模型使用width和height屬性指定元素內(nèi)容區(qū)的寬和高這兩個(gè)屬性能應(yīng)用于塊級(jí)別和無文本的內(nèi)嵌元素，不能應(yīng)用于內(nèi)嵌文本（也叫不可替換的）元素屬性名稱：width屬性值：長度計(jì)量值|百分比值|auto屬性名稱：height屬性值：長度計(jì)量值|百分比值|auto單位：em、像素和百分比值是最常用的度量元素大小的方法內(nèi)容區(qū)contentwidthheight舉例(width-height)盒子模型—內(nèi)容區(qū)overflow屬性來指定如何處理內(nèi)容不適合的問題。屬性名稱：overflow屬性值：visible|hidden|scroll|auto默認(rèn)值：visible適用對(duì)象：塊級(jí)別元素和可替換的內(nèi)嵌元素(比如img)舉例(overflow)盒子模型—處理溢出盒子設(shè)置得太小，容不下內(nèi)容怎么辦？盒子模型--margin屬性描述margin簡寫屬性，在一個(gè)聲明中設(shè)置所有外邊距（上、右、下、左）margin-top設(shè)置元素的上外邊距margin-right設(shè)置元素的右外邊距margin-bottom設(shè)置元素的下外邊距margin-left設(shè)置元素的左外邊距margin相關(guān)的屬性CSS中主要使用margin屬性來控制元素邊界與網(wǎng)頁其他內(nèi)容的水平和垂直間距。距離可以為具體數(shù)字或百分比。舉例(margin)盒子模型--marginmargin設(shè)置外邊距：/*

設(shè)置上邊距為25px、右邊距為50px、下邊距為75px、左邊距為100px*/margin:25px50px75px100px;/*

設(shè)置上邊距為25px、左右邊距為50px、下邊距為75px*/margin:25px50px75px;/*

設(shè)置上下邊距為25px、左右邊距為50px*/margin:25px50px;/*

設(shè)置4個(gè)方向的邊距都為25px*/margin:25px;設(shè)置外邊距的書寫方式依次順時(shí)針應(yīng)用于上、右、下、左。盒子模型--padding屬性描述padding簡寫屬性，在一個(gè)聲明中設(shè)置所有內(nèi)邊距（上、右、下、左）padding-top設(shè)置元素的上內(nèi)邊距padding-right設(shè)置元素的右內(nèi)邊距padding-bottom設(shè)置元素的下內(nèi)邊距padding-left設(shè)置元素的左內(nèi)邊距padding相關(guān)的屬性CSS中主要使用padding屬性定義元素邊框與元素內(nèi)容之間的空間，即上下左右的內(nèi)邊距。舉例(padding)盒子模型各屬性四個(gè)方位margin清除周圍的（外邊框）元素區(qū)域。margin沒有背景顏色，是完全透明的。當(dāng)元素的padding（填充）內(nèi)邊距被清除時(shí)，所釋放的區(qū)域?qū)?huì)受到元素背景顏色的填充。盒子模型在網(wǎng)頁制作時(shí)，關(guān)于多個(gè)盒子之間需要注意的問題，具體如下。1、相鄰塊級(jí)元素的垂直外邊距合并：以上下相鄰的塊元素為例，如果上面的元素有下外邊距，下面的元素有上外邊距，則垂直邊距為兩者中的較大者。外邊距合并盒子模型在網(wǎng)頁制作時(shí)，關(guān)于多個(gè)盒子之間需要注意的問題，具體如下。2、嵌套塊級(jí)元素的垂直外邊距合并：如果父元素沒有上內(nèi)邊距和邊框，則父元素與子元素的上外邊距合并為較大者。外邊距合并盒子模型內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^將元素的margin和padding設(shè)置為零來覆蓋這些瀏覽器樣式。這可以分別進(jìn)行，也可以使用通用選擇器對(duì)所有元素進(jìn)行設(shè)置：*{

margin:0;

padding:0;

}舉例(默認(rèn)外邊距)（外邊距為0）盒子模型通常，塊元素的寬和高由瀏覽器自動(dòng)計(jì)算。它會(huì)跟瀏覽器窗口或其他塊元素容器一樣寬，高度正好容納內(nèi)容，也可以使用width和height屬性設(shè)置元素內(nèi)容區(qū)域?yàn)橐粋€(gè)特定值，em、像素和百分比值是最常用的度量元素大小的方法。注意：寬和高只應(yīng)用到內(nèi)容區(qū)域元素框的總寬度=2*填充+2*邊框+2*空白邊+寬度元素框的總高度=2*填充+2*邊框+2*空白邊+高度一般不指定元素的高度，允許其基于文本和其他內(nèi)容自動(dòng)計(jì)算，如果指定高度，請(qǐng)確?？紤]到內(nèi)容不適用的情況。盒子模型#box{width:70px;

margin:10px;

padding:5px;}假設(shè)框的每個(gè)邊上有10個(gè)像素的外邊距和5個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到100個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為70像素。盒子模型Div的高度？高度由內(nèi)容決定。元素的總高度和寬度包含內(nèi)邊距和邊框(padding與border)content-box

是默認(rèn)值。如果你設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來的元素寬度中。border-box

告訴瀏覽器：你想要設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說，如果你將一個(gè)元素的width設(shè)為100px，那么這100px會(huì)包含它的border和padding，內(nèi)容區(qū)的實(shí)際寬度是width減去(border+padding)的值。大多數(shù)情況下，這使得我們更容易地設(shè)定一個(gè)元素的寬高。box-sizing盒子模型浮動(dòng)與定位4.2CSS有三種基本的定位機(jī)制：普通流、浮動(dòng)和定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在(X)HTML中的位置決定。浮動(dòng)定位CSS布局模型中，文本元素依源碼中的順序從上到下排列，然后從左到右。塊元素一個(gè)累一個(gè)，填滿瀏覽器窗口或其他窗口元素的所有可用寬度。內(nèi)嵌元素和文本字符一行接一行的填滿塊元素。當(dāng)窗口或窗口元素重置大小的時(shí)候。塊元素隨著新寬度增大或縮小。內(nèi)嵌內(nèi)容重新流動(dòng)來適應(yīng)寬度。舉例(普通流)普通流浮動(dòng)定位屬性值描述left元素向左浮動(dòng)right元素向右浮動(dòng)none元素不浮動(dòng)（默認(rèn)值）float的常用屬性值CSS的浮動(dòng)和定位可以改變?cè)氐呐帕蟹绞?，使網(wǎng)頁內(nèi)容變得豐富多彩。CSS的浮動(dòng)可以通過float屬性進(jìn)行設(shè)置。舉例imgfloat浮動(dòng)浮動(dòng)定位當(dāng)把框1向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣舉例float2舉例float1浮動(dòng)浮動(dòng)定位當(dāng)框1向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。如果把所有三個(gè)框都向左移動(dòng)，那么框1向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。舉例float3浮動(dòng)浮動(dòng)定位如果包含框太窄，無法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”。舉例float4

float5

浮動(dòng)浮動(dòng)定位浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框。因此，創(chuàng)建浮動(dòng)框可以使文本圍繞圖像。舉例float6

float7

float8

浮動(dòng)浮動(dòng)定位clear屬性（清除浮動(dòng)）：阻止行框圍繞浮動(dòng)框，取消文本環(huán)繞，恢復(fù)平常布局,可通過元素下面開始排列的元素來完成。防止元素緊接著浮動(dòng)元素出現(xiàn)，并強(qiáng)制它從下一個(gè)可用的浮動(dòng)元素下面的空間開始。舉例float9

float10清除浮動(dòng)浮動(dòng)定位屬性值：left|right|both|none|inherit默認(rèn)值：none應(yīng)用對(duì)象：僅塊級(jí)元素舉例layoutcollapseCSS允許任何元素浮動(dòng)，不論是列表、段落還是圖像。無論元素先前是什么狀態(tài)，浮動(dòng)后都成為塊級(jí)元素，浮動(dòng)元素的寬度缺省為auto。浮動(dòng)元素的外邊緣不會(huì)超過其父元素的內(nèi)邊緣。如果一個(gè)浮動(dòng)元素在另一個(gè)浮動(dòng)元素之后顯示，而且會(huì)超出容納塊（沒有足夠的空間），則它下降到低于先前任何浮動(dòng)元素的位置，即換行顯示。浮動(dòng)特點(diǎn)浮動(dòng)浮動(dòng)定位屬性值描述static靜態(tài)定位（默認(rèn)定位方式）relative相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位absolute絕對(duì)定位，相當(dāng)于static定位以外的第一個(gè)上級(jí)元素進(jìn)行定位fixed固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位設(shè)置定位方式的常用屬性值position屬性可以讓網(wǎng)頁中的某個(gè)元素在網(wǎng)頁的特定位置出現(xiàn)，如彈出菜單。定位浮動(dòng)定位屬性值描述top頂端偏移量，定義元素相對(duì)于其參照元素上邊線的距離bottom底部偏移量，定義元素相對(duì)于其參照元素下邊線的距離left左側(cè)偏移量，定義元素相對(duì)于其參照元素左邊線的距離right右側(cè)偏移量，定義元素相對(duì)于其參照元素右邊線的距離設(shè)置元素具體位置的常用屬性值確定了定位方法后，真正要做的是指定四個(gè)偏移屬性。定位浮動(dòng)定位#box_relative{position:relative; left:30px;/*距左邊線30px*/top:20px;/*距頂部邊線20px*/}相對(duì)定位方式基本語法格式相對(duì)定位是相對(duì)于元素在流中的原始位置移動(dòng)；它將保留元素在普通流中占據(jù)的空間，并繼續(xù)影響周圍內(nèi)容的布局。說明：在使用相對(duì)定位時(shí)，無論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。舉例(relative)定位-相對(duì)定位浮動(dòng)定位絕對(duì)定位#box_absolute{position:absolute; left:30px; /*距左邊線30px*/top:20px;/*距頂部邊線20px*/}絕對(duì)定位方式基本語法格式絕對(duì)定位的元素從文檔流中完整的移除，并且相對(duì)于最近的容器塊定位它所占據(jù)的空間將被關(guān)閉。它對(duì)周圍元素的布局沒有任何影響。絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。舉例(absolute)層疊順序?qū)盈B是當(dāng)一個(gè)父元素中的多個(gè)子元素同時(shí)被定位時(shí)，定位元素之間有可能會(huì)發(fā)生：定位元素發(fā)生重疊舉例(zindex)層疊順序顯示器顯示的圖案是一個(gè)二維平面，使用x軸和y軸來表示位置屬性。二維平面z-index屬性表示Z軸的深度，它表示三維立體的概念，多個(gè)定位子元素的上下層的立體關(guān)系。用來控制定位元素在垂直于顯示屏方向（z軸）上的堆疊順序。三維空間舉例(zindex)層疊順序?qū)盈B發(fā)生時(shí)其覆蓋關(guān)系遵循：誰大誰上：值大的元素發(fā)生層疊時(shí)會(huì)在值小的元素上面，其取值可為正整數(shù)、負(fù)整數(shù)和0，默認(rèn)值為0。z-index值越大的元素越靠近用戶。后來居上：當(dāng)元素的層疊水平一致，層疊順序相同的時(shí)候，處于后面的元素會(huì)覆蓋前面的元素。舉例(zindex)布局策略4.3液態(tài)網(wǎng)頁：也稱流動(dòng)布局，在不同分辨率/瀏覽器屏幕寬度下，頁面內(nèi)容保持滿屏，就像液體一樣充滿了屏幕。固定網(wǎng)頁：將內(nèi)容放在一個(gè)保持指定元素寬的網(wǎng)頁區(qū)域內(nèi)，而不管瀏覽器的尺寸。彈性布局：這種布局模式可以為盒狀模型提供最大的靈活性。彈性盒子中的子元素能在各個(gè)方向上進(jìn)行布局，并且能以彈性尺寸來適應(yīng)顯示空間。布局策略液態(tài)布局，也稱流動(dòng)布局。特點(diǎn)：網(wǎng)頁區(qū)域和欄可變寬窄，從而填充瀏覽器窗口中的可用空間。文本允許按區(qū)域?qū)挾戎匦铝鲃?dòng)。如何創(chuàng)建液態(tài)布局通過指定百分比值寬度或不指定，來創(chuàng)建液態(tài)布局舉例(liquid1)(liquid2)液態(tài)布局優(yōu)勢劣勢不需要為具體的瀏覽器分辨率而設(shè)計(jì)。文本填滿窗口，從而避免了潛在、笨拙的空白空間。在大的瀏覽器中，行長太長且不適于閱讀。它們很難預(yù)計(jì)。在極端尺寸的瀏覽器中元素可能太開闊或太擁擠。液態(tài)布局優(yōu)劣比較固定布局：寬度固定在具體像素上選擇固定布局需要決定的兩件事：選擇網(wǎng)頁寬度：通?；谄胀g覽器分辨率，多數(shù)都設(shè)計(jì)為1024px，1280px。決定固定寬度布局將處于瀏覽器窗口的什么位置如何創(chuàng)建固定布局通過用像素單位指定width屬性值來創(chuàng)建固定寬度布局通常，將整個(gè)網(wǎng)頁內(nèi)容放到1個(gè)div元素中，并設(shè)置具體像素值；各欄元素的寬度也用像素值表示舉例(fixed1)(fixed2)(fixed3)(auto)固定布局優(yōu)勢劣勢布局可預(yù)計(jì)。對(duì)行長提供更好的控制。如果瀏覽器窗口比網(wǎng)頁窄，右邊的內(nèi)容將被隱藏。如果用戶調(diào)整字體尺寸，文本元素仍會(huì)重新流動(dòng)，所以不會(huì)保證布局完全保持不變。文本字體尺寸非常大時(shí)，行長將會(huì)短得難用。固定布局優(yōu)劣比較布局的傳統(tǒng)解決方案，基于盒狀模型，依賴

display屬性+

position屬性+

float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。flex布局將成為未來布局的首選方案。flex是FlexibleBox的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。舉例(flex1)彈性布局彈性布局彈性盒既不使用浮動(dòng)，也不會(huì)合并彈性盒容器與其內(nèi)容之間的外邊距，是一種非常靈活的布局方法，它可以輕松地創(chuàng)建響應(yīng)式網(wǎng)頁布局。彈性盒結(jié)構(gòu)iOSSafariAndroidBrowserIEOperaChromeFirefox7.0+4.4+11+12.1+21+22+彈性盒模型瀏覽器支持情況彈性布局彈性盒提供了一些常用的屬性，使用彈性盒場景如下：首先需要使用display屬性來指定外部父元素容器的類型為彈性盒容器；可以使用flex-flow屬性是來排列彈性子元素的排列方向。還可以利用屬性來設(shè)置子元素在主軸方向的排列方式。彈性布局display屬性display屬性取值：默認(rèn)值為inline，用于指定元素容器的類型，此元素會(huì)被顯示為一個(gè)內(nèi)聯(lián)元素，在元素前后沒有換行符；如果設(shè)置display的值為flex，則表示用于指定彈性盒的容器；如果設(shè)置display的值為none，則表示隱藏該元素。彈性布局任何一個(gè)容器都可以指定為Flex布局。彈性布局.box{

display:flex;

}.box{

display:inline-flex;

}.box{

display:-webkit-flex;/*webkit內(nèi)核的瀏覽器要加上-webkit前綴*/

display:flex;

}注意，設(shè)為flex布局以后，子元素的float、clear和vertical-align屬性將失效。舉例(flex1)采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱”容器”。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flexitem），簡稱”項(xiàng)目”。彈性布局容器默認(rèn)存在兩根軸：水平的主軸（mainaxis）和垂直的交叉軸（crossaxis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做mainstart，結(jié)束位置叫做mainend；交叉軸的開始位置叫做crossstart，結(jié)束位置叫做crossend。項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做mainsize，占據(jù)的交叉軸空間叫做crosssize。STEP01display屬性的應(yīng)用新建demo01.html文件，編寫HTML代碼。<body><divclass="box"><divclass="one">one</div><divclass="two">two</div><divclass="three">three</div></div></body>彈性布局demo01STEP02父容器div.box設(shè)為彈性盒容器在demo01.html文件中編寫CSS樣式代碼。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;}.boxdiv{background-color:white;border:1pxsolidgray;margin:2px;}</style>彈性盒容器彈性布局demo01彈性盒布局STEP03運(yùn)行程序在瀏覽器中查看demo01.html文件運(yùn)行效果。彈性布局彈性容器的屬性包括：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content彈性布局彈性布局-flex-directionflex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。舉例(flex-direction)默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義如果一條軸線排不下，如何換行。flex-wrap屬性不起作用的情況：如果元素不是彈性盒對(duì)象的元素。彈性布局-flex-wrap舉例(flex-wrap)彈性布局-flex-flowflex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為rownowrap。.box{

/*主軸方向是水平逆向，換行方式是從上到下*/ flex-flow:row-reversewrap;}舉例(flex-flow)STEP04修改div.box元素的樣式將剛才的demo01.html存為demo02.html，在demo02.html文件中編寫CSS樣式代碼。<styletype="text/css">.box{display:flex;background-color:#999;/*height:80px;*//*將高度注釋起來*/flex-flow:column;}/*原代碼

*/</style>彈性布局-flex-flowdemo02flex-flow取值為columnSTEP05運(yùn)行程序在瀏覽器中查看demo02.html文件運(yùn)行效果。彈性布局-flex-flowdemo02彈性布局-justify-contentjustify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。space-around彈性盒子元素會(huì)平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。space-between彈性盒子元素會(huì)平均地分布在行里，第一個(gè)元素的邊界與行的起始位置對(duì)齊，最后一個(gè)元素與行結(jié)束位置的邊距對(duì)齊舉例(justify-content)STEP06修改div.box元素的樣式將demo01繼續(xù)修改為demo03.html，在文件中編寫CSS樣式代碼。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;/*flex-flow:column;*/justify-content:space-between;}/*原代碼

*/</style>彈性布局-justify-contentdemo03justify-content取值space-betweenSTEP07運(yùn)行程序在瀏覽器中查看demo03.html文件運(yùn)行效果。彈性布局-justify-contentdemo03STEP08修改div.box元素的樣式保存demo03.html為demo04.html，文件中編寫CSS樣式代碼。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;/*flex-flow:column;*/justify-content:space-around;}/*原代碼

*/</style>彈性布局-justify-contentdemo04justify-content取值space-aroundSTEP09運(yùn)行程序在瀏覽器中查看demo04.html文件運(yùn)行效果。彈性布局-justify-contentdemo04彈性布局-align-itemsalign-items定義了項(xiàng)目在交叉軸上如何對(duì)齊。舉例(align-items)STEP10修改div.box元素的樣式在demo05.html文件中編寫CSS樣式代碼。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;/*justify-content:space-around;*/align-items:center;}/*原代碼

*/</style>彈性布局-align-itemsdemo05align-items取值centerSTEP11運(yùn)行程序在瀏覽器中查看demo05.html文件運(yùn)行效果。彈性布局-align-itemsdemo05STEP12修改div.box元素的樣式在demo06.html文件中編寫CSS樣式代碼。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;/*justify-content:space-around;*/align-items:flex-end;}/*原代碼

*/</style>彈性布局-align-itemsdemo06align-items取值flex-endSTEP13運(yùn)行程序在瀏覽器中查看demo06.html文件運(yùn)行效果。彈性布局-align-itemsdemo06彈性布局-align-contentalign-content用來設(shè)置多個(gè)元素組成的容器內(nèi)的對(duì)齊方式，其屬性定義了多根軸線的對(duì)齊方式。舉例(align-content)彈性布局-項(xiàng)目屬性彈性項(xiàng)目的屬性包括order、flex-grow、flex-shrink、flex-basis、flex彈性布局-order屬性order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。舉例orderSTEP14設(shè)置div.box容器中的子元素one、two、three的order值在demo07.html文件中編寫CSS樣式代碼。<style>.one{order:3;}.two{order:1;}.three{order:2;}</style>彈性布局-order屬性demo07給子元素設(shè)置order值STEP15運(yùn)行程序在瀏覽器中查看demo07.html文件運(yùn)行效果。彈性布局-order屬性demo07彈性布局-flex-grow屬性flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。舉例flex-grow如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。彈性布局-flex-grow屬性flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。舉例flex-grow.flex2{display:flex;width:600px;margin:0;padding:0;list-style:none;}.flex2li:nth-child(1){width:200px;}.flex2li:nth-child(2){flex-grow:1;width:50px;}.flex2li:nth-child(3){flex-grow:3;width:50px;}<ulclass="flex1"><li>項(xiàng)目1</li><li>項(xiàng)目2</li><li>項(xiàng)目3</li></ul>flex2容器的剩余空間寬度為600-200-50-50=300px。項(xiàng)目1：因?yàn)闆]有設(shè)置flex-grow，所以寬度依然為200px。項(xiàng)目2：50+(300/4×1)=125px。項(xiàng)目3：50+(300/4×3)=275px。彈性布局-flex-shrink屬性flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。舉例flex-shrink.flex2{display:flex;width:400px;margin:0;padding:0;list-style:none;}.flex2li{width:200px;}.flex2li:nth-child(3){flex-shrink:3;}剩余寬度為400-600=-200px，那么超出的200px需要被子項(xiàng)目消化。通過收縮因子，所以加權(quán)綜合可得200×1+200×1+200×3=1000px，那么項(xiàng)目1、項(xiàng)目2、項(xiàng)目3將被移除的溢出量如下所示。項(xiàng)目1：(200×1/1000)×200，即約等于40px。項(xiàng)目1的實(shí)際寬度為200-40=160px。項(xiàng)目2：(200×1/1000)×200，即約等于40px。項(xiàng)目2的實(shí)際寬度為200-40=160px。項(xiàng)目3：(200×3/1000)×200，即約等于120px。項(xiàng)目3的實(shí)際寬度為200-120=80px。彈性布局-flex-basis屬性flex-basis屬性用來設(shè)置元素的寬度。如果元素同時(shí)設(shè)置了width和flex-basis，那么flex-basis會(huì)覆蓋width的值。舉例題目二題目三第5章CSS特效《HTML5+CSS3+Bootstrap響應(yīng)式Web前端設(shè)計(jì)（第2版）》目錄/Contents5.1濾鏡5.2過渡5.3動(dòng)畫5.4轉(zhuǎn)換5.45.5項(xiàng)目濾鏡5.15.1濾鏡CSS3的濾鏡（filter）屬性提供了模糊和改變?cè)仡伾墓δ?，常用于調(diào)整圖像的渲染、背景或邊框顯示效果。多個(gè)濾鏡之間用空格隔開。

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();5.1濾鏡filter的屬性屬性值描述屬性值描述grayscale灰度opacity透明度sepia褐色brightness亮度saturate飽和度contrast對(duì)比度hue-rotate色相旋轉(zhuǎn)blur模糊invert反色drop-shadow陰影urlurl函數(shù)接收一個(gè)XML文件，該文件設(shè)置了一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)來指定一個(gè)具體的濾鏡元素。例如：filter:url(svg-url#element-id)#romance

{

-webkit-filter:

grayscale(100%);

/*Chrome,Safari,Opera*/

filter:

grayscale(100%);}舉例（filter-grayscale）灰度grayscale()grayscale()用于將圖像轉(zhuǎn)換為灰度圖像。grayscale()參數(shù)值為0～1的小數(shù)，也支持0%～100%百分比的形式。如果沒有任何參數(shù)值，默認(rèn)將以“100%”渲染。#romance{-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);}舉例（filter-blur）模糊blur()blur()用于給圖像設(shè)置高斯模糊。參數(shù)值設(shè)置為高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，因此值越大越模糊。#romance{-webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/filter:brightness(200%);}舉例（filter-brightness）brightness()用于調(diào)整圖像的亮度，默認(rèn)值為100%或者1。如果其值超過100%，就意味著圖片擁有更高的亮度。如果值是0%，圖像會(huì)全黑。值是100%，則圖像無變化。亮度brightness()#romance{-webkit-filter:contrast(500%);/*Chrome,Safari,Opera*/filter:contrast(500%);}舉例（filter-contrast）調(diào)整圖像的對(duì)比度。值是0%的話，圖像會(huì)全黑。值是100%，圖像不變。超過100％的值將提供更具對(duì)比度的結(jié)果。若沒有設(shè)置值，默認(rèn)是1。對(duì)比度contrast()drop-shadow()用于給圖像設(shè)置一個(gè)陰影效果。<offset-x><offset-y>（必選）：<offset-x>可設(shè)置水平方向的距離，負(fù)值會(huì)使陰影出現(xiàn)在元素的左邊；<offset-y>可設(shè)置垂直方向的距離，負(fù)值會(huì)使陰影出現(xiàn)在元素的上方。如果兩個(gè)值都是0,則陰影出現(xiàn)在元素正后方。<blur-radius>（可選）：值越大，越模糊，則陰影會(huì)變得更大更淡。不允許負(fù)值，若未設(shè)置，默認(rèn)值為0（陰影的邊界很銳利）。<spread-radius>（可選）：正值會(huì)使陰影擴(kuò)張或變大，負(fù)值會(huì)使陰影縮小。若未設(shè)置，默認(rèn)值為0（陰影會(huì)與元素一樣大?。?lt;color>（可選）：若未設(shè)置該屬性，顏色值將根據(jù)瀏覽器的默認(rèn)設(shè)置來進(jìn)行顯示。舉例（drop-shadow）#romance{ filter:drop-shadow(15px15px8px#222);}陰影drop-shadow()filter:drop-shadow(30px10px4px#4444dd);filter:drop-shadow(0-6mm4mmrgb(160,0,210));filter:drop-shadow(000.75remcrimson);舉例（drop-shadow）陰影drop-shadow()這個(gè)函數(shù)有點(diǎn)類似于box-shadow屬性。box-shadow屬性在元素的整個(gè)框后面創(chuàng)建一個(gè)矩形陰影，而drop-shadow()過濾器則是創(chuàng)建一個(gè)符合圖像本身形狀(alpha通道)的陰影。Tipdrop-shadow和box-shadow相似，都是實(shí)現(xiàn)投影效果,它們有什么區(qū)別呢？box-shadow陰影可以任意疊加，drop-shadow不能陰影疊加，但是它是真正意義上的投影！而box-shadow只是盒陰影而已。舉例（box-shadow3）（box-shadow4）（區(qū)別1）（區(qū)別2）陰影drop-shadow()#romance90{-webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90deg);}#romance180{-webkit-filter:hue-rotate(180deg);/*Chrome,Safari,Opera*/filter:hue-rotate(180deg);}#romance270{-webkit-filter:hue-rotate(270deg);/*Chrome,Safari,Opera*/filter:hue-rotate(270deg);}舉例（filter-hue-rotate）hue-rotate()設(shè)置圖像應(yīng)用色相旋轉(zhuǎn)。取值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值為0deg。該值沒有最大值，超過360deg時(shí)相當(dāng)于又繞一圈。色相旋轉(zhuǎn)hue-rotate()#romance{-webkit-filter:invert(100%);/*Chrome,Safari,Opera*/filter:invert(100%);}舉例（filter-invert）invert反色會(huì)把圖片變成底片的感覺值為100%是完全反轉(zhuǎn)值為0%則圖像無變化反相invert()#romance{-webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/filter:opacity(30%);}舉例（filter-opacity）透明度opacity()opacity()用于定義透明度，默認(rèn)值為1。值為0%則圖像完全透明，值為100%則圖像不透明。該函數(shù)與已有的opacity屬性相似。

.opacity{

opacity:0.5;

filter:alpha(opacity=50);

}所有瀏覽器都支持opacity屬性，IE8及更早的版本支持替代的filter屬性。filter:alpha(opacity=number)，number取值[0~100],0完全透明，100不透明。所以為兼容可寫為：透明度opacity()舉例（filter-opacity）#romance{-webkit-filter:saturate(300%);/*Chrome,Safari,Opera*/filter:saturate(300%);}舉例（filter-saturate）定義圖像飽和度。值為0%是完全不飽和，值為100%則圖像無變化。超過100%的值是允許的，表示具有更高的飽和度。默認(rèn)值為1。飽和度saturate()#romance{-webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/filter:sepia(100%);}舉例（filter-sepia）將圖像轉(zhuǎn)換為深褐色。參數(shù)值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。默認(rèn)值為0.褐色sepia()filter可以整合多個(gè)濾鏡，濾鏡之間可使用空格分隔開。#romance{-webkit-filter:grayscale(50%)sepia(50%);/*Chrome,Safari,Opera*/filter:grayscale(50%)sepia(50%);}舉例（filter）符合函數(shù)filter()順序是非常重要的(例如使用grayscale()后再使用sepia()將產(chǎn)生一個(gè)完整的灰度圖片)。Tip過渡5.2transition簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。transition-property規(guī)定應(yīng)用過渡的CSS屬性的名稱。transition-duration定義過渡效果花費(fèi)的時(shí)間。transition-timing-function規(guī)定過渡效果的時(shí)間曲線。transition-delay規(guī)定過渡效果何時(shí)開始。CSS3過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：1、指定要添加效果的CSS屬性。2、指定效果的持續(xù)時(shí)間。Transition過渡把鼠標(biāo)指針放到div元素上，其高度會(huì)從100px逐漸變?yōu)?00px。舉例（transition）div{width:100px;background:blue;

height:100px; transition:height2sease-in-out1s; -moz-transition:height2sease-in-out1s; -webkit-transition:height2sease-in-out1s; -o-transition:height2sease-in-out1s;}div:hover{height:300px;}Transition過渡div{width:100px;}div:hover{width:300px;transition:width2s;-moz-transition:width2s;-webkit-transition:width2s;-o-transition:width2s;}把鼠標(biāo)指針放到div元素上，其寬度會(huì)從100px逐漸變?yōu)?00px。Transition過渡舉例（transition）transition-property

屬性用于指定應(yīng)用過渡效果的CSS屬性的名稱?；菊Z法格式transition-property:none|all|property;屬性值描述none沒有屬性會(huì)獲得過渡效果。all所有屬性都將獲得過渡效果。property定義應(yīng)用過渡效果的CSS屬性名稱，多個(gè)名稱之間以逗號(hào)分隔。transition-property舉例(transition-property)transition-duration屬性用于定義過渡效果花費(fèi)的時(shí)間，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）?；菊Z法格式transition-duration:time;transition-duration舉例(transition-duration)transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認(rèn)值為“ease“?；菊Z法格式transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);舉例(transition-timing-function)transition-timing-functiontransition-timing-function屬性的取值屬性值描述linear指定以相同速度開始至結(jié)束的過渡效果，等同于cubic-bezier(0,0,1,1)）。ease指定以慢速開始，然后加快，最后慢慢結(jié)束的過渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-in指定以慢速開始，然后逐漸加快（淡入效果）的過渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-out指定以慢速結(jié)束（淡出效果）的過渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-out指定以慢速開始和結(jié)束的過渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在0~1之間。transition-timing-functiontransition-delay屬性規(guī)定過渡效果何時(shí)開始，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）。基本語法格式transition-delay:time;正數(shù):過渡動(dòng)作會(huì)延遲觸發(fā)。負(fù)數(shù)：過渡動(dòng)作會(huì)從該時(shí)間點(diǎn)開始，之前的動(dòng)作被截?cái)?。transition-delaytransition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個(gè)過渡屬性?；菊Z法格式transition：propertydurationtiming-functiondelay;使用transition屬性設(shè)置多個(gè)過渡效果時(shí)，它的各個(gè)參數(shù)必須按照順序進(jìn)行定義，不能顛倒。

例如：transition:border-radius5sease-in-out2s;transition無論是單個(gè)屬性還是簡寫屬性，使用時(shí)都可以實(shí)現(xiàn)多個(gè)過渡效果。如果使用transition簡寫屬性設(shè)置多種過渡效果，需要為每個(gè)過渡屬性集中指定所有的值，并且使用逗號(hào)進(jìn)行分隔。transition隨堂練習(xí)（2）過渡舉例1舉例21、實(shí)現(xiàn)從左側(cè)圖片到右側(cè)圖片的過渡變化，過渡效果延時(shí)1s發(fā)生。2、上面例子只有一個(gè)過渡效果，如何同時(shí)有多個(gè)過渡效果應(yīng)該怎么處理呢？下面例子同時(shí)采用過渡效果改變width、height、opacity的樣式。動(dòng)畫5.3Animation動(dòng)畫@keyframes規(guī)定動(dòng)畫。animation所有動(dòng)畫屬性的簡寫屬性，除了animation-play-state屬性。animation-name規(guī)定@keyframes動(dòng)畫的名稱。animation-duration規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。animation相關(guān)的屬性CSS3的屬性中有若干能夠?qū)崿F(xiàn)動(dòng)畫效果，通過設(shè)置其子屬性，可以創(chuàng)造如移動(dòng)、淡入淡出、改變顏色的效果。其子屬性及功能描述如表所示：舉例Animation動(dòng)畫animation-timing-function規(guī)定動(dòng)畫的速度曲線。animation-delay規(guī)定動(dòng)畫何時(shí)開始。animation-iteration-count規(guī)定動(dòng)畫被播放的次數(shù)。animation-direction規(guī)定動(dòng)畫是否在下一周期逆向地播放。animation-play-state規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。animation-fill-mode規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。animation相關(guān)的屬性舉例屬性值描述animationname必需。定義動(dòng)畫的名稱。keyframes-selector必需。動(dòng)畫時(shí)長的百分比。合法的值：0-100%from（與0%相同）to（與100%相同）css-styles必需。一個(gè)或多個(gè)合法的CSS樣式屬性。@keyframes規(guī)則基本語法格式@keyframes

animationname{keyframes-selector{css-styles;}}舉例使div元素勻速向下移動(dòng)：舉例（

animation-@keyframes-fromto，animation-@keyframes-%）div{animation:mymove5sinfinite;}@keyframesmymove{from{top:0px;}to{top:200px;}}@-moz-keyframesmymove/*Firefox*/{from{top:0px;}to{top:200px;}}@-webkit-keyframesmymove/*Safari和Chrome*/{from{top:0px;}to{top:200px;}}@-o-keyframesmymove/*Opera*/{from{top:0px;}to{top:200px;}}"from"和"to"等價(jià)于0%和100%。0%是動(dòng)畫的開始時(shí)間，100%動(dòng)畫的結(jié)束時(shí)間。@keyframes規(guī)則案例演示為@keyframes動(dòng)畫規(guī)定名稱值描述keyframename規(guī)定需要綁定到選擇器的keyframe的名稱。none規(guī)定無動(dòng)畫效果（可用于覆蓋來自級(jí)聯(lián)的動(dòng)畫）。animation-name基本語法格式animation-name:keyframename|none;定義動(dòng)畫完成一個(gè)周期所需要的時(shí)間，以秒或毫秒計(jì)。說明：必須明確規(guī)定animation-duration屬性，否則時(shí)長為0，就不會(huì)播放動(dòng)畫。舉例（animation-duration）值描述time規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間。默認(rèn)值是0，意味著沒有動(dòng)畫效果。animation-duration基本語法格式animation-duration:time;animation-timing-function規(guī)定動(dòng)畫的速度曲線。速度曲線定義動(dòng)畫在每一動(dòng)畫周期中執(zhí)行的節(jié)奏。速度曲線用于使變化更為平滑。舉例（

animation-timing-function）值描述linear動(dòng)畫從頭到尾的速度是相同的。ease默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。ease-in動(dòng)畫以低速開始。ease-out動(dòng)畫以低速結(jié)束。ease-in-out動(dòng)畫以低速開始和結(jié)束。cubic-bezier(n,n,n,n)在cubic-bezier（貝塞爾曲線）函數(shù)中自己的值?？赡艿闹凳菑?到1的數(shù)值。animation-timing-function基本語法格式animation-timing-function:value;隨堂練習(xí)（3）動(dòng)畫對(duì)比一下不同速度曲線的效果。演示示例：速度曲線animation-delay屬性定義動(dòng)畫何時(shí)開始。舉例（

animation-delay）animation-delay:-2s;/*W3C和Opera*/-moz-animation-delay:-2s;/*Firefox*/-webkit-animation-delay:-2s;/*Safari和Chrome*/animation-delay允許負(fù)值，-2s使動(dòng)畫馬上開始，但跳過前2秒進(jìn)入動(dòng)畫?；菊Z法格式animation-delay:time;animation-iteration-count屬性定義動(dòng)畫的播放次數(shù)值描述n定義動(dòng)畫播放次數(shù)的數(shù)值。infinite規(guī)定動(dòng)畫應(yīng)該無限次播放。animation-iteration-count基本語法格式animation-iteration-count:n|infinite;animation-direction屬性定義是否應(yīng)該輪流反向播放動(dòng)畫。如果animation-direction值是"alternate"，則動(dòng)畫會(huì)在奇數(shù)次數(shù)（1、3、5等等）正常播放，而在偶數(shù)次數(shù)（2、4、6等等）向后播放。注釋：如果把動(dòng)畫設(shè)置為只播放一次，則該屬性沒有效果。舉例（

animation-direction）animation-direction基本語法格式animation-direction:normal|alternate;animation-play-state屬性定義動(dòng)畫的狀態(tài)。舉例（

animation-play-state）Running表示運(yùn)動(dòng)Paused表示暫停animation-play-state基本語法格式animation-play-state:running|paused;舉例（animation-fill-mode）animation-fill-mode屬性定義動(dòng)畫結(jié)束后的狀態(tài)，none無forwards動(dòng)畫結(jié)束（to里面的所有樣式）時(shí)的狀態(tài)backwards動(dòng)畫開始（from里面的所有樣式）時(shí)的狀態(tài)both動(dòng)畫開始或者結(jié)束時(shí)的狀態(tài)。animation-fill-mode基本語法格式animation-fill-mode:none|forwards|backwards|both;animation屬性是一個(gè)簡寫屬性，用于在一個(gè)屬性中設(shè)置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六個(gè)動(dòng)畫屬性。注意：使用animation屬性時(shí)必須指定animation-name和animation-duration屬性，否則持續(xù)的時(shí)間為0，并且永遠(yuǎn)不會(huì)播放動(dòng)畫。完成animation練習(xí)animation基本語法格式animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;隨堂練習(xí)（4）動(dòng)畫實(shí)現(xiàn)動(dòng)畫，方塊從左上角開始左→右→下→左，順時(shí)針方向移動(dòng)。同時(shí)背景色不斷變化，red→yellow→blue→green→red。方向示意：→↑

↓←演示示例：動(dòng)畫轉(zhuǎn)換5.4轉(zhuǎn)換（transform）屬性用于元素的2D或3D轉(zhuǎn)換，這個(gè)屬性允許用戶對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、平移、傾斜等。這些效果在CSS3之前都需要依賴Flash或JavaScript才能完成?，F(xiàn)在，使用純CSS3就可以實(shí)現(xiàn)這些變形效果，而無須加載額外的文件，這樣極大地提高了網(wǎng)頁開發(fā)者的工作效率，提高了頁面的執(zhí)行速度。轉(zhuǎn)換transform屬性允許對(duì)元素應(yīng)用2D轉(zhuǎn)換，常見2D轉(zhuǎn)換：2D轉(zhuǎn)換平移傾斜縮放旋轉(zhuǎn)transform屬性的默認(rèn)值為none，適用于內(nèi)聯(lián)元素和塊元素r，表示不進(jìn)行變形。transform：none|transform-functionstansform-functions用于設(shè)置變形函數(shù)，可以是一個(gè)或多個(gè)變形函數(shù)列表。基本語法格式2D轉(zhuǎn)換2D轉(zhuǎn)換函數(shù)名描述參數(shù)說明rotate(angel)旋轉(zhuǎn)元素angel是度數(shù)值，代表旋轉(zhuǎn)角度skew(x-angel,y-angel)傾斜元素angel是度數(shù)值，代表傾斜角度skewX(angel)沿著x軸傾斜元素skewY(angel)沿著y軸傾斜元素2D轉(zhuǎn)換的常用函數(shù)2D轉(zhuǎn)換函數(shù)名描述參數(shù)說明scale(x,y)縮放元素，改變?cè)氐母叨群蛯挾却砜s放比例，取值包括正數(shù)、負(fù)數(shù)和小數(shù)scaleX(x)改變?cè)氐膶挾萻caleY(y)改變?cè)氐母叨?D轉(zhuǎn)換的常用函數(shù)2D轉(zhuǎn)換2D轉(zhuǎn)換的常用函數(shù)函數(shù)名描述參數(shù)說明translate(x,y)移動(dòng)元素對(duì)象，基于x和y坐標(biāo)重新定位元素元素移動(dòng)的數(shù)值，x代表左右方向，y代表上下方向，向左和向上使用負(fù)數(shù)，反之用正數(shù)translateX(x)沿著x軸移動(dòng)元素translateY(y)沿著y軸移動(dòng)元素matrix(n,n,n,n,n,n)2D轉(zhuǎn)換矩陣使用六個(gè)值的表示變形，所有變形的本質(zhì)都是由矩陣完成的舉例使用translate()函數(shù)能夠重新定義元素的坐標(biāo)，實(shí)現(xiàn)平移的效果。該函數(shù)包含兩個(gè)參數(shù)，分別用于定義X軸和Y軸的坐標(biāo)。x-value是元素在水平方向上向右移動(dòng)的距離；y-value是元素在垂直方向上向下移動(dòng)的距離。如果省略了第二個(gè)參數(shù)，則取默認(rèn)值0。當(dāng)值為負(fù)數(shù)時(shí)，表示反方向移動(dòng)元素。