学习笔记CSS盒模型

一、盒模型（Box Model）

        在学习CSS的布局之前需要先了解一下布局的对象是什么。所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

        margin：边距/外边距，清除边框外的区域，外边距是透明的；

        border：边框，围绕在内边距和内容外的边框；

        padding：填充/内边距，清除内容周围的区域，内边距是透明的；

        content：内容，盒子的内容，显示文本和图像。

        通过CSS设置元素的高度和宽度，实际设置的是content（内容）部分的高度和宽度而不是整个盒子的宽度和高度，而整个盒子的宽度是：（内容宽度 +padding宽度 + border宽度 + margin宽度）之和。只要改四个中的其中一个，都会导致盒子宽度的改变，这对于布局来说并不友好，为了消除这种差异，CSS新增了box-sizing属性，现在通过CSS设置的宽度300px是content+padding+border。