剖析一些经典的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。现在我们做如下操作:

 <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{

您的项目需求