03css3第一天-課件css3基礎(chǔ)一

新·模式l

同時(shí)采用最合理的TS教學(xué)模式和最合理教學(xué)時(shí)間安排.l

全程手把學(xué)、邊學(xué)邊練，

7*12小時(shí)答疑指導(dǎo)，保證學(xué)員即學(xué)即會(huì)。薪·未來l

無限互聯(lián)學(xué)生畢業(yè)平均薪資12755元，比 業(yè)機(jī)構(gòu)平均高出12%。l

98%的無限互聯(lián)學(xué)生在畢業(yè)4周內(nèi)成功就業(yè)！信·機(jī)構(gòu)l

慧科教育 旗下泛IT職業(yè)教育培訓(xùn)機(jī)構(gòu)。l

與找座兒形成國內(nèi)第一家O2O混合式教學(xué)

。l

良心教學(xué)，

賴大機(jī)構(gòu)！心·服務(wù)l

多年教學(xué)經(jīng)驗(yàn)資深講師傾心教學(xué)l

配備專門的生活導(dǎo)師，提供入學(xué)接送、精選宿舍、生活指導(dǎo)、學(xué)習(xí)督促等一條龍服務(wù)。l

提供專業(yè)就業(yè)指導(dǎo)服務(wù)，簡(jiǎn)歷指導(dǎo)+模擬面試，保證快速就業(yè)。走進(jìn)無限互聯(lián)本章知識(shí)點(diǎn)CSS3介紹及新特性預(yù)覽CSS3新增選擇器CSS3新增文本屬性、顏色表示法CSS3新增邊框?qū)傩訡SS3新增背景屬性、顏色漸變CSS3新增盒子屬性、用戶界面屬性一、CSS3介紹CSS的概念CSS引入CSS3的概念CSS3的新特性預(yù)覽CSS的概念CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（Cascading

Stylesheet）可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式CSS的引入的三種方式外部引入：style

：內(nèi)聯(lián)：CSS的引入CSS3的概念CSS3是CSS2的升級(jí)版本，3只是版本號(hào)，它在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能。目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經(jīng)支持了CSS3大部分功能了，IE10以后也開始全面支持CSS3了。在編寫CSS3樣式時(shí)，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分，是瀏覽器的私有屬性，雖然目前

較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容前綴還是少不了的前綴瀏覽器-webkitChrome

和Safari-mozFirefox-msIE-oOperaCSS3新特性預(yù)覽CSS3新特性預(yù)覽強(qiáng)大的CSS選擇器新的顏色制式和透明設(shè)定多欄布局的實(shí)現(xiàn)多背景圖效果文字陰影效果開放的網(wǎng)絡(luò)字體類型圓角邊框背景盒子陰影二、CSS3新增選擇器關(guān)系選擇器屬性選擇器結(jié)構(gòu)性偽類選擇器UI元素狀態(tài)偽類選擇器偽對(duì)象選擇器關(guān)系選擇器兄弟選擇符E~F：選擇E元素所有兄弟元素F屬性選擇器

在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎(chǔ)上對(duì)屬性選擇器進(jìn)行了擴(kuò)展，新增了3個(gè)屬性選擇器，使得屬性選擇器有了通配符的概念屬性選擇器功能描述E[att^="val"]選擇匹配元素E，且E元素定義了屬性att，其屬性值以val開頭的任何字符串E[att$="val"]選擇匹配元素E，且E元素定義了屬性att，其屬性值以val結(jié)尾的任何字符串E[att*="val"]選擇匹配元素E，且E元素定義了屬性att，其屬性任意位置包含了val，換句話說，字符串與屬性值中的任意位置相匹配結(jié)構(gòu)性偽類選擇器選擇符功能描述E:not(s)匹配除某個(gè)元

外的所有元素E:root匹配E元素在文檔的根元素。E:last-child匹配父元素的最后一個(gè)子元素E。E:only-child匹配父元素僅有的一個(gè)子元素E。E:nth-child(n)匹配父元素的第n個(gè)子元素E。E:nth-last-child(n)匹配父元素的倒數(shù)第n個(gè)子元素E。E:

