CSS盒子组成

盒子属性

盒子由外边距(margin)、边框(border)、内边距(padding)、内容组成。

• 最大宽度 max-width  最小宽度 min-width

       最大高度 max-heigth 最小高度min-height

• margin：

       margin设置一个数（margin：10px）：上下左右外边距即外边距均为10px

       margin设置两个数（margin：10px，14px）：上下外边距为10px，左右外边距为14px

       margin设置三个数（margin：10px，14px，17px）：上外边距为10px，左右外边距为14px，下外边距为17px

       margin设置四个数（margin：10px，14px，17px，20px）：上外边距为10px，右外边距为14px，下外边距为17px，左外边距为20px

•  border-radius
• 

       border-radius：5px --上下左右水平垂直半径均为5px

       border-radius:5px 5px 5px 5px / 5px 5px 5px 5px 此为以上border-radius：5px 的完整写法（/前为水平半径，后为垂直半径）

       可以将上右下左水平半径和上右下左垂直半径设置为不一样，例：

     /* 上右下左水平半径为 5 15 25 2 / 上右下左垂直半径为25 20 15 5 */

    border-radius: 5px 15px 25px 5px/25px 20px 15px 5px ;

盒模型

可利用box-sizing设置盒模型类型，box-sizing:content-box为标准盒子，box-sizing:border-box为边框盒子

①标准盒子，又叫内容盒子、w3c盒子

    注：width和height是设置给内容区宽高

 计算公式：

  盒子的宽：weight+paddingLeft+paddingRight+borderLeft+borderRight

  盒子的高：height+paddinggTop+paddingBottom+borderTop+borderBottom

  盒子所占页面宽：盒子宽+marginLeft+marginRight

  盒子所占页面高：盒子高+marginTop+marginBottom

②边框盒模型，又称IE盒子、边框盒子、怪异盒子

    注：边框盒子的width和heigth是设置给盒子本身的

计算公式：

   IE盒子宽：width

   width=contentWidth+paddingLeft+paddingRight+borderLeft+borderRight

   IE盒子高：heigth

   height=contentHeight+paddingTop+paddingBottom+borderTop+borderBottom

   IE盒子所占页面宽：width+marginLeft+marginRight

   IE盒子所占页面高: height+marginTop+marginBottom

盒子的背景样式

 ①盒子背景颜色：background-color

 ②盒子背景图片：background-image

 ③盒子背景图片的平铺方式：backgroud-repeat（默认平铺）、no-repeat（不平铺）、repeat-x  （在x轴方向进行平铺）、repeat-y（在y轴方向进行平铺）

 ④背景图片位置：background-position

 ⑤背景属性缩写：顺序为颜色、图片、平铺方式、关联方式、定位方式

背景图片关联方式

       默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式.

①不允许背景图片随着滚动条滚动而滚动--background-attachment：fixed

②允许背景图片随着滚动条滚动而滚动--background-attachment：scroll