CSS—盒子模型

【内容】

1.盒子模型

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

相关概念：

盒子模型有元素的内容、边框（border）、内边距（padding）和外边距（margin）组成。

盒子里面的文字和图片等元素是内容区域。

盒子的厚度我们称为边框。

盒子内容与边框的距离是内边距（类似单元格的cellpadding）。

盒子与盒子之间的距离是外边距（类似单元格的cellspacing）。

2.盒子边框（border）

（1）语法如下：

border : border-width || border-style || border-color

（2）属性：

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

（3）边框样式：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线（最为常用）

dashed：边框为虚线

dotted：边框为点线

（4）边框综合设置：

border : border-width || birder-style || border-color