前端学习-CSS盒子模型（更新中）

已经听到过很多次，“前端比后端简单多了”，“前端不是有手就行吗”等等。

个人理解，前端入门确实比后端简单，知道了就能写，但是前端永远都是学习不完的，很杂，规模很大，很多更新迭代，也在很多地方看到很多大神把一个简简单单的盒子模型玩出了花。个人认为前端后端并没有什么高低之分，写文章是为了记录自己学习的笔记，成长的过程。

1.W3C盒模型与IE6盒模型

（图片来自网络）

从图可以看出W3C盒子与IE6盒子的区别就是（与下面标准盒模型和怪异盒模型相同）：

W3C: 属性width,height只包含内容content，不包含border，padding。

IE6: 属性width,height包含content，border，padding。

2.相关css属性

1.内容区

放置内容的部分，可以由盒子中的内容撑开，或者设置 width，height 属性来指定固定的大小。

div{
    width: 100px;  /*宽度*/
    height: 100px;  /*高度*/
}
复制代码

2.padding(内边距，相当于内容四周的填充物)

padding属性接收长度值或百分比值，但是不接收负值：

内边距部分会显示盒子背景；

内边距会撑大盒子的整体大小，但是不会影响内容的大小；

 div{
    padding-top: 10px;   /*上内边距*/
    padding-right: 5px;  /*右内边距*/
    padding-bottom: 5px; /*下内边距*/
    padding-left: 5px;    /*左内边距*/
}
复制代码

/* case 1 */
div{ padding: 10px; } /* 上下左右 全部10px */

/* case 2 */
div{ padding: 10px 5px; } /* 上下 10px    左右 5px */

/* case 3 */
div{ padding: 10px 5px 7px; } /* 上 10px    左右 5px    下 7px */

/* case 4 */
div{ padding: 10px 9px 8px 7px ; } /* 上 10px  右 9px  下 8px  左 7px  即顺时针顺序*/
复制代码

3.border（边框）

值	描述
none	定义无边框。
solid	定义实线。
dotted	定义点状边框，在大多数浏览器中呈现为实线。
dashed	定义虚线，在大多数浏览器中呈现为实线。
double	定义双线。双线的宽度等于 border-width 的值。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

可由统一的border属性来规定边框大小：

/*三个值分别表示： 四周边框大小   边框线类型   边框线颜色 */
div{ border: 5px solid red; } 
复制代码

border也可由分解属性表示：

div{
  border-top: 10px solid red;
  border-right: 5px solid red;
  border-bottom: 7px solid red;
  border-left: 8px solid red;
}
复制代码

还可进一步分解为border-width、border-style、border-color：

/* case 1 */
div{
  border-width: 5px;
  border-style: solid; 
  border-color: red;
}
复制代码

4.margin（内边距，相当于盒子和其他盒子之间的间距）

margin属性的值和padding类似

外边距是在边框外层的，不会显示盒子的背景。

margin允许负值，margin多了左右的auto（自动）值，可以用来将盒子在父级中左右居中；

3.怪异盒模型与标准盒模型

怪异盒模型和标准盒模型的区别在于，width、height所包含的部分不同。

标准盒模型width，height只表示content内容区。

而怪异盒模型的width，height包含content，padding，border部分。

我们可以使用 box-sizing 属性来指定盒模型类型：

标准盒模型：content-box

怪异盒模型：border-box

1.标准盒模型

/*标准盒模型*/
.div1{
    box-sizing: content-box; /*标准盒模型，默认值*/
}
复制代码

2.怪异盒模型

/*怪异盒模型*/
.div2{
    box-sizing: border-box; /*开启怪异盒模型*/
}
复制代码