實用的CSS小技巧有哪些

本篇內容介紹了“實用的CSS小技巧有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　實用的CSS小技巧有什么

　　1.文字水平居中

　　將一段文字放置容器的水平中點，只要設置text-align屬性即可：

　　text-align：center;

　　2.容器水平居中

　　先將該容器設置一個明確寬度，然后將margin的水平值設為自動即可。

　　div＃container{width：760px;margin：0自動;}

　　3.文字垂直居中

　　單行文字的垂直居中，只要將行高與容器高稱為替代即可。

　　例如，容器中有一行數字。

　　<divid=“container”>1234567890</div>

　　然后CSS這樣寫：

　　div＃container{高度：35像素；行高：35px;}

　　如果有n行文字，那么將行高設置容器高度的n分之一即可。

　　4.容器垂直居中

　　比如，有一大一小兩個容器，請問如何將小容器垂直居中？

　　<divid=“big”><divid=“small”></div></div>

　　首先，將大容器的定位為相對。

　　div＃big{position：relative;height：480px;}

　　然后，將小容器定位為絕對，再將其的左上角沿y軸下移50％，最后將其邊距頂部上移本身高度的50％即可。

　　div＃small{位置：絕對；最高：50％；高度：240像素；頁邊距：-120px;}

　　5.圖片寬度自適應

　　如何調整同軸的圖片，能夠自動適應小容器的寬度？CSS可以這樣寫：

　　img{最大寬度：100％}

　　CSS小技巧有哪些

　　1.3D按鈕

　　要使按鈕具有3D效果，只要將它的左上方邊框設置為淺色，右下部邊框設置深色即可。

　　div＃button{背景：＃888;邊框：1px實線；邊框顏色：＃999＃777＃777＃999;}

　　2.font屬性快捷寫法

　　font快捷寫法的格式為：

　　body{font：font-stylefont-variantfont-weightfont-sizeline-heightfont-family;}

　　所以，

　　身體{font-family：Arial，Helvetica，sans-serif;font-size：13px;font-weight：正常；font-variant：小寫；字體樣式：斜體；行高：150％；}

　　可以被寫成：

　　body{字體：斜體小寫字母正常13px/150％Arial，Helvetica，sans-serif；}

“實用的CSS小技巧有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！