(一)盒子属性

      1.盒子的构成

       (1)盒子的内容区域:可以通过width和height来设置内容区域的宽高;
       (2)盒子的内填充区域(内边距) padding :通过padding来设置,这个padding是分上下左右四个方向;
     (3)盒子的边框区域 border:通过border来设置,分上下左右四个方向;
  (4)盒子的外填充区域(外边距) margin:通过margin来设置,也是分四个方向;
  (5)盒子的背景区域 background。

 

 

  2.width与height

盒子内容的宽度和高度,不是指盒子的宽度和高度
    一个盒子在网页上占据的宽度:
    width+左右padding+左右border+左右margin
    一个盒子在网页上占据的高度:
    height+上下padding+上下border+上下的margin

 

  3.border

    border可以设置盒子,边框颜色,边框样式,边框大小         

            盒子的边框,通常在CSS中,设置盒子的边框需要设置边框粗细,边框样式,边框颜色。
    一个盒子的边框由border-width,border-style,border-color组成
            边框有四个方向:
               top、right、bottom、left
           在CSS中我们通常通过 border:1px solid red;来设置边框的属性        
           样式:
           solid 实线        
           dashed 虚线
           dotted 点线
      border在网页中也占据大小

 

  4.padding

  内边距,表示盒子内容区域到边框的区域

  padding有四个方向:
  top、right、bottom、left
   padding后可以跟的值可以是:
  一个值:padding:20px;表示上下左右的内边距都是20px;
  两个值:padding:10px 10px;第一个值表示上下10px,第二个值表示左右10px;
  三个值:padding:10px 10px 10px;第一个值表示上10px,第二个值表示左右10px,第三个值表示下10px;
  四个值:padding:10px 10px 10px 10px;顺序是上右下左10px;

  5.margin

    外边距,使用margin表示盒子与盒子之间的距离
    margin有四个方向:
    top、right、bottom、left
    margin后可以跟的值可以是:
    一个值:margin:10px;表示上下左右的外边距都是10px
    两个值:第一个值表示上下,第二个值表示左右
    三个值:第一个值表示上,第二个值表示左右,第三个值表示下
    四个值:顺序是上右下左

   6. background

               用来设置盒子的背景:
          背景颜色:background:颜色;即可设置背景颜色
    背景颜色会填充一个盒子的内容区域和padding区域以及边框。
         背景图片:
    url()函数,表示用来指定一个背景图片的路径,()里面可以加"",后输入网址即可。
    默认情况下,一个盒子的背景图片会平铺一个盒子,在水平和垂直方向上都会平铺。(可以通过一个属性来指定是否平铺,叫background-repeat)
    默认情况下,背景图片的左上角和盒子的padding’的左上角是对齐的。(可以通过一个属性来指定背景图片的位置,叫background-position)