一、讓一個(gè)元素水平垂直居中，到底有多少種方案？

水平居中

• 對(duì)于 行內(nèi)元素: text-align: center;
• 對(duì)于確定寬度的塊級(jí)元素：

width和margin實(shí)現(xiàn)。margin: 0 auto;

絕對(duì)定位和margin-left: -width/2, 前提是父元素position: relative

• 對(duì)于寬度未知的塊級(jí)元素

table標(biāo)簽配合margin左右auto實(shí)現(xiàn)水平居中。使用table標(biāo)簽(或直接將塊級(jí)元素設(shè)值為display:table)，再通過(guò)給該標(biāo)簽添加左右margin為auto。

inline-block實(shí)現(xiàn)水平居中方法。display：inline-block和text-align:center實(shí)現(xiàn)水平居中。

絕對(duì)定位+transform，translateX可以移動(dòng)本身元素的50%。

flex布局使用justify-content:center

垂直居中

利用 line-height實(shí)現(xiàn)居中，這種方法適合純文字類

通過(guò)設(shè)置父容器 相對(duì)定位，子級(jí)設(shè)置 絕對(duì)定位，標(biāo)簽通過(guò)margin實(shí)現(xiàn)自適應(yīng)居中

彈性布局 flex:父級(jí)設(shè)置display: flex; 子級(jí)設(shè)置margin為auto實(shí)現(xiàn)自適應(yīng)居中

父級(jí)設(shè)置相對(duì)定位，子級(jí)設(shè)置絕對(duì)定位，并且通過(guò)位移 transform實(shí)現(xiàn)

table布局，父級(jí)通過(guò)轉(zhuǎn)換成表格形式，然后子級(jí)設(shè)置 vertical-align實(shí)現(xiàn)。(需要注意的是：vertical-align: middle使用的前提條件是內(nèi)聯(lián)元素以及display值為table-cell的元素)。

我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

二、浮動(dòng)布局的優(yōu)點(diǎn)？有什么缺點(diǎn)？清除浮動(dòng)有哪些方式？

浮動(dòng)布局簡(jiǎn)介:當(dāng)元素浮動(dòng)以后可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它的框或者另外一個(gè)浮動(dòng)元素的邊框?yàn)橹?。元素浮?dòng)以后會(huì)脫離正常的文檔流，所以文檔的普通流中的框就變現(xiàn)的好像浮動(dòng)元素不存在一樣。

優(yōu)點(diǎn)

這樣做的優(yōu)點(diǎn)就是在圖文混排的時(shí)候可以很好的使文字環(huán)繞在圖片周?chē)Ａ硗猱?dāng)元素浮動(dòng)了起來(lái)之后，它有著塊級(jí)元素的一些性質(zhì)例如可以設(shè)置寬高等，但它與inline-block還是有一些區(qū)別的，第一個(gè)就是關(guān)于橫向排序的時(shí)候，float可以設(shè)置方向而inline-block方向是固定的；還有一個(gè)就是inline-block在使用時(shí)有時(shí)會(huì)有空白間隙的問(wèn)題

缺點(diǎn)

最明顯的缺點(diǎn)就是浮動(dòng)元素一旦脫離了文檔流，就無(wú)法撐起父元素，會(huì)造成父級(jí)元素的高度塌陷。

清除浮動(dòng)的方式

添加額外標(biāo)簽

//添加額外標(biāo)簽并且添加clear屬性

父級(jí)添加overflow屬性，或者設(shè)置高度

//auto 也可以 //將父元素的overflow設(shè)置為hidden

建立偽類選擇器清除浮動(dòng)(推薦)

//在css中添加:after偽元素.parent:after{ /* 設(shè)置添加子元素的內(nèi)容是空 */ content: ''; /* 設(shè)置添加子元素為塊級(jí)元素 */ display: block; /* 設(shè)置添加的子元素的高度0 */ height: 0; /* 設(shè)置添加子元素看不見(jiàn) */ visibility: hidden; /* 設(shè)置clear：both */ clear: both;}

三、 使用display:inline-block會(huì)產(chǎn)生什么問(wèn)題？解決方法？

問(wèn)題復(fù)現(xiàn)

問(wèn)題: 兩個(gè)display：inline-block元素放到一起會(huì)產(chǎn)生一段空白。

如代碼:

