前端CSS使用随筆

1. 設定table隔行變色

/*設定奇數行顔色*/
table tr:nth-child(odd)
{
    background: #ccc;
}
/*設定偶數行顔色*/
table tr:nth-child(even)
{
    background: #ccc;
}      

2. html保留文本中的空格以及換行

1. normal：忽略多餘的空白，元素内如果有多個空格在一起或換行符（Enter鍵），浏覽器會把其看作一個空格來處理，不會影響自動換行（就是元素内容過長，在一行上顯示不完，會從下一行開始）；
2. pre：保留白白或換行符（Enter鍵）。輸入幾個空格，浏覽器顯示的時候就是幾個空格，其實就是原樣輸出，如果有換行符，換行符後的内容會從下一行開始。其行為方式和html中的</pre>标簽類似。會影響自動換行（就是元素内容過長，不會從下一行開始，會沖出元素的邊界顯示）；
3. nowrap：元素内文本如果有多個空格在一起或換行符，浏覽器隻會顯示一個空格；元素文本内容不會自動換行，隻有遇到</br>标簽才會換行。
4. pre-wrap：和nowrap相反，元素内的空格不管有多少個都會原樣顯示，如果有換行符，換行符後的内容會從下一行開始；會自動換行，就是元素内容在一行中顯示不完會從下一行開始；
5. pre-line：合并空白符序列，保留換行符。就是多個空格會被浏覽器看作一個空格來處理，如果有換行符（Enter鍵），換行符後的内容會從下一行開始，不會影響自動換行；
6. inherit：從父元素繼承white-space屬性的值，就是父元素的white-space屬性的值是什麼，該元素的white-space屬性值就是什麼