-of-type匹配同類型中的第一個(gè)同級(jí)兄弟元素E。E:last-of-type匹配同類型中的最后一個(gè)同級(jí)兄弟元素E。E:only-of-type匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E。E:nth-of-type(n)匹配同類型中的第n個(gè)同級(jí)兄弟元素E。E:nth-last-of-type(n)匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E。E:empty匹配沒有任何子元素（包括text節(jié)點(diǎn)）的元素E。UI元素狀態(tài)偽類選擇器UI元素狀態(tài)偽類選擇器選擇符功能描述E:checked匹配用戶界面上處于選中狀態(tài)的元素E。(用于inputtype為radio與checkbox時(shí))E:enabled匹配用戶界面上處于可用狀態(tài)的元素E。E:disabled匹配用戶界面上處于禁用狀態(tài)的元素E。偽對(duì)象選擇器偽對(duì)象選擇器選擇符功能描述E:-letter/E::-letter設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式。E:-line/E::-line設(shè)置對(duì)象內(nèi)的第一行的樣式。E:before/E::before設(shè)置在對(duì)象前（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用E:after/E::after設(shè)置在對(duì)象后（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用E::selection設(shè)置對(duì)象被選擇時(shí)的顏色。練1、將CSS3所有新增的選擇器在不同的瀏覽器全部驗(yàn)證一遍三、CSS3新增屬性CSS3新增文本屬性CSS3新增顏色表示法CSS3新增文本屬性屬性描述hanging-punctuation規(guī)定標(biāo)點(diǎn)字符是否位于線框之外punctuation-trim規(guī)定是否對(duì)標(biāo)點(diǎn)字符進(jìn)行修剪text-align-last設(shè)置如何對(duì)齊最后一行或緊挨著強(qiáng)制換行符之前的行text-emphasis向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色text-justify規(guī)定當(dāng)text-align設(shè)置為"justify"時(shí)所使用的對(duì)齊方法text-outline規(guī)定文本的輪廓text-overflow規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情text-shadow向文本添加陰影text-wrap規(guī)定文本的換行規(guī)則word-break規(guī)定非 韓文本的換行規(guī)則word-wrap允許對(duì)長(zhǎng)的不可分割的單詞進(jìn)行分割并換行到下一行注：黑色字體屬性，目前主流瀏覽器都不支持CSS3新增文本屬性屬性描述text-decoration-line檢索或設(shè)置對(duì)象中的文本裝飾線條的位置text-decoration-color檢索或設(shè)置對(duì)象中的文本裝飾線條的顏色。text-decoration-style檢索或設(shè)置對(duì)象中的文本裝飾線條的形狀。text-fill-color設(shè)置或檢索對(duì)象中的文字填充顏色text-stroke復(fù)合屬性。設(shè)置或檢索對(duì)象中的文字的描邊text-stroke-width設(shè)置或檢索對(duì)象中的文字的描邊厚度text-stroke-color設(shè)置或檢索對(duì)象中的文字的描邊顏色注：黑色字體屬性，目前主流瀏覽器都不支持橙色字體屬性，需要使用瀏覽器私有前綴作用：規(guī)定當(dāng)

text-align被設(shè)置為text-align時(shí)的齊行方法文本屬性-text-justify值描述auto瀏覽器決定齊行算法。none禁用齊行inter-word增加/減少單詞間的間隔inter-ideograph用表意文本來排齊內(nèi)容inter-cluster只對(duì)不包含 單詞間隔的內(nèi)容（比如亞洲語系）進(jìn)行排齊distribute類似報(bào)紙版面，除了在東亞語系中最后一行是不齊行的kashida通過拉伸字符來排齊內(nèi)容文本屬性-text-overflow作用：規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情使用：值描述clip修剪文本ellipsis顯示省略符號(hào)來表示被修剪的文本string使用給定的字符串來代表被修剪的文本文本屬性-text-shadow作用：設(shè)置文本的陰影效果默認(rèn)為none使用：值描述h-shadow必需，水平陰影的位置。允許負(fù)值。v-shadow必需，垂直陰影的位置。允許負(fù)值blur可選，模糊的距離color可選，陰影的顏文本屬性-word-break作用：規(guī)定自動(dòng)換行的處理方法使用：值描述normal使用瀏覽器默認(rèn)的換行規(guī)則break-all允許在單詞內(nèi)換行keep-all只能在半角空格或連字符處換行文本屬性-word-wrap作用：規(guī)定自動(dòng)換行的處理方法使用：值描述normal只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理)break-word在長(zhǎng)單詞或

