css盒模型

          超级无敌级别的白话文介绍

盒子简单的来说就是我们平常所使用div，所有的HTML元素可以看作盒子，一般是用来设计和布局时使用。

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

 

下面的图片就说明了盒子模型

简单介绍一下元素

Margin(外边距)  清除边框外的区域，外边距是透明的。

　　margin:上，右，下，左　　　　　　四个值
　　margin：上，左右，下　　　　　　 三个值
　　margin:上下，左右　　　　　　　　两个值
　　margin: 上下左右　　　　　　　 　一个值
左右居中: margin-left: auto;margin-top: 0;

Border(边框)    围绕在内边距和内容外的边框。

　　solid 实线
　　double 双实线
　　dotted 点虚线
　　dashed 线段虚线

Padding(内边距) 清除内容周围的区域，内边距是透明的。

　　与Margin(外边距)同理

Content(内容)   盒子的内容，显示文本和图像。

 注意：

width和height： 内容 的宽度、高度（不是盒子的宽度、高度）；padding：内边距 border：边框 margin：外边距 标准盒子模型 中， width 和 height 指的是内容区域 的宽度和高度。当你指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

 

     ヽ(●-`Д´-)ノ        重要的事情说三遍！！！ 

你设置CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度，不是盒子的宽度、高度！！！

你设置CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度，不是盒子的宽度、高度！！！

你设置CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度，不是盒子的宽度、高度！！！