1、盒模型
盒模型从外到内一次为:margin-box、border-box、padding-box、content-box。
2、一些background-*属性设置的相对位置
⑴background-position的属性值(top/right/bottom/left/center)起始位置是相对于padding-box外边沿开始的。
⑵当容器的大小(content的width或height加上所设置的padding值)小于图片本身大小时,图片的left、top不和border重合,但right、bottom会和border重合。
⑶background-color的起始位置是相对于border-box外边沿开始设置的。
⑷background-image的起始值是相对于padding-box外边沿设置的。
问题:设置背景图片位于容器的右边20px、底边20px(设置margin-right、margin-bottom属性没有效果时)解决方案如下:
①利用CSS3支持相对任意角偏移,在偏移量前指定关键字即可,如:background-position: right 20px bottom 20px;
②将background-origin属性值设置为content-box(默认的是padding-box)。
③利用calc()函数,以相对左上角偏移量计算,background-position: calc(100% - 20px) calc(100% - 20px)。
<div class="myDiv"> <!--以下代码测试B 1、--> <div style="float: left; width: 40px; height: 50px; border: 1px solid #000; margin-right: 80px; margin-bottom: 200px;"></div> </div>
.myDiv { box-sizing: content-box; width: 230px; height: 180px; border: 10px dashed rgba(0, 0, 0,.2); padding: 20px;
/* ⑴⑵ */ background: url(shop06QZ.png) no-repeat top left;
/* ⑶ */ background-color: lightblue; /* ⑷、 * background-image: url(shop06QZ.png); * background-image是相对于padding-box设置的 * background-repeat: no-repeat; */ /* ① */ /*background-position: right 20px bottom 20px;*/ /* ② */ /*background-position: right bottom; background-origin: content-box;*/ /* ③ */ background-position: calc(100% - 20px) calc(100% - 20px); }