css盒子模型
css盒子总体概述
看透网页的本质，把网页必成一块块的盒子css其实没有太多逻辑可言，累死我们小时候万的积木，我们可以自由的随意的摆放处想要的效果
所有的文档元素（标签）都会生成一个矩形它描述了一个文档元素在网页布局汇总所占位置的大小，因此每个盒子处理有自己大小和位置，还影响着其他盒子的大小和位置
盒子边框
盒子边框就是那层皮
语法：border：border-width（边框宽度）||border-style（边框样式）||border-color（边框颜色）
边框属性 一遍设置边框样式（bordel-style）边框样式用于定义域面边框的风格，常用属性值：
none：没有边框的意思即忽略边框边框的宽度（默认值）
solid：边框为单位实线（最为常见）
dashed：边框为点线
double：边框为双实线
top为上边框的意思 bottom下边框
表格的细线边框公式：
table（border-collpse：collapse：）
border-collapse：collapse：表示边框合并在一起
相应的问题以及答案
圆角边框
语法格式：border-radish左上角右上角右下角左下角
一个为百分值，两个为对角值，三个为一组对角值+两个确定值，四个为各自的精确值
内边距
padding属性用于设置内边距，是指边框与内容的距离
padding-top上内边距
padding-rightyou内边距
padding-bottom下内边距
padding-left左内边距
注意：后面跟几个数值表示的意思是不一样的值得个数：表达的意思
一个数：padding上下左右边距
两个数：padding上下边距
三个值：padding上边距左右边距下边距
四个数：padding上下左右内边距
外边距
margin属性用国语设置外边距，设置外边距会在元素之间创建空白，这段空白通常不能放其他内容
公式：margin-top上边距
margin-right右边距
margin-bottom下外边距
margin-left上外边距
margin：上下左右外边距（取值顺序与内边距相同）
外边距与盒子居中
可以让一个盒子实现水平居中，需要满足两个条件：1.必须是块级元素2.盒子必须制定了宽度
然后就给左右的外边距都设为auto就可使块级元素水平居中了（实际工作中常用这种方式加您性网站布局）
实例：.header{width：960px：morgin：0auto}
盒子内的位子水平居中：text-align：cenger
盒子水平居中 左右margin改为auto就可以了
插入图片更改是width和height
背景图片更改大小只能使用 background-size
背景图片更改位置我们用packground-position
一般情况下背景图片适合做一些小图标使用
清楚元素的默认从内而外边距
为了更方便的控制网页中的元素，只做网页时，
可以使用如下代码{padding：（）清楚内边距}
{margin： （）清除外边距}
注意：行内元素是只有左右内边距的，是没有上下内外之分的
我们尽量不要给行内元素制定上下的内外边距就好了
外边距合并
使用margin定义矿元素的垂直外边距时，可能会出现外边距合并。
相邻块元素垂直外边距的合并
当上下相邻的两块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上边距margin-top则他们之间的垂直间距不足margin-bottom与margin-top之和而是两者之间的较大值这种现象北城为边距合并也称边距塌陷
嵌套块状元素垂直外边距的合并
对两个桥套关系的块元素，如果子元素没有上边距积边框，则父元素的上外边距会与子元素的上外边距发生合并，并和之后的外边距为两者中的较大者，即使父元素上外边距为0，也会发生合并
解决方案：1.可以为父元素定义像素的上边框或内边框
2.可以为父元素添加overflow：hidden
content宽度和高度
使用款式不行width和高度属性height可以对黑子的大小进行控制。
外盒尺寸计算：element空间高度=content+padding+border+margin
element 空间宽度=content width+padding+border+margin
内核尺寸计算（元素大小） =content height+padding+border（height为内容高度）
element width=content width+padding+border（width为内容高度）
注意：1.宽度属性width和高湿度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）2.计算盒子明星的总高度是，还考虑上下两个盒子垂直外边距合并的情况
width和height的属性值可以为不同的单位的数值换货相对于父元素的百分比%实际工作中最常用的像素值
大多数浏览器，如firefoe，IE6以及上版本都采用了w3c规范，复合css规范的盒子模型的总宽度和总高度的计算原则
盒子模型布局稳定性
开始学习盒子模型，同学们最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，是什么时候使用外边距
答案是：其实他们大部分情况下是可以混同的，就是说，你用内边距也可以，用外边距也可以，那个方便赢那个
休闲顺序： 宽度内边距，外边距
