css盒子模型

盒子模型

• 盒子组成
  • content 内容区
    width、height设置的是内容区的大小
  • padding 内边距
    内边距的设置会影响盒子的大小
    内边距有四个方向
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    

    • 简写

      padding: 10px;
      

  • border 边框
    边框的设置会影响盒子的大小
    使用边框需要设置三个属性 ：
    • 边框宽度 border-width
      默认为3px
      可以设置4个位置，顺序：上、右、下、左

      border-width: 10px;					/*设置4个方向边框为10px*/
      border-width: 10px 10px 10px 10px;	/*设置4个方向边框为10px*/
      border-top-width: 10px;				/*设置上方向边框为10px*/
      

    • 边框颜色 border-color
      默认为黑色

      border-color: red;					/*设置4个方向颜色为红色*/
      border-color: red green yellow blue;	/*设置4个方向的颜色*/
      border-top-color: red;				/*设置上方向颜色为红色*/
      

    • 边框样式 border-style
    • 边框样式默认为：none(空)
      边框样式有:solid(实线)、dotted(点状虚线)、dashed(虚线)、double(双线)

      border-style: solid;
      border-style: solid solid solid solid;
      border-top-style:solid;
      

    • 简写

      border: solid 10px red;	/*简写*/
      border-right:none;		/*如果右边不想设置，可以设置为none*/
      

  • margin 外边距
    内边距的值可以是负值，盒子向相反方向移动
    内边距有四个方向可以设置
    • margin-top
      改变自身盒子位置，盒子向下移动
    • margin-left
      改变自身盒子位置，盒子向右移动
    • margin-right
      改变右边盒子位置，盒子向右移动
    • margin-bottom
    • 改变下面盒子位置，盒子向下移动

    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    

    • 简写

    margin: 10px;