Document 左 右

效果如下:

產(chǎn)生空白的原因

元素被當(dāng)成行內(nèi)元素排版的時(shí)候，元素之間的空白符(空格、回車(chē)換行等)都會(huì)被瀏覽器處理，根據(jù)CSS中white-space屬性的處理方式(默認(rèn)是normal，合并多余空白)，原來(lái) HTML代碼中的回車(chē)換行被轉(zhuǎn)成一個(gè)空白符，在字體不為0的情況下，空白符占據(jù)一定寬度，所以inline-block的元素之間就出現(xiàn)了空隙。

解決辦法

1. 將子元素標(biāo)簽的結(jié)束符和下一個(gè)標(biāo)簽的開(kāi)始符寫(xiě)在同一行或把所有子標(biāo)簽寫(xiě)在同一行

左 右

2. 父元素中設(shè)置font-size: 0，在子元素上重置正確的font-size

.container{ width:800px; height:200px; font-size: 0;}

3. 為子元素設(shè)置float:left

.left{ float: left; font-size: 14px; background: red; display: inline-block; width: 100px; height: 100px;}//right是同理

四、布局題：div垂直居中，左右10px，高度始終為寬度一半

問(wèn)題描述: 實(shí)現(xiàn)一個(gè)div垂直居中, 其距離屏幕左右兩邊各10px, 其高度始終是寬度的50%。同時(shí)div中有一個(gè)文字A，文字需要水平垂直居中。

思路一：利用height:0; padding-bottom: 50%;

Document A

強(qiáng)調(diào)兩點(diǎn):

padding-bottom究竟是相對(duì)于誰(shuí)的？

答案是相對(duì)于 父元素的width值。

那么對(duì)于這個(gè)outwrapper的用意就很好理解了。CSS呈流式布局，div默認(rèn)寬度填滿，即100%大小，給outwrapper設(shè)置margin: 0 10px;相當(dāng)于讓左右分別減少了10px。

父元素相對(duì)定位，那絕對(duì)定位下的子元素寬高若設(shè)為百分比，是相對(duì)誰(shuí)而言的？

相對(duì)于父元素的(content + padding)值, 注意不含border

延伸：如果子元素不是絕對(duì)定位，那寬高設(shè)為百分比是相對(duì)于父元素的寬高，標(biāo)準(zhǔn)盒模型下是content, IE盒模型是content+padding+border。

思路二: 利用calc和vw

Document A

效果如下:

五、CSS如何進(jìn)行品字布局？

第一種

品字布局1 2 3

效果:

第二種(全屏版)

品字布局1 2 3

效果:

六、CSS如何進(jìn)行圣杯布局

圣杯布局如圖:

而且要做到左右寬度固定，中間寬度自適應(yīng)。

1.利用flex布局

Document這里是頭部 左邊 中間部分 右邊 這里是底部

2.float布局(全部float:left)

Document這里是頭部 中間部分 左邊 右邊 這里是底部

這種float布局是最難理解的，主要是浮動(dòng)后的負(fù)margin操作，這里重點(diǎn)強(qiáng)調(diào)一下。

設(shè)置負(fù)margin和left值之前是這樣子:

左邊的盒子設(shè)置margin-left: -100%是將盒子拉上去，效果:

.left{ /* ... */ margin-left: -100%;}

然后向左移動(dòng)200px來(lái)填充空下來(lái)的padding-left部分

.left{ /* ... */ margin-left: -100%; left: -200px;}

效果呈現(xiàn):

右邊的盒子設(shè)置margin-left: -250px后，盒子在該行所占空間為0，因此直接到上面的middle塊中,效果:

.right{ /* ... */ margin-left: -250px;}

然后向右移動(dòng)250px, 填充父容器的padding-right部分:

.right{ /* ... */ margin-left: -250px; left: 250px;}

現(xiàn)在就達(dá)到最后的效果了:

3.float布局(左邊f(xié)loat: left, 右邊f(xié)loat: right)

Document這里是頭部 左邊 右邊 中間部分 這里是底部

4. 絕對(duì)定位

Document這里是頭部 左邊 右邊 中間部分 這里是底部

5.grid布局

Documentheader left middle right footer

看看grid布局，其實(shí)也挺簡(jiǎn)單的吧，里面的參數(shù)應(yīng)該不言而喻了。

