亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS居中那些事

dingding199389 / 1764人閱讀

摘要：定寬塊狀元素滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置左右值為來實(shí)現(xiàn)居中的。設(shè)置方法改變塊級(jí)元素的為類型設(shè)置為行內(nèi)元素顯示，然后使用來實(shí)現(xiàn)居中效果。

做前端這一年多來，其實(shí)一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態(tài)，從來沒有系統(tǒng)的學(xué)習(xí)或總結(jié)過，結(jié)果現(xiàn)在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡單的總結(jié)一下，高手繞路。
水平居中

我們?cè)趯?shí)際工作中常會(huì)遇到需要設(shè)置水平居中的場景，比如為了美觀，文章的標(biāo)題一般都是水平居中顯示的。
這里我們又得分兩種情況：行內(nèi)元素 還是 塊狀元素 ，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。

行內(nèi)元素

如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)，水平居中是通過給父元素設(shè)置 text-align:center 來實(shí)現(xiàn)的。

塊狀元素

當(dāng)被設(shè)置元素為 塊狀元素 時(shí)用text-align：center就不起作用了，這時(shí)也分兩種情況：定寬塊狀元素和不定寬塊狀元素。

定寬塊狀元素

滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實(shí)現(xiàn)居中的。如：

div{
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設(shè)置為 auto */
}
不定寬塊狀元素

在實(shí)際工作中我們會(huì)遇到需要為“不定寬度的塊狀元素”設(shè)置居中，比如網(wǎng)頁上的分頁導(dǎo)航，因?yàn)榉猪摰臄?shù)量是不確定的，所以我們不能通過設(shè)置寬度來限制它的彈性。

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：

1. 加入table標(biāo)簽包裹或使用disable:table-cell

為什么選擇方法一加入table標(biāo)簽? 是利用table標(biāo)簽的長度自適應(yīng)性---即不定義其長度也不默認(rèn)父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定），因此可以看做一個(gè)定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。

2. 設(shè)置display: inline方法

改變塊級(jí)元素的 display 為 inline 類型（設(shè)置為 行內(nèi)元素 顯示），然后使用 text-align:center 來實(shí)現(xiàn)居中效果。

與第一種類似，顯示類型設(shè)為行內(nèi)元素，進(jìn)行不定寬元素的屬性設(shè)置。

3. 使用left:50%配合transform: translateX(-50%)

這個(gè)就好說啦，子元素相對(duì)父元素向右偏移父元素的50%，然后在相對(duì)于自身向左偏移自身的50%,完事。

垂直居中

我們?cè)趯?shí)際工作中也會(huì)遇到需要設(shè)置垂直居中的場景，比如好多報(bào)紙的文章標(biāo)題在左右一側(cè)時(shí)，常常會(huì)設(shè)置為垂直居中，為了用戶體驗(yàn)性好。

這里我們又得分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。

父元素高度確定的單行文本

父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的 height 和 line-height 高度一致來實(shí)現(xiàn)的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。

line-height 與 font-size 的計(jì)算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。

這種文字行高與塊高一致帶來了一個(gè)弊端：當(dāng)文字內(nèi)容的長度大于塊的寬時(shí)，就有內(nèi)容脫離了塊。

父元素高度確定的多行文本 1. 利用display: table-cell和vertical-align: middle

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell（設(shè)置為表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 并不支持這個(gè)樣式,

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115391.html

相關(guān)文章

  • css居中那些事

    摘要：一垂直居中適用于單行文本居中多對(duì)象的垂直居中技巧立馬來看實(shí)際完成的精美相冊(cè)效果效果吧別忘了拖拉一下窗口看看效果喔負(fù)值立馬來看實(shí)際完成的精美相冊(cè)效果效果吧別忘了拖拉一下窗口看看效果喔立馬來看實(shí)際完成的精美相冊(cè)效一、css垂直居中 1.line-height(適用于單行文本居中) eg: html:123- css: .wordp{width:100px;line-heig...

    番茄西紅柿 評(píng)論0 收藏0

  • 關(guān)于CSS的那些事

    摘要：關(guān)于背景圖片的那些小技巧背景圖片太大沒辦法居中顯示怎么辦想完整顯示圖片如何按比例縮放想要在頁面上顯示兩個(gè)空格，應(yīng)該怎么寫代碼在代碼里寫才行。 CSS簡介 想要制作出好看又高大上的網(wǎng)頁，除了編寫好HTML文件外，CSS的編寫也必不可少。CSS的英文全稱是Cascading Style Sheets，即層疊樣式表。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格...

    smallStone 評(píng)論0 收藏0

  • css基礎(chǔ)—字體那些事

    摘要：因?yàn)榫W(wǎng)頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動(dòng)目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強(qiáng)制換行由于中文會(huì)強(qiáng)制換行，但是因?yàn)橛⑽暮蛿?shù)字不會(huì)強(qiáng)制換行。 css基礎(chǔ)—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...

    Youngs 評(píng)論0 收藏0

  • css基礎(chǔ)—字體那些事

    摘要：因?yàn)榫W(wǎng)頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動(dòng)目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強(qiáng)制換行由于中文會(huì)強(qiáng)制換行，但是因?yàn)橛⑽暮蛿?shù)字不會(huì)強(qiáng)制換行。 css基礎(chǔ)—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...

    pkhope 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

dingding199389

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<