URL

地址

進(jìn)行換行文本屬性-加私有前綴Text-fill-color：作用：指定文本填充顏色取值：顏色Text-stroke:作用：設(shè)置文本邊框顏色取值：text-stroke-widthtext-stroke-color設(shè)置或檢索對(duì)象中的文字的描邊厚度設(shè)置或檢索對(duì)象中的文字的描邊顏色Color

Name:

red優(yōu)點(diǎn):

方便

,使用方便簡(jiǎn)單缺點(diǎn):

數(shù)量少,不支持設(shè)置HEX方式:#FFFFFF優(yōu)點(diǎn):

顏色種類多缺點(diǎn):

換算復(fù)雜,需要借助工具測(cè)量RGB方式:rgb（255，0，0）優(yōu)點(diǎn):

支持的顏色種類多,使用方便缺點(diǎn):

換算復(fù)雜,需要借助工具測(cè)量CSS顏色表示法復(fù)習(xí)CSS3顏色表示法CSS1

&&

CSS2Color

name顏色名稱方式HEX方式

十六進(jìn)制RGB方式

三原色配色方式CSS3RGBA模式HSL模式HSLA模式的使用,A是Alpha透RGBA方式:這種方式與RGB方式相同,只是在基礎(chǔ)上新增了明度語

則:

rgba(R,G,B,A);取值規(guī)范:R:0~255整數(shù)或百分?jǐn)?shù)G:0~255整數(shù)或百分?jǐn)?shù)B:0~255整數(shù)或百分?jǐn)?shù)A:0~1小數(shù)舉例:rgba(255,255,0,0.5);CSS3新增顏色表示法HSL方式(色輪記法):語

則:

HSL(H,S,L);取值規(guī)范:H(色調(diào)):

取值范圍0~360

0或360表示紅色藍(lán)色S(飽和度):

取值為：0.0%

-100.0%

所謂的飽和度，指的其實(shí)是色彩的純度，純度越高，表現(xiàn)越鮮明，純度較低，表現(xiàn)則較黯L(亮度):

取值為0.0%~100.0%舉例:HSL(120,100%,100%);120表示綠色

240表示CSS3新增顏色表示法HSLA方式(色輪記法):與HSL方式是相同的只是多了語

則:

HSL(H,S,L,A);取值規(guī)范:H(色調(diào)):

取值范圍0~360

0或360表示紅色藍(lán)色120表示綠色

240表示S(飽和度):

取值為：0.0%

-100.0%L(亮度):

取值為0.0%~100.0%A(

):

小數(shù)舉例:HSL(120,100%,100%,0.5);CSS3新增顏色表示法CSS3顏色表示法transparent：特殊顏色值，表示透明色，可以直接當(dāng)做顏色使用使用：color：transparent（設(shè)置字體顏色為透明）opacity：設(shè)置元素的使用：

opacity：0.1（取值0~1）filter：alpha（opacity=50）

取值0-100（IE）四、CSS3新增屬性CSS3

新增邊框?qū)傩?

邊框CSS3新增邊框?qū)傩?圓角邊框CSS3新增邊框?qū)傩?邊框陰影CSS3新增邊框?qū)傩詫傩怨δ苊枋鯾order-image設(shè)置或檢索對(duì)象的邊框使用圖像來填充border-image-source設(shè)置或檢索對(duì)象的邊框是否用圖像定義樣式或圖像來源路徑border-image-slice設(shè)置或檢索對(duì)象的邊框背景圖的分割方式border-image-width設(shè)置或檢索對(duì)象的邊框厚度border-image-outset設(shè)置或檢索對(duì)象的邊框背景圖的擴(kuò)展border-image-repeat設(shè)置或檢索對(duì)象的邊框圖像的平鋪方式border-radius設(shè)置或檢索對(duì)象使用圓角邊框border-top-left-radius設(shè)置或檢索對(duì)象左上角圓角邊框border-top-right-radius設(shè)置或檢索對(duì)象右上角圓角邊框border-bottom-right-radius設(shè)置或檢索對(duì)象右下角圓角邊框border-bottom-left-radius設(shè)置或檢索對(duì)象左下角圓角邊框box-shadow設(shè)置或檢索對(duì)象陰影box-reflect設(shè)置或檢索對(duì)象的倒影CSS3

