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

如果想要水平垂直居中，可以如下圖：
用display: flex; align-content: center;justify-content: center;也能達(dá)到想要的水平垂直居中效果，需要考慮兼容性。
有時(shí)候，會(huì)遇到文字搭配其他元素的布局，不要直接把文字和元素寫(xiě)在一起，否則有可能會(huì)導(dǎo)致頁(yè)面的布局出現(xiàn)混亂。margin對(duì)內(nèi)聯(lián)元素是起不了作用。:before 和 :after這兩個(gè)偽元素，當(dāng)單個(gè)冒號(hào)的時(shí)候是css3的偽類，兩個(gè)冒號(hào)的是css3的偽元素。代碼的順序上，這個(gè):before也比:after前。
vertical-align是一個(gè)比較好用的css屬性，是設(shè)置行內(nèi)元素和表格元素的垂直對(duì)齊的，但是不能用于對(duì)齊塊級(jí)元素的。

最近遇到一個(gè)需要做的樣式，如下圖：
那么就可以用^{<code>st</code>}，然后設(shè)置sub的樣式為：position: relative;
vertical-align: super;就可以得到想要的效果。vertical-align的值有sub、super、text-top、text-bottom、 middle、baseline，分別是基線基于父元素的下標(biāo)基線對(duì)齊、父元素的上標(biāo)基線對(duì)齊、頂部和父元素的字體的頂部對(duì)齊，底部和父元素的字體的底部對(duì)齊、與父元素的中間位置對(duì)齊、父元素的基線對(duì)齊。

分享文章：網(wǎng)頁(yè)前端切圖之關(guān)于html+css的一點(diǎn)記錄
標(biāo)題網(wǎng)址：http://aaarwkj.com/news9/245409.html

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

廣告

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