CSS是一種用于美化網頁及其布局的代碼語言,最常見的應用便是美化文字。今天我們來講一種讓文字始終位于窗口底部的CSS技巧。
body { height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; } p { margin: 0; padding: 10px; }
這段CSS代碼的作用是將網頁的高度設置為100vh(也就是視口的高度),然后使用Flex布局的column方向將內容從上到下排列,并將文字垂直對齊方式設置為底部對齊。最后設置p標簽的內外邊距為0和10像素,以便于展示。
這種技巧可以用于很多設計上的需求,如在網頁中添加一個粘性底部菜單或是固定文字區域等。
上一篇css文字上下滾動效果
下一篇css文字下劃線消除