CSS 技巧總結

方法一：

img方法二：
img除了top值，還可以設定為text-top | middle | bottom | text-bottom，甚至特定的和值都可以
方法三：
#test
test為img的父元素

#test

首先需設定將文字強制在一行內顯示，然後將溢位的文字通過overflow:hidden截斷，並以text-overflow:ellipsis方式將截斷的文字顯示為省略號。

方法：

#test
word-wrap的break-word值允許在單詞內換行

方法一:

#test
#test為浮動元素的下乙個兄弟元素
方法二：
#test
#test為浮動元素的父元素。zoom:1也可以替換為固定的width或height
方法三：
#test
#test:after
#test為浮動元素的父元素

#test

方法：

#parent
#child

方法：

#parent
#child

方法：

aie7及更早瀏覽器由於不支援outline屬性，需要通過js的blur()方法來實現，如選項一
選項二選項一
選項二所有的主流瀏覽器都支援
方法二：
選項一選項二
選項一選項二
該方式相比方法1更簡潔，但ie6及更早瀏覽器不支援

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

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

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

user-select:none

css 技巧總結

img 方法2 除了top值，還可以設定為text top middle bottom text bottom，甚至特定的和值都可以 img 方法3 test為img的父元素 test 2.如何讓某個元素充滿整個頁面？html,body test 3.文字超出隱藏 overflow hidden t...

CSS 總結 小技巧

1 在使用絕對定位時，同時設定left right為0，margin為auto，可以做到水平居中，同時設定top bottom為0，margin為auto，可以設定垂直居中 2 實現垂直居中，可以利用 transform 屬性 canvas box3 justify content用於設定或檢索彈性...

css揭秘之技巧總結

二 視覺設計 三 分欄布局的欄個數 四 簡寫和展開式屬性合理使用 總結巧用em單位 padding 3em 8em border如果是em會在極端情況下變得極粗，不美觀 border 1px solid 446d88 background 58a linear gradient 77a0bb,58a...