1、盒模型

  盒模型从外到内一次为:margin-box、border-box、padding-box、content-box。

  

2、一些属性设置的相对位置

  ⑴background-position的属性值(top/right/bottom/left/center)起始位置是相对于padding-box外边沿开始的,background-position: x% y%,水平方向和垂直方向。。

  ⑵当容器的大小(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)。

  ④margin-right设置后没有变化。其实margin-right是有效果的,只是在默认即标准流的情况下显示不出效果,浏览器默认是从左向右渲染,所以margin-right/margin-bottom设置不起作用。但在脱离标准流的时候(设置float:right,注意设置float:left不起作用),margin-right效果就出来了(但我不知道margin-bottom要怎么设置,嗯!!!

  基于padding-box开始:background-position / background-backgroung-image / background-origin

<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);
}  

3、设置background-repeat对background-position的影响

  以上诉代码为例, background: url(shop06QZ.png) no-repeat top left;在这段代码中可以知道,background-repeat: no-repeat、background-postion: left top。background-position的位置是相对于padding-box设置的,也就是图片不会出现在border边界上(值设大点,对比明白),当background-repeat不为no-repeat时,如repeat-x(水平方向的平铺),则背景图片与左、右边框重叠;repeat-y(垂直方向平铺),则背景图片与上、下边重叠;repeat(水平和垂直方向),则背景图片会从border-box外边沿开始,也就是四边被填充。

 4、background-clip、background-origin

  background-clip: 指定背景(颜色、图片)在哪个区域(边框border-box、内边距padding-box、内容content-box)出现,仅仅是指背景可以从哪个位置开始显示而已。

  background-origin: 背景从哪个区域(border-box、padding-box、content-box)开始绘制。

  可以这样理解background-clip和background-origin,其实它们并没有太大的关系,比如背景允许显示的范围是从padding开始,也就是background-clip:padding-box,但背景绘制的起始位置是border开始,也就是background-origin:border-box,那么背景就会从border位置开始进行平铺,但背景的显示只会从padding位置开始,border边框中的背景就完全遮住(假设border设置透明的),相当于被切割掉一部分背景;如果background-clip:content-box,这时候容器的padding:10px;容器的整体上下左右相当于增大了10px,比如盒子content内容的宽、高分别是200、150,设置padding: 10px后,整体就会看起来是240、190(content部分的宽高还是200、150,但水平、垂直方向存在20px内边距)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-clip和background-origin的关系</title>
<style>
.aboutBg {
/* background-color默认开始位置border-box */
/* background-origin默认开始位置padding-box */
/* background-clip默认开始位置是border-box */
width: 201px;
height: 150px;
padding: 10px; /* 添加了padding是给盒子增大的看到的宽高 */
border: lightblue dashed 10px;
background: url(shop06QZ.png) no-repeat;
background-color: pink;
background-origin: border-box;
background-clip: border-box;
/*background-origin: border-box;*/
/*background-origin: padding-box;*/
/*background-clip: padding-box;*/
/*background-clip: content-box;*/
}
</style>
</head>
<body>
<div class="aboutBg"></div>
</body>
</html>
还是今日事今日毕吧,因为你不知道有什么更需急着处理的事情而耽误你的记录。

5、background-position

  该属性是用来控制背景图片在元素中的位置(指定图片左上角相对于元素左上角的位置,这个元素的左上角从哪开始——根据background-origin),background-origin指定background-position参照点,也就是图片的左上角相对元素的左上角是从border、padding或content开始。

  

关于background-*的一些属性的更多相关文章

  1. 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  2. css的背景background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  3. 全屏背景图的实现及background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  4. CSS基础-background的那些属性

    background的那些属性 background:背景的意思常用的六个属性 1.background-color:背景颜色 2.background-image:背景图像 3.background ...

  5. CSS(九):background(背景属性)

    通过CSS背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图像固定等. background-color(背景颜色) background-color属性定义 ...

  6. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  7. CSS+DIV之强化background属性

    1.背景颜色属性(background-color),设定背景颜色=html中bgcolor属性.我来写一个红色背景的body,(也可以定义某个特定区域) 示例写法:body {} 2.背景图片属性( ...

  8. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  9. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  10. CSS background 属性全家桶

    介绍我们都知道css的background属性是一个复合属性,可以简写成一行代码,也可以将每个属性分开来写. background 简写属性在一个声明中设置所有的背景属性.如:body{ backgr ...

随机推荐

  1. 读懂jstack

    1 jstack jstack是JDK自带的一种线程栈跟踪工具,用于生成java虚拟机当前时刻线程快照.在定位线程卡顿.死锁.block等原因的时候非常有用.使用方法是: jstack [-l] pi ...

  2. Spring MVC 框架有什么用?

    Spring Web MVC 框架提供 模型-视图-控制器 架构和随时可用的组件,用于开 发灵活且松散耦合的 Web 应用程序.MVC 模式有助于分离应用程序的不同方 面,如输入逻辑,业务逻辑和 UI ...

  3. Spring 支持的 ORM?

    Spring 支持以下 ORM:HibernateiBatisJPA (Java Persistence API)TopLinkJDO (Java Data Objects)OJB

  4. Python - 本地文件读写(初级)

  5. 乱序数组中第k大的数(顺序统计量)

    该问题是顺序统计量中十分经典的问题. 使用快排中的分区法,将第k大的数排序.若双向扫描分区加上三点中值法或绝对中值法,可以保证在 O(n) 时间里找出第k大的数. 补充:可以直接使用C++STL中的n ...

  6. C# 正则表达式判断是否是有效的文件、文件夹路径

    C# 正则表达式判断是否是有效的文件.文件夹路径 省流 /// <summary> /// 是否有效的文件,文件夹路径 /// </summary> /// <param ...

  7. .NET Core Ecosystem

    .NET .NET Blog Application Models Web Mobile Desktop Microservices Gaming Machine Learning Cloud Int ...

  8. 通过HTML5的getUserMedia实现拍照功能

    参考HTML5Rocks的这篇文章实现的一个简单的例子. 思路如下: 1. 把冰箱门打开 2. 把大象放进冰箱里 3. 把冰箱门关上 好了不开玩笑了,其实思路是: 1. 通过getUserMedia调 ...

  9. 菜鸟的谷歌浏览器devtools日志分析经验

    1 别管什么性能,尽可能输出详细的必要日志.(除非你明显感觉到性能变低,而且性能变低的原因是由于日志输出太多而引起的) 2 不要总是使用console.log,试试console.info, cons ...

  10. MySQL---什么是事务

    什么是事务 一个数据库事务通常包含对数据库进行读或写的一个操作序列.它的存在包含有以下两个目的: 为数据库操作提供了一个从失败中恢复到正常状态的方法,同时提供了数据库即使在异常状态下仍能保持一致性的方 ...