盒模型

一、盒模型

盒模型的组成包括外边框（margin）、边框（border）、内边框（padding）、还有内容区（content）。

盒模型，在html中，所有的HTML元素都可以当作是一个盒子，用来描述该元素在文档布局中所占空间。盒模型分为标准盒模型（即w3c标准盒模型）和怪异盒模型（即IE标准盒模型）。

就好比2个纸箱，每个纸箱里都放着一瓶水，盒模型就是这种情况。

两个箱子之间的距离就是margin；箱子皮的厚度就是border；箱子与水之间的距离就是padding；而水占的位置就是内容。

如下图：（注：margin本身的有bug）

 

 

 

二、标准盒模型和怪异盒模型的区别

定两盒子，一个设为怪异盒子box-sizing: border-box，一个则为标准盒模型：

 

 

 

怪异盒子border-box得到的盒模型数据：

 

 

 

标准盒子content-box得到的盒模型数据：

 

 

 

 

可以看出两者的区别：标准盒子添加padding或者border时，元素的width会被撑大，变为content+修改后的padding+修改后的border。而怪异盒子添加padding或者border之后，元素的width是没变的，而content区的大小会被修改。

简单的说就是，一个width为100px的标准盒子，你给它添加10px的border值之后，这个标准盒子的width就变成110px了，而一个width为100px的怪异盒子，你给它添加一个10px的border，这个怪异盒子的width值还是100px，变的是内容区content的值，此时的content为90px。

 

结论：

标准盒模型的总宽度：width+padding+border+margin

怪异盒模型的总宽度：width（content+padding+border）+margin

三、盒模型属性

1、边框border：

设置边框粗细border-width：

border-width：size;

设置边框样式border-style：

border-style:solid/dashed/dotted/double;

设置边框颜色border-color：

例如border-color:  red  ;

也可以组合着写：例如border：1px solid #fff;

2、外边框margin

作用是控制同辈元素之间的位置关系

上外边框margin-top: size;

右外边框margin-right: size;

下外边框margin-bottom: size;

左外边框margin-left: size;

可组合着写：

margin： 上  右  下  左；  //四个值，分别代表上下左右

margin： 上  右&左  下；   //三个值，分别代表上、左右、下

margin： 上&下  右&左；     //两个值，分别代表上下、左右

margin： 上&右&左&下；     //一个值，代表上下左右

注：

① margin可以负值

② 上下两个margin值会重复，显示大的margin值

③ 当给父元素的第一个块级子元素添加margin-top时，会错误的添加给父元素，此时，给父元素添加overflow：hidden;或者给父元素加边框或是父、子元素都浮动即可解决。这个时候也可以不用margin，改用padding。

 

3、内边框padding

作用是控制元素和内容之间的位置关系，控制父元素和子元素的位置关系。

上内边框padding-top:size;

右内边框padding-right:size;

下内边框padding-bottom:size;

左内边框padding-left:size;

可以组合写，其方法和margin相同；