1.盒子模型
文档中的每个元素都能够被看作是一个矩形盒子1) 盒子的属性 width height margin 外边距 盒子与其余盒子之间的间隔 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin-left 左外边距 margin:10px; 上下左右都是10px margin:5px 10px; 高低为5px，左右为10px margin:5px 10px 15px; 上为5px，左右为10px，下为15px margin:5px 10px 15px 20px; 上5px，右10px，下15px，左20px border 边框 border-width 边框线的宽度 px border-style 边框线的款式 solid 实线 dotted 点状线 dashed 虚线 double 双实线 border-color 边框线的色彩 速写 border:10px double #333; border-radius 边框圆角 border-radius:100%; 圆 border-radius:10px; 10px的圆角 padding 内边距 background-color background-image:url(); background-position background-repeat no-repeat 不反复 repeat-x x轴反复 repeat-y y轴反复 background-size 背景图的尺寸 background-size:100% 100%;2) 盒子的组成 width、padding、border、margin3) 盒子的分类 通过box-sizing设置盒子的类型 1) box-sizing:content-box; 内容盒子【W3C盒子】【默认】 width 200px= 内容width 所占的宽 = width + padding + border + margin 2) box-sizing:border-box; 边框盒子【IE盒子】 width 200px = 内容width + padding + border 所占的宽 = width + margin 4) 边框塌陷(margin塌陷) 浏览器中有两个盒子，高低布局，如果给下面的盒子加上margin-bottom:10px;给下面的盒子加上margin-top:10;两个盒子之间的间隔为10px，不是20px 两个盒子之间间隔取margin大的那一个