HTML背景及边距设置
1.背景设置
背景样式 background背景颜色 background-color:颜色值;背景图片 background-image:url("图片路径")背景图片平铺 background-repeat: repeat-x(沿着x轴平铺) | repeat-y(沿着Y轴平铺) | no-repeat(不平铺);背景图片定位 background-position: x y;x轴：支持left center right 支持百分比y轴：支持top center bottom 支持百分比背景图片尺寸 background-size: x y | cover |contain;background:复合写法background:background-color background-image background-position background-repeat
background: url("1.jpg") 0px 0px /100px 100px no-repeat ,url("2.jpg") 100px 100px no-repeat gold ;
2.外边距
外边距 margin左边距 margin-left:数值 | auto右边距 margin-right:数值 | auto上边距 margin-top下边距 margin-bottom外边距 复合写法1:margin: 0px(上) 0px(右) 0px(下) 0px(左)2:margin: 0px(上) 0px(左右) 0px(下)3:margin: 0px(上下边距) 0px(左右边距)4:margin: 0px (上下左右边距都是0px)
2.1外边距有坑
坑1:同级结构下，外边距冲突的情况下，谁的数值大，就采用谁的。坑2:父子结构下，父级与子级存在都设置上边距的情况下，父级没有设置border...,子级的外边距会引出"塌陷的"问题。盒模型：构成：容器尺寸+padding+border+margin
.div1{width: 300px;height: 300px;border: 4px #eef0f0 solid;margin-top: 50px;}.div2{width: 200px;height: 200px;background: blue;margin-top: 60px;border: 1px white solid;}.div3{width: 100px;height: 100px;background-color: gold;margin-top: 70px;}.hezi{width: 400px;height: 200px;background-color: #eef0f0;border: 50px black solid;padding: 50px;margin: 50px;}
3.内边距
内边距 padding左内距 padding-left:数值右内距 padding-right:数值上内距 padding-top下内距 padding-bottom内边距 复合写法1:padding: 0px(上) 0px(右) 0px(下) 0px(左)2:padding: 0px(上) 0px(左右) 0px(下)3:padding: 0px(上下边距) 0px(左右边距)4:padding: 0px (上下左右边距都是0px)
