CSS盒模型概念

1. 什么是盒模型？

	盒模型（Box Moldel），是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型
	在谷歌阅览器中可以鼠标右键，单击检查，在styles选项中显示盒模型

2. 标准盒模型的概念分析

块级元素的**width(宽)和height(高)**值在标准盒模型下，定义了一个块级元素能够存放内容的区域大小，元素的内容从width和height的左上角原点开始排列内容

块级元素的border的作用是在元素的内容区外加上一个边框线
边框样式的格式为:broder:宽度 种类 颜色;/复合写法/

border-color:颜色; 默认与color样式一致
/* 颜色值: 十六进制, rgb, 关键字, transparent(使用父元素的颜色)*/

border-style:种类; 默认是none 就是没有边框
/*dotted圆点边框, double双边框, dashed虚线边框,solid实线边框 */

元素的边框可以单独给某一方向设置
比如:
设置顶部边框:border-top:宽度 种类 颜色;
设置底部边框:border-bottom:宽度 种类 颜色;
设置左部边框:border-left:宽度 种类 颜色;
设置右部边框:border-right:宽度 种类 颜色;

当然也可以四个边分别设置各自的属性如：
border-top-width: … …
border-left-style: … …
border-right-color: … …

块级元素的padding的作用是在元素的内容区与边框线之间加一个内部间距,用来隔开元素内容和边框线, 使得元素内容更加突出明显, 默认情况下, padding区域的颜色和内容区的颜色保持一致 ，padding也可以单独设置四个方向不同的值, 具体的概念与border相似

3. 尺寸数据详解

box-sizing: border-box;/* 怪异盒模型 */
/* box-sizing: content-box;默认值 ,标准盒模型*/

3.1外边距的简写规则:

margin:10px; 
/* 元素的上右下左四个外边距的值都是10px*/
margin:10px 20px;
 /* 元素的上下两个外边距的值都是10px , 左右两个都是20px*/
margin:10px 20px 30px;
/* 元素的上外边距的值是10px , 左右两个都是20px, 下外边距是30px*/
margin:10px 20px 30px 40px;
/* 元素的上外边距的值是10px , 右是20px, 下外边距是30px,左外边距是40px*/

内边距的简写规则与外边距相同

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

块元素在网页内容中实际占据空间的大小在两种不同的盒模型下的表现结果是:
标准盒模型：
实际宽尺寸=width+左padding+右padding+左border+右border
内容区宽尺寸=width

怪异盒模型：
实际宽尺寸=width
内容区宽尺寸=width-左border-右border-左padding-右padding

ps：其实简单来说，标准盒模型的边框是在内容区content外套上一个border；打个比方，内容区是手机，而border是买手机时外面的包装盒，padding就是包装盒与手机之间的填充区域；怪异盒模型则是类似于一个空间大小已经固定了，然后在这个空间的最边缘（依然在这个空间中）加一个箱子来包裹住除了箱子占地的大小的剩余空间。感觉就像是标准的是向外膨胀，而怪异的则是向内压缩。
高度同理可得…

6. 意外的小错误整理

父子元素外边距合并现象
C是B的子代，B是A的子代。
有时候想要设置C的上外边距，但是连带着B一起向下移动了，也就是B距离A向下移动了，而C却没有距离B向下移动。
解决方法就是：
1.给父级设置一个边框
2.给父级设置内边距
3.溢出隐藏overflow: hidden;
4.给子级或父级任何一方添加display:inlineblock;
5.给子级或父级任何一方添加浮动
6.给子级或父级任何一方添加定位
兄弟元素外边距合并现象
在兄弟AB之间各自设置外边距后，AB之间设置margin会按照AB最大的外边距所决定