CSS盒子模型包括哪些样式

与盒子模型相关的样式特征分为两个主要类别：方框和边框。其中方框特性用于设置元素的宽度(width)、高度(height)、浮动方式(float)、填充宽度(padding)和边界宽度(margin)等特性。

CSS盒子模型包括哪些样式

一、方框特性

方框特性用于设置元素的宽度(width)、高度(height)、浮动方式(float)、填充宽度(padding)和边界宽度(margin)等特性。

1.宽度(width)。该功能用于设置一个元素的内容所占用的宽度。宽度通常以px(像素)和em(字体高度)作为单位的相对值。

2.高度(height)。该特性用于设置元素内容所占用的高度。height通常是以px(像素)和em(字体高度)作为单位的相对值

3.浮动方式(float)。该特性用于设置元素和它的盒子的浮动方式。float特性值可以是left、right或none，分别表示元素及其盒子向左浮动、向右浮动或不浮动，其中none是默认值。

4.填充宽度(padding)，该特性用来设置元素盒子内的填充宽度。padding特性值通常是以px(像素)和em(字体高度)为单位的相对值，也可以使用padding-top、padding-right、padding-bottom和padding-left特性来设置顶部、右侧、底部和左侧的填充宽度。

5.边界宽度(margin)。该特性用于设置元素盒子中的边界宽度。与padding特性值类似，margin特性通常是一个以px(像素)和em(字体高度)为单位的相对值，也可以与margin-top、margin-right、margin-bottom和margin-left属性分别设置顶部、右侧、底部和左侧边框的宽度。

二、边框特性

边框特性用于设置元素盒子中的边框宽度(border-width)、边框样式(border-style)和边框颜色(border-color)等特性。

1.边框宽度(border-width)。该特性用来设置元素框中的边框宽度。

border-width特性值通常是一个以px(像素)和em(字体高度)为单位的相对值，但也可以使用border-top-width、border-right-width、border-bottom-width和border-left-width特性来分别设置上、右、下和左边框的宽度。

2.边框样式(border-style)。该特性用于设置元素盒子中的边框样式。

border-style特性值可以是none(无边框)、dotted(点划线)、dashed(虚线)、solid(实线)、double(双线)、groover(槽状)、ridge(脊状)、insert(凹陷)和outset(凸出)。

也可以使用border-top-style、border-right-style、border-bottom-style和border-left-style特性分别设置上、右、下和左边框的样式。

3.边框颜色(border-color)。该特征用于设置元素盒子中的边框颜色。与color和background-color属性类似，border-color属性可以是一个颜色名称，一个rgb代码，或者一个三位数或六位数的十六进制值。

也可以使用border-top-color、border-right-color、border-bottom-color和border-left-color特性分别设置上、右、下和左边框的颜色。