新增邊框?qū)傩?

邊框CSS3中新增的邊框?qū)傩?，使border具備寬度、顏色和風(fēng)格屬性外，還具備背景

屬性語法格式border-image-source

：none/url(border-image-slice：分割方法border-image-width：邊框?qū)挾萣order-image-outset：擴(kuò)展方式border-image-repeat：重復(fù)方式地址);CSS3

新增邊框?qū)傩?

邊框border-image-source作用：設(shè)置或檢索對(duì)象的邊框樣式使用圖像路徑對(duì)應(yīng)

特性：borderImageSource取值：none：無背景

，顯示border-style所定義的邊框樣式效果url：使用絕對(duì)或相對(duì)地址指定圖像CSS3

新增邊框?qū)傩?

邊框border-image-slice：該屬性規(guī)定圖像的上、右、下、左側(cè)邊緣的向內(nèi)偏移，圖像被分割為九個(gè)區(qū)域：四個(gè)角、四條邊以及一個(gè)中間區(qū)域。除非使用了

fill，否則中間的圖像部分會(huì)被丟棄。如果省略第四個(gè)數(shù)值/百分比，則與第二個(gè)值相同。如果省略第三個(gè)值，則與第一個(gè)值相同。如果省略第二個(gè)值，則與第一個(gè)值相同取值：number：數(shù)字值，代表圖像中像素（如果是光柵圖像）或矢量坐標(biāo)（如果是矢量圖像）%：

相對(duì)于圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移fill：

保留邊框圖像的中間部分CSS3

新增邊框?qū)傩?

邊框border-image-width作用：用于指定使用多厚的邊框來承載被裁剪后的圖像對(duì)應(yīng)

特性：borderImageWidth取值：%/浮點(diǎn)數(shù)/長(zhǎng)度值

不允許有負(fù)值auto：如果auto值被設(shè)置，則border-image-width采用與border-image-slice相同的值CSS3

新增邊框?qū)傩?

邊框border-image-outset作用：用于指定邊框圖像向外擴(kuò)展所定義的數(shù)值，即如果值為10px，則圖像在原本的基礎(chǔ)上往外延展10px再顯示對(duì)應(yīng)

特性：borderImageOutset取值：長(zhǎng)度值/浮點(diǎn)數(shù)

不能為負(fù)數(shù)border-image-outset：10px；CSS3

新增邊框?qū)傩?

邊框border-image-repeat作用：用于指定邊框背景圖的填充方式?？啥x0-2個(gè)參數(shù)值，即水平和垂直方向。如果2個(gè)值相同，可合并成1個(gè)，表示水平和垂直方向都用相同的方式填充邊框背景圖；如果2個(gè)值都為stretch，則可省略不寫對(duì)應(yīng)

特性：borderImageRepeat取值：stretch：拉伸方式填充邊框背景圖repeat：中心為原點(diǎn)以平鋪方式填充，超出部分截?cái)鄏ound：平鋪方式填充，為了不出現(xiàn)截?cái)嗟?/p>

，會(huì)適當(dāng)調(diào)整

的大少，保證

完整顯示space：平鋪方式填充，為了不出現(xiàn)截?cái)嗟?/p>

，會(huì)適當(dāng)調(diào)整

間的間隔，保證

完整顯示CSS3新增邊框?qū)傩?圓角邊框border-radius：設(shè)置或檢索對(duì)象使用圓角邊框取值：border-radius：參數(shù)1/參數(shù)2（提供兩個(gè)參數(shù)，以‘/’分隔），參數(shù)1設(shè)置水平半徑，參數(shù)2設(shè)置垂直半徑，設(shè)置一個(gè)則兩個(gè)默認(rèn)相同參數(shù)1和參數(shù)2也可設(shè)置1~4個(gè)參數(shù)：垂直半徑下右10px水平半徑下右10pxCSS3新增邊框?qū)傩?圓角邊框border-radius四個(gè)角分開設(shè)置CSS3新增邊框?qū)傩?邊框陰影box-shadow：設(shè)置或檢索對(duì)象陰影可以設(shè)定多組效果，每組參數(shù)值以逗號(hào)分隔CSS3新增邊框?qū)傩?邊框陰影box-reflect：可以對(duì)盒子模型進(jìn)行倒影設(shè)置練習(xí)二1、div元素創(chuàng)建一個(gè)100px

