CSS

1 行内元素之间为什么会产生缝隙？

  • 元素之间的换行和空格引起的

2 css如何实现垂直居中？

  • 外层元素设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// html
<div id="wrapper">  
    <div id="cell">
        <div class="content">Content goes here</div>
    </div>
</div>
// css
#wrapper {
    display: table;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}
  • 绝对定位+margin负值
  • 绝对定位+margin设置auto + 上右下左设置为0
  • 设置高度和行高相同(适用于单行文本&按钮文本)

3 什么是BFC
答：BFC即Block Formatting Contexts (块级格式化上下文)，属于定位中的普通流
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发BFC

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

4 如何清除浮动

  • 使用overflow属性来清除浮动

  • 使用额外标签法

1
2
3
.clear{
    clear:both;
}
  • 使用伪元素和zoom清除浮动
1
2
3
4
5
6
7
8
9
10
.clearfix:after{
　　　content: "";
　　　height:0;
　　　line-height:0;
　　　visibility:hidden;
　　　clear:both//清除浮动
}
.clearfix{
    zoom:1;为了兼容IE
}

5 如何理解flex布局