另外說(shuō)一點(diǎn)，到2019年為止，grid現(xiàn)在絕大多數(shù)瀏覽器已經(jīng)可以兼容了，可以著手使用了。

當(dāng)然，還有table布局，年代比較久遠(yuǎn)了，而且對(duì)SEO不友好，知道就可以，這里就不浪費(fèi)篇幅了。

七、CSS如何實(shí)現(xiàn)雙飛翼布局？

有了圣杯布局的鋪墊，雙飛翼布局也就問(wèn)題不大啦。這里采用經(jīng)典的float布局來(lái)完成。

Document 雙飛翼布局

八、什么是BFC？什么條件下會(huì)觸發(fā)？渲染規(guī)則？應(yīng)用場(chǎng)景有哪些？

1.什么是BFC？

W3C對(duì)BFC的定義如下：浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器(例如 inline-blocks, table-cells, 和 table-captions)，以及overflow值不為"visiable"的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC(Block Fromatting Context， 即塊級(jí)格式上下文)。

2.觸發(fā)條件

一個(gè)HTML元素要?jiǎng)?chuàng)建BFC，則滿足下列的任意一個(gè)或多個(gè)條件即可：下列方式會(huì)創(chuàng)建塊格式化上下文：

• 根元素()
• 浮動(dòng)元素(元素的 float 不是 none)
• 絕對(duì)定位元素(元素的 position 為 absolute 或 fixed)
• 行內(nèi)塊元素(元素的 display 為 inline-block)
• 表格單元格(元素的 display為 table-cell，HTML表格單元格默認(rèn)為該值)
• 表格標(biāo)題(元素的 display 為 table-caption，HTML表格標(biāo)題默認(rèn)為該值)
• 匿名表格單元格元素(元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group(分別是HTML table、row、tbody、thead、tfoot的默認(rèn)屬性)或 inline-table)
• overflow 值不為 visible 的塊元素 -彈性元素(display為 flex 或 inline-flex元素的直接子元素)
• 網(wǎng)格元素(display為 grid 或 inline-grid 元素的直接子元素) 等等。

3.BFC渲染規(guī)則

(1)BFC垂直方向邊距重疊

(2)BFC的區(qū)域不會(huì)與浮動(dòng)元素的box重疊

(3)BFC是一個(gè)獨(dú)立的容器，外面的元素不會(huì)影響里面的元素

(4)計(jì)算BFC高度的時(shí)候浮動(dòng)元素也會(huì)參與計(jì)算

4.應(yīng)用場(chǎng)景

1. 防止浮動(dòng)導(dǎo)致父元素高度塌陷

現(xiàn)有如下頁(yè)面代碼:

Document

接下來(lái)將inner元素設(shè)為浮動(dòng):

.inner { float: left; background: #08BDEB; height: 100px; width: 100px; }

會(huì)產(chǎn)生這樣的塌陷效果：

但如果我們對(duì)父元素設(shè)置BFC后, 這樣的問(wèn)題就解決了:

.container { border: 10px solid red; overflow: hidden;}

同時(shí)這也是清除浮動(dòng)的一種方式。

2. 避免外邊距折疊

兩個(gè)塊同一個(gè)BFC會(huì)造成外邊距折疊，但如果對(duì)這兩個(gè)塊分別設(shè)置BFC，那么邊距重疊的問(wèn)題就不存在了。

現(xiàn)有代碼如下:

Document 1 2 3

此時(shí)三個(gè)元素的上下間隔都是10px, 因?yàn)槿齻€(gè)元素同屬于一個(gè)BFC?，F(xiàn)在我們做如下操作:

1 2 3

style增加:

.bfc{ overflow: hidden;}

效果如下:

可以明顯地看到間隔變大了，而且是原來(lái)的兩倍，符合我們的預(yù)期。

關(guān)于CSS布局問(wèn)題，先分享到這里，后續(xù)會(huì)不斷地補(bǔ)充，希望對(duì)你有所啟發(fā)。如果對(duì)你有幫助的話，別忘了幫忙點(diǎn)個(gè)贊哦。

原文鏈接：https://mp.weixin.qq.com/s/IgHNVEvK92TW2WZnWn_2BQ
作者：前端三元同學(xué)

總結(jié)

以上是生活随笔為你收集整理的css background 充满自适应_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。