8月10日学习心得

1.margin（上右下左） 布局元素之间的间隙
兄弟元素
水平方向相加间隙
垂直方向相叠间隙
2.padding （上右下左） 共同的起始位置
3.margin:0 auto;水平居中（元素布局）
4.盒子模型
1.W3C盒子、默认盒子、content-box/内容盒子
2.IE盒子、border-box、边框盒子
div{
width:200px;
height:100px;
padding:20px;
margin:20px;
border:20px solid red;
}
1.box-sizing:content-box
内容区域值 200px200px
盒子大小 200px+20px2+20px2=280px
屏幕大小 280px+20px2=320px
2.box-sizing:border-box
内容区域值 200px-20px2-20px2=120px
盒子大小 200px200px
屏幕大小 200px+20px2=240px

    IE6之前默认值border-box
    IE6之后默认值content-box
3.Max-width:定义最大宽度
  Min-width:定义最小宽度
  Max-height:定义最大高度
  Min-height:定义最小高度

5.盒子背景样式background
background-attachment 指明背景图的位置是固定于视口的，还是随着包含块移动的
background-clip 对背景图片进行裁切
background-color 决定背景色
background-image 允许指定一个图片展示在背景中
background-position 表示背景定位的属性
background-repeat 背景平铺
background-repeat：no-repeat; 只引用一次
6.盒子边框样式border
border-width 为元素指定边框的宽度
border-style 为元素指定边框样式
border-color 为元素指定边框颜色
border-radius 为元素指定圆角边框的半径
border 边框相关属性的速记写法