CSS 技巧總結

2022-08-14 13:18:11 字數 1413 閱讀 7750

方法一:

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...