前端面试题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

你可能感兴趣的