前端面试题css

1.盒子模型
(1)盒模型本质就是一个盒子，封装周围的HTML元素，它包括：边距(margin)，边框(border)，填充(padding)，内容(content)
盒模型允许在其他元素和周围元素边框之间放置元素
(2)margin:外边距，清除边框外的区域，外边距是透明的
border:边框，围绕在内边距和内容外的边框
padding:内边距，清除内容周围的区域，内边距是透明的
content:盒子的内容，显示文本和图像

2.标准盒子(W3C盒子)：box-sizing:content-box;
大小因内容的变化而变化
盒子总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right
盒子总高度
height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
标准盒子也称为内容盒子，特点是：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大 的时候，内容宽度不变，盒子所占的总体宽度要变大

3.边框盒子(IE盒子模型)
box-sizing:border-box;
大小不会因内容的改变而变化
盒子总宽
width+margin-left+margin-right
盒子总高
height+margin-top+margin_bottom