css盒模型

CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）

所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）

内容 content

概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。

width作用：设置宽高

取值：auto默认值。浏览器可以计算出实际的宽度

px

百分比

height

作用：设置高度

取值：auto默认值。浏览器可以计算出实际的宽度

px

百分比

边框 border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。

border-width边框宽度

作用：设置边框宽度，或者单独为各边边框设置宽度

取值：长度值

不允许指定负长度值

语法：

空格隔开1-4个值

1个值 设置所有边框宽度

2个值 设置上下、左右

3个值 设置上、左右、下

4个值 设置上、右、下、左

border-style边框样式

作用：设置标签所有边框的样式，或者单独地位个边框设置边框样式

取值：

none定义无边框

dotted定义点状边框

dashed定义虚线

solid定义实线

doubl定于双线

语法

1个值 设置所有边框

2个值 设置上下、左右

3个值 设置上、左右、下

4个值 设置上、右、下、左

border-color边框颜色

作用：设置边框颜色，或者单独为各个边框设置颜色

取值:颜色的名称，例如red

rgb值：如rgb（255，0，0）

16进制，如#ff0000

语法

1个值设置所有边框

2个值设置上下，左右

3个值设置上，左右，下

4个值设置上，下，左，右

内边距 padding

CSSpadding（内边距）属性，定义元素边框与元素内容之间的空间。 padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

单个方向设置

padding-bottom 设置标签的下内边距

padding-left 设置标签的左内边距

padding-right 设置标签的右内边距

padding-top 设置标签的上内边距

外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

单个方向定义

margin-bottom 设置下内边距

margin-left 设置左内边距

margin-right 设置右内边距

margin-top 设置上内边距