盒子模型

盒子模型.png

盒子模型
1.content:内容

    2.padding:内容与边框
      padding:            设置所有边距
      padding-right:      设置右边距
      padding-top:        设置上边距
      padding-left:       设置左边距
      padding-bottom:     设置底边距

    3.border: 边框
        border-style:       定义了10个不同的非继承样式，包括none

      边框单边样式
        border-top-style:
        border-left-style:
        border-right-style:
        border-bottom-style:
        border-width:

      单边框宽度
        border-top-width:
        border-left-width:
        border-right-width:
        border-bottom-width:
        border-color: 

      单边框颜色
        border-top-color: 
        border-left-color:
        border-right-color:
        border-bottom-color:

CSS3边框：
    border-radius:      圆角边框
    box-shadow:         边框阴影
    border-image:       边框图片
4.margin: 上下左右       外边距  盒子间缝隙
    Margin-top    
    Margin-right
    Margin-bottom
    Margin-left
   content的 width    height
使用：
    {
      Margin-top：
      Margin-right：
      Margin-bottom：
      Margin-left：
    }
    或{
    margin：30px,50px,20px,50px;上右下左
    border:样式、厚度、颜色，空格分隔
    }
盒子模型有display属性，通过display属性改变HTML元素的默认显示类型
display值很多，常用的：block/inline/none