*100px的盒子，使用新增的邊框?qū)傩?，完成下圖操作五、CSS3新增屬性CSS3新增背景屬性CSS3新增漸變屬性CSS3新增背景屬性CSS3新增的背景屬性屬性功能描述background-origin設(shè)置或檢索對(duì)象的背景圖像顯示的原點(diǎn)background-clip設(shè)置或檢索對(duì)象的背景向外裁剪的區(qū)域background-size設(shè)置或檢索對(duì)象的背景圖像的尺寸大小CSS3新增背景屬性background-origin背景

可以放置于

content-box、padding-box

或border-box

區(qū)域值描述padding-box背景圖像相對(duì)于內(nèi)邊距框來定位border-box背景圖像相對(duì)于邊框盒來定位content-box背景圖像相對(duì)于內(nèi)容框來定位CSS3新增背景屬性background-clip可以設(shè)置多背景值描述padding-box背景被裁剪到內(nèi)邊距框border-box背景被裁剪到邊框盒content-box背景被裁剪到內(nèi)容框CSS3新增背景屬性background-size值描述length設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為"auto"percentage以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為“auto”cover把背景圖像擴(kuò)展至足夠大，以使背景圖像完

背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。contain把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域CSS3新增漸變屬性的顏色之間進(jìn)行平滑的CSS3提供了創(chuàng)建顏色漸變的方式，在兩個(gè)或過渡瀏覽器支持的兩種顏色漸變線性漸變

linear-gradient（to漸變方向或角度,第一種顏色,第二種顏色,…）徑向漸變

radial-gradient(形狀(可選)大小(可選)at位置(可選)，顏色1，顏色2)CSS3新增漸變屬性線性漸變的方向和角度表示0deg90deg180deg270degCSS3新增漸變屬性徑向漸變六、CSS3新增屬性CSS3新增盒子屬性CSS3新增可伸縮盒子屬性CSS3新增用戶界面屬性CSS3新增盒子屬性CSS3新增的盒子屬性屬性描述overflow-x如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對(duì)內(nèi)容的左/右邊緣進(jìn)行裁剪overflow-y如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對(duì)內(nèi)容的上/下邊緣進(jìn)行裁剪overflow-style規(guī)定溢出元素的首選滾動(dòng)方法rotation圍繞由rotation-point屬性定義的點(diǎn)對(duì)元素進(jìn)行旋轉(zhuǎn)rotation-point定義距離上左邊框邊緣的偏移點(diǎn)CSS3新增盒子屬性overflow-x、overflow-y值描述visible不裁剪內(nèi)容，可能會(huì)顯示在內(nèi)容框之外hidden裁剪內(nèi)容

-

不提供滾

制scroll裁剪內(nèi)容

-

提供滾

制auto如果溢出框，則應(yīng)該提供滾

制no-display如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框no-content如果內(nèi)容不適合內(nèi)容框，則隱藏整個(gè)內(nèi)容CSS3新增盒子屬性overflow-style值：autopannerscrollber

為溢出元素添加滾動(dòng)條move

用戶能夠直接移動(dòng)元素的內(nèi)容，通常用戶能夠用鼠標(biāo)拖動(dòng)內(nèi)容Marquee

內(nèi)容自主移動(dòng)，不需任何用戶

