SS3 用戶界面

在 CSS3 中, 增加了一些新的用戶界面特性來調整元素尺寸，框尺寸和外邊框。

您將了解以下的用戶界面屬性：

• resize

• box-sizing

• outline-offset

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

CSS3 調整尺寸(Resizing)

CSS3中，resize屬性指定一個元素是否應該由用戶去調整大小。

這個 div 元素由用戶調整大小。 (在 Firefox 4+, Chrome, 和 Safari中)

CSS代碼如下：

實例

由用戶指定一個div元素尺寸大小：

div{resize:both; overflow:auto;}

CSS3 方框大小調整(Box Sizing)

box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。

實例

規定兩個并排的帶邊框方框：

div{box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */width:50%; float:left;}

嘗試一下 ?

CSS3 外形修飾（outline-offset ）

outline-offset 屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。

輪廓與邊框有兩點不同：

• 輪廓不占用空間

• 輪廓可能是非矩形

這個 div 在邊框之外 15 像素處有一個輪廓。

CSS 代碼如下:

實例

規定邊框邊緣之外 15 像素處的輪廓：

div{border:2pxsolidblack; outline:2pxsolidred; outline-offset:15px;}

新的用戶界面特性

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

SS3 瀏覽器支持

對CSS3是沒有一個W3C標準的，但全部的主流瀏覽器都已經支持許多新的功能。下面是有關所有的新的CSS3屬性和他們的瀏覽器支持的參考：

圖標說明

對于某些屬性，你會看到瀏覽器的圖標和一個數字：

IE瀏覽器

火狐瀏覽器

Google Chrome瀏覽器

Safari瀏覽器

Opera瀏覽器

前綴-ms-的IE瀏覽器

前綴-moz-的火狐瀏覽器

前綴-webkit-的Google Chrome瀏覽器

前綴-webkit-的Safari瀏覽器

前綴-o-的Opera瀏覽器

前綴-xv-的Opera瀏覽器

數字表示是第一次支持該屬性的瀏覽器版本。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

SS3中的word-wrap、word-break、white-space想必大家都接觸過，今天我們來一起溫故而知新。

當我們在網站編輯文章的時候難免會遇到文字過長導致溢出的情況，仔細觀察會發現是我們的CSS沒加文字截斷，然后加上word-break:break-all就搞定了。下面給大家介紹CSS3中控制文字換行的三個屬性:

一、word-wrap

1、定義

word-wrap 屬性允許長單詞或 URL 地址換行到下一行。

2、語法和參數

word-wrap：normal（默認）|break-word normal：允許內容頂開指定的容器邊界，如果單詞超長，會沖出邊界（在當前行顯示，不會換行）。 break-word： 內容將在邊界內換行，當單詞在當前行放不下時，會自動切換到下一行，必要時會觸發word-break（注意：請分辨清楚word-break和break-word這倆個是不同的東西，一為屬性另為參數）。 注：各個瀏覽器均能識別。

3、說明

word-wrap是控制是否“為詞斷行”的，設置或檢索當前行超過指定容器的邊界時是否斷開轉行。中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。

4、例子

congratulation這個單詞屬于長串英文，word-wrap:break-word整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷，這就是對于長串文字不起作用的解釋。word-wrap:normal是默認情況，英文單詞不被拆開。

5、總結

作用范圍僅為div這類標準塊級元素，th,td這類table元素雖然識別但是沒有效果（如果為td,th加上寬度word-wrap在IE下是能夠發揮效果的，但根據完全兼容性方便記憶角度上來說還是以前面的結論為準）。

二、word-break

1、定義

word-break 屬性規定自動換行的處理方法。 提示：通過使用 word-break 屬性，可以讓瀏覽器實現在任意位置的換行。

2、語法和參數

word-break： normal（默認）|break-all|keep-all normal：依照亞洲語言和非亞洲語言的文本規則，允許在字內換行：中文則到邊界處的漢字換行，英文則整個單詞換行，如果出現某個單詞長度過長，則會撐破容器，如果邊框為固定屬性，則后面部分將無法顯示。 break-all：可以強行截斷英文單詞，強行換行。該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本。 keep-all：與所有非亞洲語言的normal相同。對于中文，韓文，日文，不允許字斷開。即如果是中文，將把前后標點符號內的一個漢字短語整個換行，英文單詞也整個換行。 注：Firefox、Opera不能識別。

3、說明

word-break:break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題（恰恰彌補了上面word-wrap:break-word對于長串文字不起作用的缺陷）。

4、例子

繼續以上面congratulation這個單詞屬于長串英文，word-break:break-all它會把單詞截斷，該行末端就會變成類似conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。 word-break:keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）

5、總結

作用范圍僅為div這類標準塊級元素，th,td這類table元素雖然識別但是沒有效果（經測試Chrome下word-break:break-all是有效果的，但根據完全兼容性方便記憶角度上來說還是以前面的結論為準）。Firefox,Opera是無法識別word-break的，更不用提Firefox下的th,td中使用word-break的效果了。

三、white-space

1、定義

word-spacing 屬性增加或減少單詞間的空白（即字間隔）。 該屬性定義元素中字之間插入多少空白符。針對這個屬性，“字” 定義為由空白符包圍的一個字符串。如果指定為長度值，會調整字之間的通常間隔；所以，normal 就等同于設置為 0。允許指定負長度值，這會讓字之間擠得更緊。 注釋：允許使用負值。

2、語法和參數

white-space：normal | nowrap | pre-wrap | pre-line | inherit normal：默認，空白符會被瀏覽器忽略。 nowrap：文本不會換行，文本會在在同一行上繼續，直到遇到

標簽為止。 pre-wrap：保留空白符，但是正常地進行換行。 pre-line：合并空白符，但是保留換行符。 inherit：繼承父元素的設置 注：各個瀏覽器均能識別。

3、說明

對于pre屬性，其實就是HTML中連續的多個空白符會被合并，然后為了不讓他合并（最常用的場合就是表示代碼文字縮進）讓其中的空白符繼續保留而不需要我們增加額外的樣式和標簽來控制它的縮進和換行。pre標簽的原理也是一樣的內部默認有了個white-space:pre。 對于nowrap屬性，這個是強制不換行核心，一般強制不換行就是利用這個屬性。Firefox的div和td中，以及IE的div中，均沒有問題。唯一的瑕疵就是在IE的td中會有一個問題，如果td沒有指定寬度，則nowrap仍然有效，如果td有寬度，并且文字中無標點、無空格（例如中文長串文字），nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問題。

你還在找3W的資料嗎，如上可以讓你清晰明了掌握它。

如果想要學習更多關于前端的干貨，請進我Q群詳聊：142991222，我們悄悄說。大家多多支持，多多轉發，多多吐糟，才讓我更有動力去多多分享。