前端面试

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;

}