今天解除了几个曾经没有用到的属性,所以想总结并且复习一下。

  background-origin属性:有三个属性值,分别是border-box,padding-box,content-box。看到border-box是不是联想到了CSS3中的盒子模型。

  box-sizing:border-box。它是为了减少CSS中的盒模型padding和border值计算的繁琐。

  首先先说一下:

  background-origin属性:它表示 background-position 属性相对于什么位置来定位。

  属性值border-box:背景图像相对于边框盒来定位。

       属性值padding-box:背景图像相对于内边距框来定位。

       属性值content-box:背景图像相对于内容框来定位。

所以我们一般用这个属性做一些精灵图的定位与剪切。

  还需要了解的是 background-clip属性:同样也有三个属性值border-box,padding-box,content-box。

  background-clip属性规定背景的绘制区域。

描述
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

background新增属性的更多相关文章

  1. 背景新增属性和css渐变及倒影

    背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...

  2. css3新增属性-background背景

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...

  3. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  4. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. HTML5学习总结——HTML5新增属性与表单元素

    一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...

  6. background新增的N个强悍功能!!!

    background在CSS3中新增样式: [ ] 首先我们先回顾下background的原有样式: background-color 背景颜色 相关属性值: 关键字:red,blue,yellow等 ...

  7. css3-文本新增属性

    rgba:a是设透明度值 应用:background:rgb(255,255,255,0.5) color:rgb(255,255,255,0.5) border:1px solid rgb(255, ...

  8. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  9. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

随机推荐

  1. BZOJ 1934洛谷2057善意的投票题解

    题目链接 BZ链接 又是一道玄学的网络流题 我们这样建图: 对于同意观点1的原点向其连边,对于同一观点2点向汇点连边 然后如果两个人是朋友,就连一条双向边. 为什么这样是对的呢? 对于一个人来说,他要 ...

  2. C++返回值优化

    返回值优化(Return Value Optimization,简称RVO)是一种编译器优化机制:当函数需要返回一个对象的时候,如果自己创建一个临时对象用于返回,那么这个临时对象会消耗一个构造函数(C ...

  3. WPF动画应用-几何图形扩散动画

    原文:WPF动画应用-几何图形扩散动画 最终效果图: 本实例中用到了DoubleAnimation和Storyboard两个类. 如果想系统学习的话可以直接点击链接看官方文档. 源码: 首先,在页面上 ...

  4. javascript简介 标签: javascript 2015-11-13 12:13 1712人阅读 评论(39)

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  5. 阿里云BaaS:降低区块链应用门槛,用技术构建商业互信

    5月8日,阿里云召开区块链服务(BaaS)商业化发布会,会上对BaaS产品.业务应用场景及生态策略进行了全面解读. 对于广大IT服务商和开发者而言,构建区块链应用存在三大痛点问题:成本高,研发投入大. ...

  6. 使用jQuery的 autocomplete 实现输入框 自动提示补全

    参考网址: https://www.cnblogs.com/jinzhiming/p/6768402.html 插件下载地址: 链接:https://pan.baidu.com/s/1SpP3hixZ ...

  7. oracle函数 last_day(d1)

    [功能]:返回日期d1所在月份最后一天的日期. [参数]:d1,日期型 [返回]:日期 [示例]select sysdate,last_day(sysdate)  hz from dual; 返回:2 ...

  8. concepts

    webpack是JS应用程序的静态模块打包工具.webpack在处理你的应用时,会递归的构建依赖项,这些依赖项包括你的应用程序所需要的所有模块,然后把这些模块打包到一个或多个bundles中. 一.E ...

  9. Spring读取配置文件,地址问题,绝对路径,相对路径

    Spring在读取配置文件时,是相对于bin,或者WEB-INF的: “applicationContext.xml”就是找bin或WEB-INF及子文件夹下的文件: “/res/applicatio ...

  10. Java变量以及内存分配

    Java变量以及内存分配(非常重要) 堆栈 静态存储区域 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操 ...