盒子模型
其实，css 就三个大模块：盒子模型、浮动、定位，其余的都是细节。这三部分要求非常精通。
所谓的盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
页面的布局都是由盒子组成
盒子边框border
边框就是最外的一层
语法 border： border-width|| border-style || border-color
盒子边框写法总结
表格的细线边框
以前学过的html 表格边框很粗，这里只需要css一句话就可以美观起来。让我们相信，css 就是我们的白马王子
table{border-collapse:collapse;}collapse是合并的意思。
圆角边框
语法格式
border-radius：左上角 右上角 右下角 左下角；
内边距（padding）
padding 属性一年工业设置内边距。是指边框与内容之间的距离
padding-top ：上边距
padding-right：右边距
padding-botton：下边距
padding-left：左边距
外边距 margin
margin 属性用于设置外边距。设置外边距会在元素之间创建空白，这段空白不能放置其他内容
margin-top；上边距
margin-right：右边距
margin-botton；下边距
margin-left 左边距
margin 上 右下左
为面积实现盒子居中
可以让一个何止实现水平居中，需要满足以下两个条件：
1.必须是块级元素
2.何止必须制定宽度
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局
header{with:996px;margin:0 auto }
css 清除默认的边距
为了兼容性，不同的浏览器默认的边距不一样
* {
padding:0;
margin:0;
}
行内元素只有左右边距没有上下边距。尽量不要给行内元素指定上下的边距
外边距合并
使用margin 定义块元素的垂直外边距时，可讷讷会出现外边距的合并
解决方法 避免这样使用。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上边距及边框，则父元素的上边距与子元素的上边距发生合并，合并后的外边距为两者中的较大者，及时父元素的上边距为0，也会发生合并。
解决方案：
1 可以为父元素定义1 像素的上边框或上边距
2 可以为父元素添加overflow：hidden
盒子的宽度和高度
使用宽度属性width和高度属性height 可以对盒子的大小进行控制
使用宽度属性width 和高度属性height 可以对盒子的大小进行控制。
width和height 的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
/*外盒尺寸计算/
Element空间高度= content height + padding + border + margin
Element空间宽度= content width = padding + border + margin
内盒尺寸计算
Element Height= content height + padding+border (height为内容高度)
Element width = content width = padding + border (width 为内容宽度)
注意：
1.宽度属性width 和高度属性height 仅仅适用于块级元素，对行内元素无效
- 计算何止模型的总高度时，还应该考虑上下两个盒子垂直外边距合并的情况。
3.如果一个盒子没有给制定宽度、高度、或者继承父亲的宽度、高度，则padding 不会影响本盒子的大小（重点）
盒子模型布局稳定性
开始学习盒子模型，分不清内外边距的使用，什么情况系使用内边距，什么情况下使用外边距？
答案是：其实他们大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。那个方便就用哪个。
按照优先使用 宽度（width）其次使用内外边距（padding）再次外边距（margin）
原因：
- margin 会有外边距合并黑油ie6下面margin加倍bug（讨厌）所以最后使用。
2.padding 会影响盒子的大小，需要进行加减计算其次使用。 - width 没有问题 我们京城使用宽度剩余发 高度剩余发来做
CSS3盒子模型
CSS3可以通过box-sizing来制定盒子模型，及是制定为content-box、border-box，这样我们计算盒子大小的范式就分为两种情况
1、box-sizing：content-box 盒子大小为width+padding+border content-box：此值为其默认值，其让元素维持W3C的标准Box Mode
2、box-sizing：border-box 盒子大小为width 就是所padding 和borde是包含在width中的。
盒子阴影
语法格式
box-shadow：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内、外阴影；
