盒模型

一、一个盒子是由如下几个区域组成：
1.盒子的内容区域：可以通过width和height来设置内容区域的宽高
2.盒子的内填充区域（补白） padding ：通过padding来设置，这个padding是分上下左右四个方向。
3.盒子的边框区域 border：通过border来设置，分上下左右四个方向。
4.盒子的外填充区域（外边距） margin：通过margin来设置，也是分四个方向。
5.盒子的背景区域 background

 

 

二、 width 和 height
表示盒子内容的宽度和高度，不是指盒子的宽度和高度
一个盒子在网页上占据的宽度：
  width+左右padding+左右border+左右margin
一个盒子在网页上占据的高度：
  height+上下padding+上下border+上下的margin

单位一般用px

 

三、盒子的边框，通常在CSS中，设置盒子的边框需要设置边框粗细，边框样式，边框颜色。

一个盒子的边框由border-width，border-style，border-color组成
边框有四个方向：
  top、right、bottom、left
在CSS中我们通常通过 border：1px solid red；来设置边框的属性
样式：
solid 实线
dashed 虚线
dotted 点线

在项目中，使用盒子的一个边框的情况也是比较多。border在网页上也是占据空间的。

四、background

用来设置盒子的背景：
  背景颜色：background
    背景颜色会填充一个盒子的内容区域和padding区域以及边框。
  背景图片：background-image
    url（）函数，表示用来指定一个背景图片的路径，（）里面可以加""，也可以不加。
    默认情况下，一个盒子的背景图片会平铺一个盒子，在水平和垂直方向上都会平铺。【可以通过一个属性来指定是否平铺，叫background-repeat】
    默认情况下，背景图片的左上角和盒子的padding’的左上角是对齐的。【可以通过一个属性来指定背景图片的位置，叫background-position】

五、border

 

边框：
  边框的粗细 border-width
  边框的样式 border-style
  边框的颜色 border-color

 

只设置边框的粗细，在谷歌浏览器中是没有效果的。
要让边框显示出来，至少要设置边框的粗细和边框的样式，边框的颜色有默认值，是黑色。