[toc] ## 雜集 [雜集](http://www.hmoore.net/book/cris/js/edit) ## white-space - 如何處理空白 - 控制文本換行或不換行 | 值 |描述 | | --- | --- | |normal |默認。空白會被瀏覽器忽略 | |pre |空白會被瀏覽器保留。其行為方式類似HTML中的<pre>標簽 | |nowrap |文本不會換行，文本會在同一行上繼續，直到遇到\<br\> 標簽位置 | |pre-wrap |保留空白符序列，但是正常地進行換行 | |pre-line |合并空白符序列，但是保留換行符 | |inherit |規定應該從父元素繼承white-space的值 | ## letter-space 可參與動畫(任何數值皆可參與動畫) ## padding與百分比與溢出 假設我定義某元素的寬度為父元素的50%，而父元素的寬度是可變化的，我想讓該元素的高度等于其寬度，如果不用js，要如何實現？ ``` <style type="text/css"> #container { width: 80%; height: 500px; } .attr { width: 50%; height: 0; padding-bottom: 50%; background-color: #008b57; } </style> <div id='container'> <div class='attr'></div> </div> ``` 文中作者采用的方法是利用了padding-top/padding-bottom屬性,根據他的解釋,`padding'如果是百分比的話,那這個百分比是相對于其父元素的寬度而言的 ## text-transform |值 |描述 | | --- | --- | |none |默認。定義帶有小寫字母和大寫字母的標準的文本 | |capitalize |文本中的每個單詞以大寫字母開頭 | |uppercase |定義僅有大寫字母 | |lowercase |定義無大寫字母，僅有小寫字母 | |inherit |規定應該從父元素繼承test-transform屬性的值 | ## box-shadow |值 |描述 | | --- | --- | |horizontal-shadow |必須。水平陰影的位置。允許負值 | |vertical-shadow |垂直陰影的位置。允許負值 | |blur |可選。模糊距離 | |spread |可選。陰影的尺寸 | |color |可選。陰影的顏色。 | |inset |可選。將外部陰影(outset)改為內部陰影 |