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

資訊專欄INFORMATION COLUMN

前端面試重點(diǎn)之--居中問題

AJie / 1560人閱讀

摘要：前端面試重點(diǎn)居中問題在頁面布局開發(fā)中，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對(duì)于解決頁面布局非常重要，同時(shí)它也是常見的面試重點(diǎn)。已知寬高的元素父元素相對(duì)定位，子元素絕對(duì)定位。以上才支持的兼容性寫法完

前端面試重點(diǎn)——居中問題 
在頁面布局開發(fā)中，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對(duì)于解決頁面布局非常重要，同時(shí)它也是常見的面試重點(diǎn)。本文匯總一些常見的居中方式以及一些注意點(diǎn)，權(quán)當(dāng)學(xué)習(xí)筆記。

[toc]

一、水平居中 1. inline-block + text-align 
確保子元素是行內(nèi)塊級(jí)元素后，給父元素 text-align: center; 這種情況對(duì)于子元素定寬或者不定寬都生效。

    
child


.parent {
    text-align: center;
}
.child {
    display: inline-block;
}
2. table + margin 
此時(shí)利用table的寬度是內(nèi)容的寬度，且table可以使用margin

    
child


.child {
    display: table;
    margin: 0 auto;
}
3. absolute + transform 
確定父元素 相對(duì)定位后，將子元素通過絕對(duì)定位在父元素內(nèi)實(shí)現(xiàn)居中。該方法適用于子元素定寬或者不定寬，萬能方法。

    
child


.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: translateX(-50%);
}
4. flex + justify-content 
彈性布局（flex布局）也是常用來居中的方式，只需要給父級(jí)元素添加彈性布局格式，同時(shí)設(shè)置橫軸對(duì)齊方式j(luò)ustiify-content來設(shè)置居中。

    
child


.parent {
    display: flex;
    justify-content: center;
}
在選擇居中對(duì)齊的時(shí)候，也可以通過考慮子元素的寬度是否確定，如果寬度確定，也可通過：margin: 0 auto;實(shí)現(xiàn)水平居中。
注意點(diǎn)：



text-align用來設(shè)置元素中的的文本行內(nèi)元素的對(duì)齊方式；


text-align只對(duì)行內(nèi)元素有效，對(duì)塊元素?zé)o效，不能設(shè)置塊元素的對(duì)齊方式；
二、垂直居中 1. line-height = height （只適用于單行內(nèi)行內(nèi)元素） 
這種方法在設(shè)置單行塊的時(shí)候特別有效，需要知道父元素高度。

    
child


.parent {
    height: 100px;
}
.child {
    line-height: 100px;
}
2. table-cell + vertical-align（單行，多行都可居中） 
利用表格單元格的特性，單元格內(nèi)支持居中。

    
child


.parent {
    display: table-cell;
    vertical-align: middle;
}
3. absolute + transform 
父元素相對(duì)布局，子元素絕對(duì)布局，適用很多場(chǎng)景。

    
child


.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}
4. flex + align-item 
flex布局，通過縱向?qū)Ralign-item設(shè)置交叉軸對(duì)齊。

    
child


.parent {
    display: flex;
    align-items: center;
}
三、水平垂直居中 
將上面的水平居中方法和垂直居中方法結(jié)合起來就可以實(shí)現(xiàn)水平垂直居中。
1. inline-block + text-align + table-cell + vertical-align 

    
child


.parent {
    diaplay: teable-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block;
}
2. margin: auto 
已知寬高的元素父元素相對(duì)定位，子元素絕對(duì)定位。

    
child


.parent {
    positon: relative;
}
.child {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
3. transform + translate

不管寬高是否給定，都可以使用父元素相對(duì)定位，子元素絕對(duì)定位。（未知寬高可能是行內(nèi)元素）


    
child


.parent {
    positon: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
4. flex 
flex布局，設(shè)置主軸和交叉軸的對(duì)齊方式。

    
child


.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
注意點(diǎn)：



行內(nèi)元素設(shè)置寬高是無效的，可以通過設(shè)置line-height實(shí)現(xiàn)行內(nèi)元素高度的設(shè)置，行內(nèi)元素設(shè)置margin或者padding只有左右有效，上下無效。


flex(ie 9以上才支持)的兼容性寫法：



{
    display: -webkit-box;
    display: -webkit-flex;
     display: -moz-flex; 
      display: -ms-flexbox; 
      display: flex;
}

（完）

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/54179.html

相關(guān)文章

  • 前端面試重點(diǎn)之--居中問題

    摘要：前端面試重點(diǎn)居中問題在頁面布局開發(fā)中，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對(duì)于解決頁面布局非常重要，同時(shí)它也是常見的面試重點(diǎn)。已知寬高的元素父元素相對(duì)定位，子元素絕對(duì)定位。以上才支持的兼容性寫法完 前端面試重點(diǎn)——居中問題 在頁面布局開發(fā)中，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對(duì)于解決頁面布局非常重要，同時(shí)它也是常見的面試重點(diǎn)。本文匯總一些常見的居中方式以及一些注意點(diǎn)，權(quán)當(dāng)...

    張遷 評(píng)論0 收藏0

  • 查漏補(bǔ)缺 - 收藏集 - 掘金

    摘要：醞釀許久之后，筆者準(zhǔn)備接下來撰寫前端面試題系列文章，內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識(shí)前端掘金基礎(chǔ)智商劃重點(diǎn)在實(shí)際開發(fā)中，已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合，我在認(rèn)識(shí)了兩位同是10年工作經(jīng)驗(yàn)的阿里前端開發(fā)小伙伴，不但要向前輩學(xué)習(xí)，我有時(shí)候還會(huì)選擇另一種方法逗逗他們，拿了網(wǎng)上一道經(jīng)典面試題，可能我連去阿里面試的機(jī)會(huì)都沒有，但是我感受到了一次面試1...

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

  • 面試寶典

    摘要：有談?wù)劽嬖嚺c面試題對(duì)于前端面試的一些看法。動(dòng)態(tài)規(guī)劃算法的思想及實(shí)現(xiàn)方法幫大家理清動(dòng)態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個(gè)方面。極客學(xué)院前端練習(xí)題道練習(xí)題，面試季練練手。 由數(shù)據(jù)綁定和排序引入的幾個(gè) JavaScript 知識(shí)點(diǎn) 在 JavaScript 的數(shù)據(jù)綁定和做簡(jiǎn)單的表格排序中遇到的幾個(gè)知識(shí)點(diǎn) [[JS 基礎(chǔ)...

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

  • 拒信收割機(jī)の前端面經(jīng)（CVTE，唯品會(huì)，百度）

    摘要：另外回答的時(shí)候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風(fēng)生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎(chǔ)思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊 這幾天終于閑下來，做一點(diǎn)微小的工作，整理了一些之前幾家公司的前端面試題和個(gè)人經(jīng)驗(yàn)，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時(shí)間久遠(yuǎn)難免有些遺漏；很多問題面試官都...

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

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

0條評(píng)論

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