方法一:
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...