網(wǎng)頁前端切圖之關于html+css的一點記錄

2023-03-18    分類： 網(wǎng)站建設

在網(wǎng)站的前端制作中，會遇到大大小小很多問題，要學會去避免產(chǎn)生一些不必要的問題，在頁面的布局中，要注意p標簽是用來放文字，而不是布局的，img如果需要換行，可以設置樣式display: block; 這個比用塊級元素包裹img或者用
來換行好一些。加上margin: 0 auto;
Img 就可以水平居中了。如果需要垂直居中，可以用position和 transform，例如：

代碼塊1

代碼塊2

如果想要水平垂直居中，可以如下圖：
用display: flex; align-content: center;justify-content: center;也能達到想要的水平垂直居中效果，需要考慮兼容性。
有時候，會遇到文字搭配其他元素的布局，不要直接把文字和元素寫在一起，否則有可能會導致頁面的布局出現(xiàn)混亂。margin對內(nèi)聯(lián)元素是起不了作用。:before 和 :after這兩個偽元素，當單個冒號的時候是css3的偽類，兩個冒號的是css3的偽元素。代碼的順序上，這個:before也比:after前。
vertical-align是一個比較好用的css屬性，是設置行內(nèi)元素和表格元素的垂直對齊的，但是不能用于對齊塊級元素的。
效果
最近遇到一個需要做的樣式，如下圖：
那么就可以用st，然后設置sub的樣式為：position: relative;
vertical-align: super;就可以得到想要的效果。vertical-align的值有sub、super、text-top、text-bottom、 middle、baseline，分別是基線基于父元素的下標基線對齊、父元素的上標基線對齊、頂部和父元素的字體的頂部對齊，底部和父元素的字體的底部對齊、與父元素的中間位置對齊、父元素的基線對齊。
檢測網(wǎng)址

網(wǎng)站標題：網(wǎng)頁前端切圖之關于html+css的一點記錄
網(wǎng)頁鏈接：http://muchs.cn/news/245409.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站內(nèi)鏈、電子商務、網(wǎng)站制作、App設計、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司