1 前端设计模式
单例模式
观察者模式
工厂模式
命令模式
职责链模式
2 两种盒子模型（框模型)的区别
普通的W3C盒模型和IE盒模型，主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。
3 垂直水平居中实现
行内水平：text-align:center
块状元素的水平居中：margin: 0 auto;
水平对齐+行高
text-align + line-height实现单行文本水平垂直居中
(2)水平+垂直对齐
①text-align + vertical-align 在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素。
②若子元素是图像，可不使用table-cell，而是其父元素用行高代替高度，且字体大小设为0。子元素本身设置vertical-align:middle;
(3)相对+绝对定位
使用absolute，利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin: auto;
（4） translate()函数可以在不知道自身宽高的情况下，利用它进行水平垂直居中。但是，有兼容性问题，支持IE9+的游览器。
（5） 场景：使用背景图片属性，使图片在父元素的盒子中始终居中，但是，背景图片的尺寸大小不固定。
关键：background-position:center center;(background-position:50% 50%;)属性。
使用translate函数，配合left，top属性，可以让目标元素始终保持水平垂直居中，当游览器窗口发生变化时，也能一直保持水平垂直居中。
（6）background-position属性默认值为0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。使用background-position:center center;/background-position:50% 50%;这样就可以使背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置。
4 css画特殊图形
.div{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color:#FFCCCC transparent transparent transparent;
}
