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

  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. GMTC2019|闲鱼-基于Flutter的架构演进与创新

    2012年应届毕业加入阿里巴巴,主导了闲鱼基于Flutter的新混合架构,同时推进了Flutter在闲鱼各业务线的落地.未来将持续关注终端技术的演变及趋势 Flutter的优势与挑战 Flutter是 ...

  2. window执行python文件

    @echo offD:cd D:\pythonstart python2 del.pyexit

  3. 枚举类型的数据存入到map中

    阅读更多 原文来自http://fokman.iteye.com/blog/1568905 public enum IdeasCMD { RESERVED(0), PING(1), PING_ACK( ...

  4. 2018-8-10-win10-uwp-如何打包Nuget给其他人

    title author date CreateTime categories win10 uwp 如何打包Nuget给其他人 lindexi 2018-08-10 19:16:50 +0800 20 ...

  5. Vue6——v-model实现数据双向绑定

    博客地址 :https://www.cnblogs.com/sandraryan/ v-model 用于input标签,用于实现双向绑定,及时把数据的变化渲染在页面 双向绑定及原理 举个双向绑定的简单 ...

  6. Android 设置ImageView宽度固定,其高度按比例缩放适应

    今天和项目经理对喷了一下,他说在应用的列表数据中的图片应该宽度固定,高度按比例缩放自适应,我说,那岂不是很丑!直接让运营那边把图片处理成固定宽高比不就好了,省的我客户端麻烦了. 这家伙不同意,为毛呢, ...

  7. jqLite

    一.关于DOM导航的jqLite方法 children() 返回一组子元素.这个方法的jqLite实现不支持jQuery所提供的选择器特性 eq(index) 从一个元素集合中返回指定索引下的元素 f ...

  8. MySQL数据库字符集和整理

    MySQL数据库字符集和整理(2009-11-20 22:23:37) mysql数据库 it    其实这个表在MySQL数据库中通过phpMyAdmin就能看到,icech只是把表格整理了一下方便 ...

  9. a span做成按钮时,文字不被选中样式

    HTML: <a class="button"></a> <span class="button"></span> ...

  10. 【a503】圆排列问题

    Time Limit: 1 second Memory Limit: 32 MB [问题描述] 给定n个大小不等的圆c1,c2,...., cn,现要将这n个圆排列进一个矩形框中,且要求各圆与矩形框的 ...