CSS 技巧總結

CSS 技巧和經驗列表

1. 如何清除圖片下方出現的幾像素的空白

方法一：
img{display:block;}

方法二：
img{vertical-align:top;}
除了top值，還能夠設置爲text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值均可以

方法三：
#test{font-size:0;line-height:0;}
test爲img的父元素

2. 設置滾動條的顏色

3. 文本溢出邊界顯示爲省略號

#test{
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
首先需設置將文本強制在一行內顯示，而後將溢出的文本經過overflow:hidden截斷，並以text-overflow:ellipsis方式將截斷的文本顯示爲省略號。

4. 如何使連續的長字符串自動換行

方法：
#test{width:150px;word-wrap:break-word;}
word-wrap的break-word值容許在單詞內換行

5. 清除浮動

方法一:
#test{clear:both;}
#test爲浮動元素的下一個兄弟元素

方法二：
#test{display:block;zoom:1;overflow:hidden;}
#test爲浮動元素的父元素。zoom:1也能夠替換爲固定的width或height

方法三：
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
#test爲浮動元素的父元素

6. 如何讓已知高度的容器在 頁面 中水平垂直居中

#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

7. 在不知道本身高度和父元素高度的時候，實現子元素在父元素中的水平垂直居中

方法：
#parent{position: relative;}
#child{position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}

8. 在已知高度的父元素中垂直居中

方法：
#parent{height:xxx;}
#child {position: relative;top: 50%;transform: translateY(-50%);}

9. 去掉超連接的虛線框

方法：
a{outline:none;}
IE7及更早瀏覽器因爲不支持outline屬性，須要經過js的blur()方法來實現，如<a onfocus="this.blur();"...

10. 如何在點文字時也選中複選框或單選框？

方法一：
<input type="checkbox" id="chk1" name="chk" /><label for="chk1">選項一</label>
<input type="checkbox" id="chk2" name="chk" /><label for="chk2">選項二</label>

<input type="radio" id="rad1" name="rad" /><label for="rad1">選項一</label>
<input type="radio" id="rad2" name="rad" /><label for="rad2">選項二</label>
全部的主流瀏覽器都支持

方法二：
<label><input type="checkbox" name="chk" />選項一</label>
<label><input type="checkbox" name="chk" />選項二</label>

<label><input type="radio" name="rad" />選項一</label>
<label><input type="radio" name="rad" />選項二</label>
該方式相比方法1更簡潔，但IE6及更早瀏覽器不支持

11.如何區別display:none與visibility:hidden？

相同的是display:none與visibility:hidden均可以用來隱藏某個元素； 不一樣的是display:none在隱藏元素的時候，將其佔位空間也去掉；而visibility:hidden只是隱藏了內容而已，其佔位空間仍然保留。

12.自動換行 word-break:break-all和word-wrap:break-word的區別

word-break:break-all 例如div寬200px，它的內容就會到200px自動換行，若是該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端爲conra(congratulation的前端部分)，下一行爲tulation（conguatulation）的後端部分了。

word-wrap:break-word 例子與上面同樣，但區別就是它會把congratulation整個單詞當作一個總體，若是該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

13 禁止用戶選中文本

user-select:none

14 繪製三角形