剖析一些經典的CSS布局問題，為前端開發+面試保駕護

剖析一些經典的CSS布局問題，為前端開發+面試保駕護航

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

水平居中

對于行內元素: 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在使用時有時會有空白間隙的問題

缺點

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

清除浮動的方式

添加額外標簽

<div class="parent"> //添加額外標簽并且添加clear屬性 <div style="clear:both"></div> //也可以加一個br標簽</div>

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

<div class="parent" style="overflow:hidden">//auto 也可以 //將父元素的overflow設置為hidden <div class="f"></div></div>

建立偽類選擇器清除浮動（推薦）

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

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

問題復現

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

如代碼:

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container { width: 800px; height: 200px; }
 .left { font-size: 14px; background: red; display: inline-block; width: 100px; height: 100px; }
 .right { font-size: 14px; background: blue; display: inline-block; width: 100px; height: 100px; } </style> </head> <body> <div class="container"> <div class="left"> 左 </div> <div class="right"> 右 </div> </div> </body></html>

效果如下:

產生空白的原因

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

解決辦法

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

<div class="container"> <div class="left"> 左 </div><div class="right"> 右 </div></div>

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%;

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } .outer_wrapper { margin: 0 10px; height: 100%; /* flex布局讓塊垂直居中 */ display: flex; align-items: center; } .inner_wrapper{ background: red; position: relative; width: 100%; height: 0; padding-bottom: 50%; } .box{ position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 20px; } </style> </head> <body> <div class="outer_wrapper"> <div class="inner_wrapper"> <div class="box">A</div> </div> </div> </body></html>

強調兩點:

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

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

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

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

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

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

思路二: 利用calc和vw

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; }
 html, body { width: 100%; height: 100%; }
 .wrapper { position: relative; width: 100%; height: 100%; }
 .box { margin-left: 10px; /* vw是視口的寬度， 1vw代表1%的視口寬度 */ width: calc(100vw - 20px); /* 寬度的一半 */ height: calc(50vw - 10px); position: absolute; background: red; /* 下面兩行讓塊垂直居中 */ top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; font-size: 20px; } </style> </head> <body> <div class="wrapper"> <div class="box">A</div> </div> </body></html>

效果如下:

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

第一種

<!doctype html><html>
<head> <meta charset="utf-8"> <title>品字布局</title> <style> * { margin: 0; padding: 0; } body { overflow: hidden; } div { margin: auto 0; width: 100px; height: 100px; background: red; font-size: 40px; line-height: 100px; color: #fff; text-align: center; }
 .div1 { margin: 100px auto 0; }
 .div2 { margin-left: 50%; background: green; float: left; transform: translateX(-100%); }
 .div3 { background: blue; float: left; transform: translateX(-100%); } </style></head>
<body> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></body>
</html>

效果:

第二種(全屏版)

<!doctype html><html> <head> <meta charset="utf-8"> <title>品字布局</title> <style> * { margin: 0; padding: 0; }
 div { width: 100%; height: 100px; background: red; font-size: 40px; line-height: 100px; color: #fff; text-align: center; }
 .div1 { margin: 0 auto 0; }
 .div2 { background: green; float: left; width: 50%; }
 .div3 { background: blue; float: left; width: 50%; } </style> </head>
 <body> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </body></html>

效果:

六、CSS如何進行圣杯布局

圣杯布局如圖:

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

1.利用flex布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .header,.footer{ height:40px; width:100%; background:red; } .container{ display: flex; } .middle{ flex: 1; background:yellow; } .left{ width:200px; background:pink; } .right{ background: aqua; width:300px; } </style></head><body> <div class="header">這里是頭部</div> <div class="container"> <div class="left">左邊</div> <div class="middle">中間部分</div> <div class="right">右邊</div> </div> <div class="footer">這里是底部</div></body></html>

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

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .header, .footer { height: 40px; width: 100%; background: red; }
 .footer { clear: both; }
 .container { padding-left: 200px; padding-right: 250px; }
 .container div { position: relative; float: left; }
 .middle { width: 100%; background: yellow; }
 .left { width: 200px; background: pink; margin-left: -100%; left: -200px; }
 .right { width: 250px; background: aqua; margin-left: -250px; left: 250px; } </style></head>
<body> <div class="header">這里是頭部</div> <div class="container"> <div class="middle">中間部分</div> <div class="left">左邊</div> <div class="right">右邊</div> </div> <div class="footer">這里是底部</div></body>
</html>

這種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)

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .header, .footer { height: 40px; width: 100%; background: red; } .container{ overflow: hidden; }
 .middle { background: yellow; }
 .left { float: left; width: 200px; background: pink; }
 .right { float: right; width: 250px; background: aqua; } </style></head>
<body> <div class="header">這里是頭部</div> <div class="container"> <div class="left">左邊</div> <div class="right">右邊</div> <div class="middle">中間部分</div> </div> <div class="footer">這里是底部</div></body>
</html>

4. 絕對定位

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .header, .footer { height: 40px; width: 100%; background: red; } .container{ min-height: 1.2em; position: relative; }
 .container>div { position: absolute; }
 .middle { left: 200px; right: 250px; background: yellow; }
 .left { left: 0; width: 200px; background: pink; }
 .right { right: 0; width: 250px; background: aqua; } </style></head>
<body> <div class="header">這里是頭部</div> <div class="container"> <div class="left">左邊</div> <div class="right">右邊</div> <div class="middle">中間部分</div> </div> <div class="footer">這里是底部</div></body>
</html>

5.grid布局

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ display: grid; } #header{ background: red; grid-row:1; grid-column:1/5; }
 #left{ grid-row:2; grid-column:1/2; background: orange; } #right{ grid-row:2; grid-column:4/5; background: cadetblue; } #middle{ grid-row:2; grid-column:2/4; background: rebeccapurple } #footer{ background: gold; grid-row:3; grid-column:1/5; } </style></head>
