HTML背景及边距设置

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)