CSS盒模型

CSS框模型

所有HTML元素可被认为是箱。在CSS中，“框模式”一词谈论设计和布局时使用。

CSS框模型本质上是一个盒子，周围的每一个HTML元素包装。它包括：边距，边框，填充和实际内容。

下图说明了盒模型：

不同的部分的说明：

盒子模型允许我们添加一个边框的元素，和元素之间定义的空间。

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

为了在所有浏览器中正确设置元素的宽度和高度，你需要知道的盒模型是如何工作的。

	重要提示：当您使用CSS元素的宽度和高度属性，你刚才设置的内容区域的宽度和高度。要计算元素的全尺寸，还必须添加填充，边框和边距。

假设我们想要的风格<div>元素有350像素总宽度：

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

这里是数学：

320px （宽）
+ 20px （左+右填充）
+ 10px （左+右边框）
+ 0px （左+右页边距）
= 350px

元素的总宽度应计算如下：

共有元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右页边距

一个元件的总高度应该计算如下：

总元素高度=身高+顶部填充+底部填充+上边框+下边框+上边距+底部边距

	注意旧IE：Internet Explorer 8和更早的版本，包括填充和边框width属性。要解决此问题，添加<!DOCTYPE html>到HTML页面。