深度了解盒子模型的原理以及结构

为了使我们充分理解div+css模型的定位功能，就是利用盒子模型这样的布局方式代替了传统的表格布局方式。盒子模型是在学习div+css布局方式中必须要学会的一个模型，通过这个模型你就可以明白网页中div和div之间的相对位置是如何布局的。今天我们就来学习一下盒子模型！

一、盒子模型的定义是什么呢？

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成一个个盒子。盒模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）。转换到我们日常生活中，可以拿红酒来对比，红酒=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个红酒之间的距离。

通常我们设置的宽和高是指“红酒”content的宽度，一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离。

代码示例：

< head lang="en">

​ < title>认识盒子< /title>

​ < style>

​ div{

​ border:2px soild red;

​ height:50px;

​ background-color:pink;

​ }

​ < /style>

​ < /head>

< body>

​ < div>尚学堂</ div>

< /body>

图例为：

二、W3C盒模型

盒模型由内容（content）、填充（padding）、边框（border）、边界（margin）组成。

对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距

border边框

border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。

三要素书写时一般按照如下顺序：

border：宽度、样式、颜色

border：1px solid red；

不过不按照此顺序来写依然能正常显示。

div{border:red soild 2px；}

border-style设置边框的样式，有五种常用样式可选

点状 dotted

实线 solid

双线 double（需要最起码设置为3像素，不然显示不下）

虚线 dashed

无边框 none

三、内边距（padding）

元素的内边距在边框和内容之间，控制该区域最简单的属性是padding属性。

CSS padding属性定义元素边框与元素内容之间的空白区域。

单边设置为：

padding-top/right/bottom/left:value；

value可取值为像素，百分比，但不能为负数

内边距的缩写：

padding：value（四个方向相同）；

padding：value（上下） value（左右）；

padding：value（上） value（左右） value（下）；

padding：value（上） value（右） value（下） value（左）；

四、外边距（margin）

围绕在元素边框的空白区域就是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。

单边设置为：

margin-top/right/bottom/left:vlaue；

value可取值为像素，%，auto,负值

外边距的缩写：

margin：value（四个方向相同）；

margin：value（上下） value（左右）；

margin：value（上） value（左右） value（下）；

margin：value（上） value（右） value（下） value（左）；

码字不易，且看且珍惜！

value（上下） value（左右）；

margin：value（上） value（左右） value（下）；

margin：value（上） value（右） value（下） value（左）；

码字不易，且看且珍惜！