CSS样式表

盒子的分类、组成、盒模型、边框、内边距、外边距

1.盒子的分类：首先，不同的元素产生的盒子类型都是不同的，一个元素产生一个盒子，去决议它的CSS的display属性，其中有display：inline（行盒）display：block（块盒）display：inline-block行内块盒.

2.盒子有内边距、外边距盒边框组成.

3.盒模型：用于存放文本或其它元素的区域，类似于一个箱子中存放东西；它的相关CSS属性：宽度和高度（都是不可继承 默认值为auto,它的取值有像素、绝对长度、固定长度）

——边框盒：border-box 由border、padding和content组成 浏览器调试时，页面中显示的元素尺寸就是指边框的尺寸。元素的背景默认值覆盖边框盒，可以通过background-clip属性修改

——填充盒：padding-box由paddincontent组成，其中overflow指代的是溢出的填充盒

——内容盒：content-box由content-box组成，overflow：hidden；表示内容隐藏（隐藏padding以外的内容），超出部分出现滚动条、当子元素浮动的时候，会找回父级的高度【overflow：hidden写在浮动元素的父级身上】

，overflow：inherit；强制执行父级，overflow：scroll；表示垂直和水平方向显示滚动条，overflow：auto；表示有溢出的方向显示滚动条

——盒子的计算：box-sizing：content-box的情况下，box-sizing：border-box的情况下

4.边框：boder 分割内部和外部的界限，由四个部分组成类似于一个箱子壁。他的粗细一般设置在1-3px，可设置样式，颜色，边框颜色的默认值是根据当前区块中的文本颜色改变的

5.内边距：padding 表示内容到边框的距离分为top、right、bottom、left 默认值都为0px，快速写法有：①top bottom/left rigth ②top/left rigth/bottom③top rigth bottom left

6.外边距：margin 表示边框与盒子相邻的距离，他是边框内容与外面的距离默认值为0px,分为op、right、bottom、left 默认值都为0px，快速写法有：①top bottom/left rigth ②top/left rigth/bottom③top rigth bottom left和padding大致相同