盒子模型

块级元素盒子模型：

/*块级元素的盒子模型*/

/*设置内容区的高度和宽度
  width/height：
  内容区放置子元素
*/
.content {
  width: 100px;
  height: 100px;
}

/*设置边框
  border-width：边框的宽度
  border-color：边框的颜色
  border-style：边框的样式
      none，默认值，无样式
      solid，实线
      dotted，点状边框
      dashed，虚线
      double，双线
  均可分别指定4边
  大部分浏览器中，边框的宽度和颜色有默认值
  也可直接简写为border(同时指定4边)：
*/
.border {
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

/*设置内边距
  padding-top/right/bottom/left
  内边距影响盒子的可见框大小，背景色延伸进内边距
*/
.padding {
  padding: 10px;
}

/*设置外边距
  margin-top/right/bottom/left
  不影响可见框的大小，影响盒子的位置
  设置top和left时，自身位置改变；设置bottom和right时，改变其他盒子位置
  可指定为负值，元素反方向移动
  auto一般只设置给水平方向
  垂直方向margin指定为auto，则为0；水平方向上为最大
  *垂直外边距的重叠：
      相邻兄弟元素之间的外边距取其中最大值，不取和
*/
.margin {
  margin: 0 auto;
}

内联元素盒子模型：

/*内联元素盒子模型*/

/*内联元素不能设置width/height*/
/*可以设置水平内边距*/
/*可以设置垂直内边距*/
/*可以设置边框*/
/*支持水平方向外边距，不支持垂直外边距*/

补充：

/*通过display可以改变元素的显示方式
      inline：作为内联元素显示
      block：作为块级元素显示
      inline-block：行内块元素显示
          可以设置width/height，又不独占一行
*/
/* display:none
   使用该方式，元素不显示，并且不占据页面位置
*/
/* visibility:visible/hidden
   使用该方式隐藏，元素不显示，但位置保留
*/