国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS居中那些事

dingding199389 / 1702人閱讀

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

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

我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。
這里我們又得分兩種情況：行內元素 還是 塊狀元素 ，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。

行內元素

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

塊狀元素

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

定寬塊狀元素

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

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

在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設置居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。

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

1. 加入table標簽包裹或使用disable:table-cell

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

2. 設置display: inline方法

改變塊級元素的 display 為 inline 類型（設置為 行內元素 顯示），然后使用 text-align:center 來實現居中效果。

與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設置。

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

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

垂直居中

我們在實際工作中也會遇到需要設置垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設置為垂直居中，為了用戶體驗性好。

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

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

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

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

這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大于塊的寬時，就有內容脫離了塊。

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115391.html

相關文章

  • css居中那些事

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

    番茄西紅柿 評論0 收藏0

  • 關于CSS的那些事

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

    smallStone 評論0 收藏0

  • css基礎—字體那些事

    摘要：因為網頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強制換行由于中文會強制換行，但是因為英文和數字不會強制換行。 css基礎—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...

    Youngs 評論0 收藏0

  • css基礎—字體那些事

    摘要：因為網頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強制換行由于中文會強制換行，但是因為英文和數字不會強制換行。 css基礎—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...

    pkhope 評論0 收藏0

發表評論

0條評論

dingding199389

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<