前端面试题HTML+CSS基础篇——css盒模型

前端面试题HTML+CSS基础篇——css盒模型

1. 什么是css盒模型

css盒模型就是用来装页面上元素的矩形区域，css盒模型包括IE盒模型和标准的W3C盒模型

2. IE盒模型和标准盒模型

IE盒模型和标准盒模型的区别在于盒子的实际宽度和实际高度不同

IE盒模型中盒子的宽度=左右padding+左右border+contentWidth（内容的实际宽度）
IE盒模型中盒子的高度=上下padding+上下border+contentHeight（内容的实际高度）

标准盒模型中盒子的宽度=contentWidth（内容的实际宽度）
标准盒模型中盒子的高度=contentHeight（内容的实际高度）

3.box-sizing

box-sizing是告诉浏览器如何计算盒子的宽度和高度
box-sizing有三个取值，分别为border-box、content-box、inherit

content-box：这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承 box-sizing 属性的值。

• 标准盒模型box-sizing=content-box
• IE盒模型box-sizing=border-box（包含内边距padding和边框border）