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

水平居中

• 對于 行內元素: text-align: center;
• 對于確定寬度的塊級元素：

width和margin實現。margin: 0 auto;

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

• 對于寬度未知的塊級元素

table標簽配合margin左右auto實現水平居中。使用table標簽(或直接將塊級元素設值為display:table)，再通過給該標簽添加左右margin為auto。

inline-block實現水平居中方法。display：inline-block和text-align:center實現水平居中。

絕對定位+transform，translateX可以移動本身元素的50%。

flex布局使用justify-content:center

垂直居中

利用 line-height實現居中，這種方法適合純文字類

通過設置父容器 相對定位，子級設置 絕對定位，標簽通過margin實現自適應居中

彈性布局 flex:父級設置display: flex; 子級設置margin為auto實現自適應居中

父級設置相對定位，子級設置絕對定位，并且通過位移 transform實現

table布局，父級通過轉換成表格形式，然后子級設置 vertical-align實現。(需要注意的是：vertical-align: middle使用的前提條件是內聯元素以及display值為table-cell的元素)。

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

二、浮動布局的優點？有什么缺點？清除浮動有哪些方式？

浮動布局簡介:當元素浮動以后可以向左或向右移動，直到它的外邊緣碰到包含它的框或者另外一個浮動元素的邊框為止。元素浮動以后會脫離正常的文檔流，所以文檔的普通流中的框就變現的好像浮動元素不存在一樣。

優點

這樣做的優點就是在圖文混排的時候可以很好的使文字環繞在圖片周圍。另外當元素浮動了起來之后，它有著塊級元素的一些性質例如可以設置寬高等，但它與inline-block還是有一些區別的，第一個就是關于橫向排序的時候，float可以設置方向而inline-block方向是固定的；還有一個就是inline-block在使用時有時會有空白間隙的問題

缺點

最明顯的缺點就是浮動元素一旦脫離了文檔流，就無法撐起父元素，會造成父級元素的高度塌陷。

清除浮動的方式

添加額外標簽

//添加額外標簽并且添加clear屬性

父級添加overflow屬性，或者設置高度

//auto 也可以 //將父元素的overflow設置為hidden

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

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

三、 使用display:inline-block會產生什么問題？解決方法？

問題復現

問題: 兩個display：inline-block元素放到一起會產生一段空白。

如代碼:

Document 左 右

效果如下:

產生空白的原因

元素被當成行內元素排版的時候，元素之間的空白符(空格、回車換行等)都會被瀏覽器處理，根據CSS中white-space屬性的處理方式(默認是normal，合并多余空白)，原來 HTML代碼中的回車換行被轉成一個空白符，在字體不為0的情況下，空白符占據一定寬度，所以inline-block的元素之間就出現了空隙。

解決辦法

1. 將子元素標簽的結束符和下一個標簽的開始符寫在同一行或把所有子標簽寫在同一行

左 右

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

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

3. 為子元素設置float:left

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

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

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

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

Document A

強調兩點:

padding-bottom究竟是相對于誰的？

答案是相對于 父元素的width值。

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

父元素相對定位，那絕對定位下的子元素寬高若設為百分比，是相對誰而言的？

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

延伸：如果子元素不是絕對定位，那寬高設為百分比是相對于父元素的寬高，標準盒模型下是content, IE盒模型是content+padding+border。

思路二: 利用calc和vw

Document A

效果如下:

五、CSS如何進行品字布局？

第一種

品字布局1 2 3

效果:

第二種(全屏版)

品字布局1 2 3

效果:

六、CSS如何進行圣杯布局

圣杯布局如圖:

而且要做到左右寬度固定，中間寬度自適應。

1.利用flex布局

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

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

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

這種float布局是最難理解的，主要是浮動后的負margin操作，這里重點強調一下。

設置負margin和left值之前是這樣子:

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

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

然后向左移動200px來填充空下來的padding-left部分

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

效果呈現:

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

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

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

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

現在就達到最后的效果了:

3.float布局(左邊float: left, 右邊float: right)

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

4. 絕對定位

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

5.grid布局

Documentheader left middle right footer

看看grid布局，其實也挺簡單的吧，里面的參數應該不言而喻了。

另外說一點，到2019年為止，grid現在絕大多數瀏覽器已經可以兼容了，可以著手使用了。

當然，還有table布局，年代比較久遠了，而且對SEO不友好，知道就可以，這里就不浪費篇幅了。

七、CSS如何實現雙飛翼布局？

有了圣杯布局的鋪墊，雙飛翼布局也就問題不大啦。這里采用經典的float布局來完成。

Document 雙飛翼布局

八、什么是BFC？什么條件下會觸發？渲染規則？應用場景有哪些？

1.什么是BFC？

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

2.觸發條件

一個HTML元素要創建BFC，則滿足下列的任意一個或多個條件即可：下列方式會創建塊格式化上下文：

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

3.BFC渲染規則

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

(2)BFC的區域不會與浮動元素的box重疊

(3)BFC是一個獨立的容器，外面的元素不會影響里面的元素

(4)計算BFC高度的時候浮動元素也會參與計算

4.應用場景

1. 防止浮動導致父元素高度塌陷

現有如下頁面代碼:

Document

接下來將inner元素設為浮動:

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

會產生這樣的塌陷效果：

但如果我們對父元素設置BFC后, 這樣的問題就解決了:

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

同時這也是清除浮動的一種方式。

2. 避免外邊距折疊

兩個塊同一個BFC會造成外邊距折疊，但如果對這兩個塊分別設置BFC，那么邊距重疊的問題就不存在了。

現有代碼如下:

Document 1 2 3

此時三個元素的上下間隔都是10px, 因為三個元素同屬于一個BFC。現在我們做如下操作:

1 2 3

style增加:

.bfc{ overflow: hidden;}

效果如下:

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

關于CSS布局問題，先分享到這里，后續會不斷地補充，希望對你有所啟發。如果對你有幫助的話，別忘了幫忙點個贊哦。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。