<body> <div id="header">header</div> <div id="left">left</div> <div id="middle">middle</div> <div id="right">right</div> <div id="footer">footer</footer></div>
</body>
</html>

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

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

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

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

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

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .container { min-width: 600px; } .left { float: left; width: 200px; height: 400px; background: red; margin-left: -100%; } .center { float: left; width: 100%; height: 500px; background: yellow; } .center .inner { margin: 0 200px; } .right { float: left; width: 200px; height: 400px; background: blue; margin-left: -200px; } </style></head>
<body> <article class="container"> <div class="center"> <div class="inner">雙飛翼布局</div> </div> <div class="left"></div> <div class="right"></div></article></body>
</html>

八、什么是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. 防止浮動導致父元素高度塌陷

現有如下頁面代碼:

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container { border: 10px solid red; } .inner { background: #08BDEB; height: 100px; width: 100px; } </style> </head> <body> <div class="container"> <div class="inner"></div> </div> </body></html>

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

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

會產生這樣的塌陷效果：

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

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

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

2. 避免外邊距折疊

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

現有代碼如下:

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container { background-color: green; overflow: hidden; }
 .inner { background-color: lightblue; margin: 10px 0; } </style></head>
<body> <div class="container"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div></body>
</html>

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

 <div class="container"> <div class="inner">1</div> <div class="bfc"> <div class="inner">2</div> </div> <div class="inner">3</div> </div>

style增加:

.bfc{ overflow: hidden;}

效果如下:

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

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

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

者：sunshine小小倩

轉發鏈接：https://juejin.im/post/599970f4518825243a78b9d5

見瀏覽器兼容性問題與解決方案？

參考答案

(1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同

問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS里 {margin:0;padding:0;}

備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符來設置各個標簽的內外補丁是0。

(2)瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大

問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行

碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）

解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性

備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。

(3)瀏覽器兼容問題三：設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度

問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度

碰到頻率：60%

解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。

備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。

(4)瀏覽器兼容問題四：行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug

問題癥狀：IE6里的間距比超過設置的間距

碰到幾率：20%

解決方案：在display:block;后面加入display:inline;display:table;

備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe。

(5) 瀏覽器兼容問題五：圖片默認有間距

問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。

碰到幾率：20%

解決方案：使用float屬性為img布局

備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

(6) 瀏覽器兼容問題六：標簽最低高度設置min-height不兼容

問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important;

height:200px; overflow:visible;}

備注：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小于一個值（如300px）時。容器的高度為300px；當內容高度大于這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。

(7)瀏覽器兼容問題七：透明度的兼容CSS設置

一般在ie中用的是filter:alpha(opacity=0);這個屬性來設置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現兼容

列出display的值并說明他們的作用？

參考答案

display： none | inline | block |

list-item | inline-block | table | inline-table |

inline-box | flexbox | inline-flexbox | flex | inline-flex

默認值：inline

none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間

inline：指定對象為內聯元素。

block：指定對象為塊元素。

list-item：指定對象為列表項目。

inline-block：指定對象為內聯塊元素。（CSS2）

table：指定對象作為塊元素級的表格。類同于html標簽<table>（CSS2）

inline-table：指定對象作為內聯元素級的表格。類同于html標簽<table>（CSS2）

table-caption：指定對象作為表格標題。類同于html標簽<caption>（CSS2）

table-cell：指定對象作為表格單元格。類同于html標簽<td>（CSS2）

table-row：指定對象作為表格行。類同于html標簽<tr>（CSS2）

table-row-group：指定對象作為表格行組。類同于html標簽<tbody>（CSS2）

table-column：指定對象作為表格列。類同于html標簽<col>（CSS2）

table-column-group：指定對象作為表格列組顯示。類同于html標簽<colgroup>（CSS2）

table-header-group：指定對象作為表格標題組。類同于html標簽<thead>（CSS2）

table-footer-group：指定對象作為表格腳注組。類同于html標簽<tfoot>（CSS2）

run-in：根據上下文決定對象是內聯對象還是塊級對象。（CSS3）

box：將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

inline-box：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

inline-flexbox：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

inline-flex：將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

如何居中div, 如何居中一個浮動元素?

參考答案

(1)、非浮動元素居中：可以設置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等

(2)、浮動元素居中:

方法一:設置當前div的寬度，然后設置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。

方法二:父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。

方法三:position定位等等。

CSS中link 和@import 的區別是？

參考答案

(1)、link屬于HTML標簽，而@import是CSS提供的;

(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

(3)、import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;

(4)、link方式的樣式的權重高于@import的權重.

請列舉幾種清除浮動的方法(至少兩種)?

參考答案

(1)、父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優點：簡單、代碼少、容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

建議：不推薦使用，只建議高度固定的布局時使用

(2)、結尾處加空div標簽 clear:both

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

(3)、父級div定義

偽類:after 和 zoom

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。

建議：推薦使用，建議定義公共類，以減少CSS代碼。

(4)、父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

(5)、父級div定義 overflow:auto

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、代碼少、瀏覽器支持好

缺點：內部寬高超過父級div時，會出現滾動條。

建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

block，inline和inlinke-block細節對比？

參考答案

display:block

a、block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。

b、block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。

c、block元素可以設置margin和padding屬性。

? display:inline

a、inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。

b、inline元素設置width,height屬性無效。

c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left,

margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,

margin-bottom不會產生邊距效果。

? display:inline-block

a、簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

補充說明

a、一般我們會用display:block，display:inline或者display:inline-block來調整元素的布局級別，其實display的參數遠遠不止這三種，僅僅是比較常用而已。

b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。

什么叫優雅降級和漸進增強？

參考答案

優雅降級： Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。

說說浮動元素會引起的問題和你的解決辦法

參考答案

問題：

（1）父元素的高度無法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素會跟隨其后

（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對于問題(1)，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear:

both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

(1)、額外標簽法，<div

style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。）

(2)、使用after偽類

parent:after{

content:" ";

height:0;

visibility:hidden;

display:block;

clear:both;

}

(3)、浮動外部元素

(4)、設置overflow為hidden或者auto

你有哪些性能優化的方法？

參考答案

回答一：

（1）、減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存

，圖片服務器。

（2）、前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數

（3）、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

（4）、當需要設置的樣式很多時設置className而不是直接操作style。

（5）、少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

（6）、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

（7）、圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳。

回答二：

(1)、減少HTTP請求次數

(2)、使用CDN

(3)、避免空的src和href

(4)、為文件頭指定Expires

(5)、使用gzip壓縮內容

(6)、把CSS放到頂部

(7)、把JS放到底部

(8)、避免使用CSS表達式

(9)、將CSS和JS放到外部文件中

(10)、避免跳轉

(11)、可緩存的AJAX

(12)、使用GET來完成AJAX請求

為什么要初始化CSS樣式？

參考答案

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是： {padding: 0; margin: 0;} （不建議）

解釋下浮動和它的工作原理？清除浮動的技巧？

參考答案

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

(1)、使用空標簽清除浮動。

這種方法是在所有浮動標簽后面添加一個空標簽定義css clear:both. 弊端就是增加了無意義標簽。

(2)、使用overflow。

給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

(3)、使用after偽對象清除浮動。

該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像素；

CSS樣式表根據所在網頁的位置，可分為哪幾種樣式表？

參考答案

行內樣式表，內嵌樣式表，外部樣式表

談談你對CSS中刻度的認識？

參考答案

在CSS中刻度是用于設置元素尺寸的單位。

a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0

b、一些屬性可能允許有負長度值，或者有一定的范圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。

c、長度單位包括：相對單位和絕對單位。

相對長度單位有： em, ex, ch, rem, vw, vh, vmax,

vmin

絕對長度單位有： cm, mm, q, in, pt, pc, px

絕對長度單位：1in=2.54cm=25.4 mm=72pt=6pc=96px

文本相對長度單位：em

相對長度單位是相對于當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數)

body { font-size: 14px; }

h1 { font-size: 16px; }

.size1 p { font-size: 1em; }

.size2 p { font-size: 2em; }

.size3 p { font-size: 3em; }

文本相對長度單位：rem

rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數

只相對于根元素的大小

瀏覽器的默認字體大小為16像素，瀏覽器默認樣式也稱為user agent stylesheet，就是所有瀏覽器內置的默認樣式，多數是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。

請你說說em與rem的區別？

參考答案

rem

rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數

只相對于根元素的大小

rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。

作用：利用rem可以實現簡單的響應式布局，可以利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕分辨率變化時讓元素也變化，以前的天貓tmall就使用這種辦法

文本相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸(默認16px)。(相對父元素的字體大小倍數)

em（font size of the element）是指相對于父元素的字體大小的單位。它與rem之間其實很相似，區別在。（相對是的HTML元素的字體大，默認16px）

em與rem的重要區別：它們計算的規則一個是依賴父元素另一個是依賴根元素計算

請你說說box-sizing屬性的的用法？

參考答案

設置或檢索對象的盒模型組成模式

a、box-sizing:content-box： padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即( Element width=width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現為標準模式下的盒模型。

b、box-sizing:border-box： padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即( Element width=width ) 此屬性表現為怪異模式下的盒模型。

瀏覽器標準模式和怪異模式之間的區別是什么？

參考答案

在“標準模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設計、并未嚴格遵循W3C 標準的網頁而產生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個完整的DOCTYPE則瀏覽器將會采用標準模式，而如果它缺失則瀏覽器將會采用怪異模式。

強烈建議閱讀加深理解：怪異模式（Quirks Mode）對 HTML 頁面的影響，這里列下瀏覽器標準模式和怪異模式的區別：

（1）盒模型：

在怪異模式下，盒模型為IE盒模型而非標準模式下的W3C 盒模型：在 IE 盒模型中，

box width=content width + padding left + padding right + border left + border

right，

box height=content height + padding top + padding bottom + border top +

border bottom。

而在 W3C 標準的盒模型中，box 的大小就是 content 的大小。

（2）圖片元素的垂直對齊方式:

對于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認取值為baseline。而當inline元素的內容只有圖片時，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認為bottom，因此，在圖片底部會有幾像素的空間。

（3）<table>元素中的字體:

CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下，對于table 元素，字體的某些屬性將不會從body或其他封閉元素繼承到table中，特別是 font-size屬性。

（4）

內聯元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素無法自定義大小，而在IE Quirks Mode 下，定義這些元素的width和height 屬性，能夠影響該元素顯示的大小尺寸。

（5）

元素的百分比高度:

a、CSS 中對于元素的百分比高度規定如下，百分比為元素包含塊的高度，不可為負值。如果包含塊的高度沒有顯式給出，該值等同于“auto”（即取決于內容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。

b、當一個元素使用百分比高度時，在IE Standards Mode 下，高度取決于內容的變化，而在Quirks Mode 下，百分比高度則被正確應用。

（6）

元素溢出的處理：

在 IE Standard Mode 下，overflow取默認值 visible，即溢出可見，這種情況下，溢出內容不會被裁剪，呈現在元素框外。而在Quirks Mode 下，該溢出被當做擴展box來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容。

怪異Quirks模式是什么，它和標準Standards模式有什么區別？

參考答案

從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：總體會有布局、樣式解析和腳本執行三個方面的區別。

盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

（還有很多，答出什么不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）

說說你對邊距折疊的理解?

參考答案

外邊距折疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距（margin）

相鄰：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要么是兄弟關系或者父子關系

垂直方向外邊距合并計算:

a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。

b、參與折疊的margin 都是負值：取的是其中絕對值較大的，然后，從0 位置，負向位移。

c、參與折疊的margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然后，和正margin 值中最大的 margin 相加。

內聯與塊級標簽有何區別？

參考答案

Html中的標簽默認主要分為兩大類型，一類為塊級元素，另一類是行內元素，許多人也把行內稱為內聯，所以叫內聯元素，其實就是一個意思。為了很好的布局，必須理解它們間的區別。

說說隱藏元素的方式有哪些？

參考答案

a、使用CSS的display:none，不會占有原來的位置

b、使用CSS的visibility:hidden，會占有原來的位置

c、使用HTML5中的新增屬性hidden="hidden"，不會占有原來的位置

為什么重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？

參考答案

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的。但這樣會有很多兼容問題。

a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b、使用CSSReset可以將所有瀏覽器默認樣式設置成一樣。

c、normalize：也許有些cssreset過于簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。

天貓使用的css reset重置瀏覽器默認樣式：

@charset

"gb2312";body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd,

ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td

{margin: 0;padding: 0}body, button, input, select, textarea

{font: 12px "microsoft yahei";line-height: 1.5;-ms-overflow-style: scrollbar}h1,

h2, h3, h4, h5, h6 {font-size: 100%}ul, ol {list-style: none}a

{text-decoration: none;cursor:pointer}a:hover

{text-decoration: underline}img {border: 0}button, input, select,

textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}.clear

{clear:both}.fr {float:right}.fl {float:left}.block

{display:block;text-indent:-999em}

談談你對BFC與IFC的理解？(是什么，如何產生，作用)

參考答案

(1)、什么是BFC與IFC

a、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態。一個框在常規流中必須屬于一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生作用。

b、BFC是W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。

c、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬于這兩者。并且，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 里格式化。

(2)、如何產生BFC

當一個HTML元素滿足下面條件的任何一點，都可以產生Block Formatting Context：

a、float的值不為none

b、overflow的值不為visible

c、display的值為table-cell, table-caption, inline-block中的任何一個

d、position的值不為relative和static

CSS3觸發BFC方式則可以簡單描述為：在元素定位非static，relative的情況下觸發，float也是一種定位方式。

(3)、BFC的作用與特點

a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋

如果一個浮動元素后面跟著一個非浮動的元素，那么就會產生一個重疊的現象。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態，當float不為none時，position為absolute、fixed時元素將脫離標準流。

說說你對頁面中使用定位(position)的理解？

參考答案

使用css布局position非常重要，語法如下：

position：static | relative | absolute | fixed |

center | page | sticky

默認值：static，center、page、sticky是CSS3中新增加的值。

(1)、static

可以認為靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

(2)、relative

相對定位，對象遵循常規流，并且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

(3)、absolute

a、絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。

b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

(4)、fixed

固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨著滾動。

(5)、center

與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）

(6)、page

與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）

(7)、sticky

對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）

如何解決多個元素重疊問題？

參考答案

使用z-index屬性可以設置元素的層疊順序

z-index屬性

語法：z-index: auto | <integer>

默認值：auto

適用于：定位元素。即定義了position為非static的元素

取值：

auto：元素在當前層疊上下文中的層疊級別是0。元素不會創建新的局部層疊上下文，除非它是根元素。

整數：用整數值來定義堆疊級別?？梢詾樨撝?。說明：

檢索或設置對象的層疊順序。

z-index用于確定元素在當前層疊上下文中的層疊級別，并確定該元素是否創建新的局部層疊上下文。

當多個元素層疊在一起時，數字大者將顯示在上面。

在線咨詢

上一篇：那十年，微博都曾發布了些什么？（七）
下一篇：使用C 開發HTTP服務器系列之實現Get和Post

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

剖析一些經典的CSS布局問題，為前端開發+面試保駕護

parent:after{

您的項目需求