前端面试题型1

1. css盒子模型

css盒子模型(Box Model) ：包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）四个要素。
有两种盒子模型：

W3C的标准盒模型（标准的盒子模型）：

在标准的盒子模型中，width指content部分的宽度
在标准的盒子模型中，height指content部分的高度

元素框的总宽度 = 元素(content)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素(content)的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

IE的盒模型：

在IE盒子模型中，width表示content+padding+border这三个部分的宽度之和
在IE盒子模型中，height表示content+padding+border这三个部分的宽度之和

总宽度=margin-left + margin-right + width
总高度=margin-top + margin-bottom + height

2. CSS3的box-sizing

如果想要*的切换这两种盒模型，这里需要借助css3的box-sizing属性
box-sizing语法：

box-sizing ： content-box || border-box || inherit;
默认值是：content-box

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是W3C盒子模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算，也是IE盒子模式；
inherit , 规定应从父元素继承 box-sizing 属性的值