CSS盒模型

Box Model(盒子模型)：

盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：内容:content外边距：margin，内边距：padding，边框：border。它允许我们在其它元素和周围元素边框之间的空间放置元素。

 

1. Margin（外边距）--- 清除边框区域。没有背景颜色，是完全透明
2. Border（边框）--- 边框周围的填充和内容。边框是受到盒子的背景颜色影响
3. Padding（内边距）--- 清除内容周围的区域。会受到框中填充的背景颜色影响
4. Content（内容）--- 盒子的内容，显示文本和图像

边框 (border) ：

可以是围绕元素内容和内边距的一条或多条线，这些线条，可以自定义它们的样式、宽度及颜色。

边框样式 ：border-style定义边框的样式，设置元素所有边框的样式，或者单独的为各边设置边框样式。

Border-style值：

none: 默认无边框

dotted: 定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界

double: 定义两个边界，宽度和border-width的值相同

groove: 定义3D沟槽边界，取决于边界的颜色值

ridge: 定义3D脊边界，取决于边界的颜色值

inset:定义一个3D的嵌入边框，取决于边界的颜色值

outset: 定义一个3D突出边框，取决于边界的颜色值

边框宽度 ：border-width

用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。设置指定宽度有两种方法：可以指定长度值，或者用thin 、medium、 thick这三个。

边框颜色 ：border-color

设置边框的颜色，可接受最多4个颜色值。

name - 指定颜色的名称，如 "red"

RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

Hex - 指定16进制值, 如 "#ff0000"

Transparent - 透明样式

边框圆角 ：border-radius用于指定圆角边框的圆角半径。

边框阴影 ：border-shadow用于指定圆角边框的阴影。

hOffest : 阴影在水平方向的偏移

vOffest : 阴影在垂直方向的偏移

blur : 阴影的模糊度

spread : 阴影的大小

color : 阴影的颜色

边框圆角相关属性：

border-top-left-radius(左上角圆角半径)

border-top-right-radius(右上角圆角半径)

border-bottom-left-radius(左下角圆角半径)

border-bottom-right-radius(右下角圆角半径)

边框相关属性：

border-top(上边框)         border-left(左边框)

border-bottom(下边框)      border-right(右边框)

外边距 (margin) ：

定义元素周围的空间，接受任何长度单位、百分数值甚至负值，可以是像素、英寸、毫米或 em。清除周围的元素（外边框）的区域，没有背景颜色，是完全透明的以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

外边距相关属性：

margin-top(上外边距)          margin-left(左外边距)

margin-bottom(下外边距)        margin-right(右外边距)

内边距 (padding) ：

定义元素的内边距，接受长度值或百分比值，但不允许使用负值。元素的内边距在边框和内容区之间，padding定义元素边框与元素内容之间的空白区域。

内边距相关属性：

padding-top(上内边距)          padding -left(左内边距)

padding -bottom(下内边距)       padding-right(右内边距)