對(duì)其控制rotation值：角度rotation-point值：rotation-point（方向/百分比，方向/百分比）注：目前沒有瀏覽器支持overflow-style、rotation與rotation-pointCSS3新增可伸縮盒子屬性屬性描述box-align規(guī)定如何對(duì)齊框的子元素box-direction規(guī)定框的子元素的顯示方向box-flex規(guī)定框的子元素是否可伸縮box-flex-group將可伸縮元素分配到柔性分組box-lines規(guī)定當(dāng)超出父元素框的空間時(shí)，是否換行顯示box-ordinal-group規(guī)定框的子元素的顯示次序box-orient規(guī)定框的子元素是否應(yīng)水平或垂直排列box-pack規(guī)定水平框中的水平位置或者垂直框中的垂直位置注：目前沒有任何瀏覽器支持以上屬性，紅色字體的屬性可加瀏覽器私有前綴CSS3新增可伸縮盒子屬性box-align(規(guī)定如何對(duì)齊框的子元素)值：startend對(duì)于正常方向的框，每個(gè)子元素的上邊緣沿著框的頂邊放置對(duì)于反方向的框，每個(gè)子元素的下邊緣沿著框的底邊放置對(duì)于正常方向的框，每個(gè)子元素的下邊緣沿著框的底邊放置對(duì)于反方向的框，每個(gè)子元素的上邊緣沿著框的頂邊放置center

均等地分割多余的空間，一半位于子元

上，另一半位于子元

下baseline如果box-orient是inline-axis或horizontal，所有子元素均與其基線對(duì)齊。拉伸子元素以填充包含塊stretchCSS3新增可伸縮盒子屬性box-direction(規(guī)定框的子元素的顯示方向)值：normalreverseinherit以默認(rèn)方向顯示子元素以反方向顯示子元素應(yīng)該從子元素繼承

box-direction屬性box-flex(規(guī)定框的子元素是否可伸縮)值：value

元素的可伸縮性，柔性是相對(duì)的，例如box-flex為2的子元素為

box-flex為1的子元素的兩倍。box-ordinal-group(規(guī)定框的子元素的顯示次序)值：integer

一個(gè)整數(shù)，指示子元素的顯示次序CSS3新增可伸縮盒子屬性box-orient(規(guī)定框的子元素是否應(yīng)水平或垂直排列)值：horizontalverticalinline-axisblock-axisinherit在水平行中從左向右排列子元素從上向下垂直排列子元素沿著行內(nèi)軸來排列子元素（沿著塊軸來排列子元素（為horizontal）為vertical）應(yīng)該從父元素繼承

box-orient屬性的值box-pack(在水平行中從左向右排列子元素)值：start對(duì)于正常方向的框，首個(gè)子元素的左邊緣被放在左側(cè)對(duì)于相反方向的框，最后子元素的右邊緣被放在右側(cè)對(duì)于正常方向的框，最后子元素的右邊緣被放在右側(cè)對(duì)于相反方向的框，首個(gè)子元素的左邊緣被放在左側(cè)endcenter

均等地分割多余空間，其中一半空間被置于首個(gè)子元素前，另一半被置于最后一個(gè)子元素后justify

在每個(gè)子元

間分割多余的空間（首個(gè)子元素前和最后一個(gè)子元素后沒有多余的空間）。CSS3新增可伸縮盒子屬性CSS3新增用戶界面屬性屬性描述appearance允許您將元素設(shè)置為標(biāo)準(zhǔn)用戶界面元素的外觀box-sizing允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容icon為創(chuàng)作者提供使用圖標(biāo)化等價(jià)物來設(shè)置元素樣式的能力nav-down規(guī)定在使用arrow-down導(dǎo)航鍵時(shí)向何處導(dǎo)航nav-index設(shè)置元素的tab鍵控制次序nav-left規(guī)定在使用arrow-left導(dǎo)航鍵時(shí)向何處導(dǎo)航nav-right規(guī)定在使用arrow-right導(dǎo)航鍵時(shí)向何處導(dǎo)航nav-up規(guī)定在使用arrow-up導(dǎo)航鍵時(shí)向何處導(dǎo)航outline-offset對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓resize規(guī)定是否可由用戶對(duì)元素的尺寸進(jìn)行調(diào)整appearance

允許您使元素看上去像標(biāo)準(zhǔn)的用戶界面元素瀏覽器支持：主流瀏覽器不支持，F(xiàn)irefox、Safari、chrome支持帶瀏覽器私有前綴的appearance取值：normaliconwindowbutton?將元素呈現(xiàn)為常規(guī)元素將元素呈現(xiàn)為圖標(biāo)（小

）將元素呈現(xiàn)為視口將元素呈現(xiàn)為按鈕將元素呈現(xiàn)為一套供用戶選擇的選項(xiàng)field將元素呈現(xiàn)為輸入字段CSS3新增用戶界面屬性box-si