首页 > 代码库 > 盒模型的三大类简介

盒模型的三大类简介

盒模型包括外边距(Margin)、内边距(padding)和边框(border)三大部分。

Margin:包括{

    margin-top//上边距
    margin-right//右边距
    margin-bottom//下边距
    margin-left//左边距

  }

Padding:包括{
   
    padding-top//上内边距
    padding-right//右内边距
    padding-bottom//下内边距
    padding-left//左内边距
  }

border:包括{

    border-top://上边框
    border-right//右边框
    border-bottom//下边框
    border-left //左边框  
  }
 
三大部分均可以设置不同的样式,设置距离,单位可采用px和%。
均可以用简化样式。
  如:  border:1px solid red;
        margin:10px 23px 10px 22px(上右下左)

      border-top-style:

      border-top-width:

      border-top-color:

      上诉可以简化为:   border-top:宽度 样式 颜色  (顺序不允许错误,否则程序无法正确解析)

 

盒模型的三大类简介