*此文档仅作为自己复习css时使用 将最基础的写在这 此次资料来源于pinkTc的video
一：盒模型 (box model)
简单点来说盒子模型就是把html中的布局元素看作是一个矩形的盒子
组成：
①border：边框
②content：文字内容
③padding：文字内容与边框之间的边距(内边距)
④margin：边框以外（盒子和盒子之间）的间距（外边距）
css盒子模型本质上是一个盒子,封装周围的html元素，它包括以上的内容
①border：边框(影响盒子模型的大小)
由边框宽度、样式以及颜色组成
add：表格的细线边框border-collapse 控制相邻单元格的边框 （collapse属性值表示相邻边框合并）（给表格设置边框时会出现单元格边框之间的合并，这样就会解决 ）
边框会影响盒子的实际大小，所以1.测量盒子的时候不测量边框2.如果测量了边框，则需要宽/高减去边框的宽度（记住要减2次）
②content：文字内容
默认出现在盒子的左上顶部（因浏览器而异）
③padding：文字内容与边框之间的边距（也会影响盒子模型的大小）
指定padding值之后，内容和边框之间有了间距，影响了盒子的实际大小（撑大了），也就是说如果盒子已经有了宽度和高度，此时在增加内边距就会撑大盒子，如果我们想要盒子跟ui提供的效果图大小一样，则让宽/高减去多出的内边距大小即可（同border类似）
padding的用于还是非常广泛的 比如果在一个侧边栏中文字距离左边框的距离一般不会有文本缩进（text-indenr）而是会直接用padding，这样会更加准确
如果一个元素没有给宽度/高度，那么此元素的宽/高将继承父元素的宽/高
如果没有给块状元素宽/高，那么此时padding不会撑开此盒子的宽/高
比如说一个盒子里面嵌套这一个子元素 如果没给定此元素的宽高，则此元素会继承父元素的宽高，此时给子元素一个padding值时是不会撑开此盒子的，但是如果给定了宽度/高度 则回撑开此盒子
在这里为什么要说影响盒子模型的大小（撑开了呢）如果在我们的实际开发中 ，刚开始我们都预定好了box的宽度 并且已经布局完毕，当我们添加具体内容时，如果改变盒子模型的某些值得话因此就会影响到该盒子的大小，继而影响到其他与之相临的盒子（比如父元素的宽度固定了 ，可能会将另一个盒子挤下来），后期也有两个具体的属性来控制各自大小
④margin：外边距（盒子与盒子之间的距离）
1. 典型应用：块级盒子实现水平居中显示
条件：①块级盒子必须指定宽度②左右外边距设置auto（此方法对于行内元素和行内块元素无效，要想使其水平居中 可以text-align）
2.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的块状元素有margin-bottom，下面的元素有margin-top，则它们之间的垂直间距不是bottom和top的和，而是取两者值中最大的一个生效，这种现象称为相邻块元素垂直外边距的合并。所以说要想解决此现象可以只给一个盒子外边距
嵌套块元素垂直外边距的塌陷
父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，如果此时想让子元素与父元素有间隔，给子元素设置margin-top会无效（父元素连通子元素一起向下移动较大一个的margin-top值）
解决的方法：1.为父元素定义上边距 2.为父元素定义上内边距 3.为父元素添加overflow：hidden
margin部分有点混乱，BFC规范 明天再继续补充下
