css盒子模型

**

初始定义

CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。
如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

盒子模型模式

一个盒子我们会分成几个部分：
–内容区(content)
–内边距(padding)
–边框(border)
–外边距(margin)
内容区为文本内容,
边框具体可表示为以下
可以在标签周围创建边框，边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框：
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。
边框可以设置样式：
dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线）

border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框

内边距
内边距会影响整个盒子的大小。
使用padding属性来设置标签的内边距。
外边距
外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的 。
所以水平居中也可以简写为margin:0 auto。