中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網頁前端切圖之關于html+css的一點記錄

2023-03-18    分類: 網站建設

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

代碼塊1

代碼塊2

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

分享文章:網頁前端切圖之關于html+css的一點記錄
標題網址:http://m.rwnh.cn/news9/245409.html

成都網站建設公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網站、搜索引擎優(yōu)化、企業(yè)建站、移動網站建設、網站設計公司、定制網站

廣告

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

成都網站建設
阿鲁科尔沁旗| 江华| 喀喇沁旗| 贞丰县| 旌德县| 沾益县| 嘉兴市| 宜君县| 屏东市| 林甸县| 陈巴尔虎旗| 尼木县| 冀州市| 庆元县| 环江| 五河县| 商丘市| 新安县| 甘孜县| 库尔勒市| 全州县| 贞丰县| 南康市| 津南区| 光泽县| 城口县| 罗甸县| 峨边| 永丰县| 长泰县| 大同县| 宜昌市| 桦南县| 仙居县| 恩施市| 庄河市| 平利县| 报价| 民县| 南开区| 琼中|