记录几个前端样式小点
生活随笔
收集整理的這篇文章主要介紹了
记录几个前端样式小点
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
1、二級菜單根據內容自適應寬度
?效果圖:
?
代碼:
li {white-space: nowrap;display: block;width: 100%; /* 寬度若固定,使用固定,但注意溢出問題 */ }?
解析:
white-space: nowrap;? 重點使用這個,默認情況,內容會根據寬度自動換行。
?
?
?
2、字體若小于瀏覽器,例如 12px 時,想讓字體更小時該如何
效果圖:
?
代碼:
li{display:block;/*是塊級元素*/transform: scale(.5);/*縮小字體*/ }?
如果文字被縮放后,未頂部對齊,可使用? transform-origin: 0 0; 頂部對齊。(像下面說的第3點中圖片下的文字)
?
?
?
??
3、一行中并排 li 時,內容不統一時,讓高度統一
效果圖對比:
錯誤示范 | 初步修改 | 最終需要的結果 |
| ? ? | ? | ? ? |
?
代碼:
li{float: none;display: inline-block;vertical-align: top;}
?
解析:
1、一般情況,并排塊元素使用的是 float:left ,但若出現各塊高度不統一時,則導致錯位情況,所以,需要清除浮動 float:none; ;
2、清除浮動后,通過使用 display:inline-block; 也是可以讓元素并排的,此時可能存在內容以基線對齊,即文字底線;
3、所以,需要使用 vertical-align:top; 將內容頂部對齊,這樣相對美觀點;
?
轉載于:https://www.cnblogs.com/JaneBlog/p/11283753.html
總結
以上是生活随笔為你收集整理的记录几个前端样式小点的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: know about用法
- 下一篇: 常量指针与指针常量