【前端学习】前端学习第五天：CSS盒子模型详解

一、盒子模型概念

在css中，盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）组成，它们之间的关系如图所示：

盒子模型可以分为标准盒模型和IE盒模型，如下图所示：

 

 

二、border（边框）

边框的大小也会影响盒子的大小，下面来介绍盒子模型的三个属性：

1、border-color：用来指定border的颜色，默认为color的颜色；

2、border-width：用来指定border的粗细程度，默认为3像素；

3、border-style：用来指定border的样式；

none：无边框（默认值）；

solid：实线；

dotted：点状虚线；

dashed：虚线；

double：双线；

4、border-radius：用于创建圆角边框，border-radius属性值可以用px、em等固定值单位，也可以用百分比设置；

三、content（内容）

1、width和height：指定盒子显示内容的宽度和高度，它们的值可以为：auto、固定值和百分比；

2、当子元素的大小超过父元素，则子元素会从父元素中溢出，可以通过使用overflow来处理这种情况，overflow的属性值有：

visible：默认值；

hidden：溢出的内容不显示；

scroll：强制生成滚动条；

auto：根据需要生成滚动条；

四、padding（内边距）

padding用于控制内容区到border的距离，在四个方向上的属性有：padding-top、padding-bottom、padding-left、padding-right，也可以通过padding这一个属性来控制四个方向的值；

五、margin（内边距）

margin用于控制元素和元素之间的距离，属性值的使用和padding类似，值得一提的是，可以通过设置margin：0 auto 来使元素水平居中；

六、补充一些其他的属性

box-sizing：用来设置盒子尺寸的计算方式，属性值有：

  content-box：默认值 宽度和高度用来设置内容区的大小；

  border-box：宽度和高度用来设置整个盒子可见框的大小；

outline：用来设置元素的轮廓线，用法和border一样，不同之处在于轮廓线不会影响可见框的大小；

box-shadow：用来设置元素的阴影效果：

第一个值：水平偏移量 正值：向右移  负值：向左移；

第二个值：垂直偏移量 正值：向下移  负值：向上移；

第三个值：阴影的模糊半径；

第四个值：阴影的颜色。