面试准备：html/CSS

html

BFC(block formatting context)refer

以下触发BFC：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
通常运用overflow:hidden（BFC属性）解决两个块的margin重叠、两栏格局、子浮动父高度塌陷
元素可以触发BFC，则无需使用clear:both 来解除其带来的影响。

行内元素和块级元素refer

行内元素和块状元素置换可以通过设置display & float（脱离文档流）

CSS

link tag vs. @import

link HTML范畴，是XHTML标签，无兼容问题
link可以引用样式文件，图片等资源文件：

link引用的CSS会同时被加载 link支持使用javascript控制dom去改变样式

import CSS范畴
import 在IE5以上支持，是css2.1新增，只可以引用样式文件
@import引用的CSS会等到页面全部被下载完再被加载
@import无法支持Javascript控制DOM改变样式

文档流refer

所有div 按顺序排列形成文档流，如果有一div脱离文档流，会导致补上的div被覆盖。
目前常见的会影响元素脱离文档流的css属性有：
①float浮动。 -> 解决覆盖问题：中间建立一个新div {clear:both}
②position的absolute和fixed定位。 -> 解决覆盖问题：建立一个新div3 代替div2 设置和div1高度一样，恢复和原来未改变的文档流

CSS的继承属性

总之，有继承的属性： 颜色、文字、字体间距行高对齐方式和列表的样式。
所有元素可以继承包括： visibility, cursor
内联元素可以继承包括：letter-spacing, word-spacing, white-space, line-height, color, font, font-family, font-size, font-style, font-variant, font-weight, text-decoration, text-transform, direction
终端块状元素可以继承包括：text-indent, text-align
列表元素可以继承包括：list-style, list-style-type, list-style-position, list-style-image

eg. vertical-align, background-color, justify-content不是继承属性。

浮动元素

行内元素和浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上。块状元素和浮动元素发生重叠，边框、背景会显示在浮动元素下面，但是内容会显示在浮动元素之上。

优化CSS图片加载

CSSSprite：减少对服务器的请求次数
SVGSprite, Iconfont
Base64：两种方法，但是浏览器不会缓存这种图片
第一种：运用css样式：url引用base64编码后的数据
后台处理（import org.apache.commons.codec.binary.Base64;）
第二种：后台处理
byte[] is = …;
String s = new String(Base64.encodeBase64(is));
后台将图片的byte数组用base64编码后，转成字符串传递到前端放到对应位置即可

CSS2 CSS3 垂直居中/水平居中refer

水平居中
CSS2：

1. 行内水平居中

.parent{
text-align: center;
}
.son{
display:inline-block;
}

2. 块内水平居中

.parent{
text-align: center;
}
.son{
width: 200px;
margin:0 auto;
}

CSS3：
1）定位+平移

.parent{
position:relative;
}
.son{
position: absolute;
left:50%;
transform:translateX(-50%);  //平行向左平移自身的50%