前端基础十一 --- 盒子模型

1、盒子模型也称框模型，方便完成网页的布局。盒子分为四个部分：

内容区：content

       内容区的大小可以通过  width和height来进行设置，而整个盒子可见区的大小=内容区的大小+border 的大小+padding的大小

内边距：padding

边框：border：四条边三样式，所有样式都不能继承。

           border有三个样式，可以通过一个属性同时设置四条边的样式，包括宽度、样式、颜色，并且没有顺序。

（1）border-width：边框宽度，只设置一个值时它会将四个方向的值都设置为相同的宽度；如果指定四个值时，则分别为上、右、下、左指定宽度；

           如果指定三个值时，则为上、左/右、下指定宽度；如果指定两个值，顺序则为上/下，左/右。

           也可以通过border-top-width设置上边框宽度，其他边同理。

（2）border-style：边框样式，虚线或者实线，默认值为none。

（border-width和border-color都有默认值，所以指定边框时必须设置border-style，这时其他两个样式使用默认值。但是一般情况下，三个样式都要设置。）

           solid：实线

           dotted：点状

           dashed：虚线

（3）border-color：边框颜色，默认黑色

外边距：margin

2、关于内联元素（如span）

可以设置边框，但是不能设置宽和高，由内容决定宽和高。

并且内联元素支持水平方向的外边距，不支持垂直方向的外边距，即上下边距。

内联元素可以设置水平方向的内边距，也可以设置垂直方向的内边距。

垂直内边距会影响到内联元素的显示大小，但是不会影响其它元素的布局。