backgorund背景

  • background-color:red; 背景颜色
  • background-image:url(路径);背景图片
  • background-repeat:no-repeat;不重复
  • background-repeat:repeat-x/y;x轴上重复
  • background-position:right bottom;右下角 [top center] 上边中间
  • background-position:50% 50%; [20px 70px;]
  • background:red url() no-repeat 100px 100px;
  • background-attachment:fixed; 固定定位 (相对于浏览器)
  • bancground-position:0(y右移) 50px(下移);[center top]背景精灵时

只让背景透明 文字不透明

  • 可以使用rbga,如:background:rgba(0,0,0,0.3);
  • 最后一个值是透明度,范围0到1,
  • 前3个是rgb的颜色值。

position定位

  • fixred固定定位
  • 当元素是固定定位时:四个方位属性,是依据浏览器的四条边进行定位
  • top:; left:; bottom:; right:;有了定位属性才有这四个属性
  • relative
  • absoulute
  • z-index:;
  • 当层级相同时后写的在上边 层级大的在上边
  • 如果两个元素是非父子元素时,层级高的在上方
  • 如果两个元素是父子元素时,子元素在上方

绝对定位中位置属性的定位规则

  1. 看父元素有没有定位属性,若有,依据父元素四条边定位,若没有参考第二条;
  2. 看父元素的父元素有没有定位属性,若有,依据父元素的父元素的四条边进行定位,若没有,参考第三条;
  3. 继续一层一层网上找,一直找到有定位属性的父元素,或者是html的根元素,依据四条边定位。
  • 无论是浮动还是定位,本质上说,对内部元素没有影响

cursor

  • pointer手型
  • wait等待

background,position,绝对定位中位置属性的定位规则,cursor的更多相关文章

  1. Android UI: LinearLayout中layout_weight 属性的使用规则

    首先来查看android sdk文档,有这么一段话 LinearLayout also supports assigning a weight to individual children with ...

  2. 0029 定位:position(相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性)

    目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...

  3. css中的position:relative和absolute 属性

    语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...

  4. CSS笔记(十)position属性与定位

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position属性规定了元素的定位类型.任何元素都可定位,其中,绝对或固定元素会 ...

  5. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  6. js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解(转)

    1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6.IE7.IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意:在opera.IE6.IE7 ...

  7. 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置

    背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...

  8. LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!

    LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...

  9. js中的位置属性

    原生js中位置信息 clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置(包括边框),实测,clientLeft=左侧边框的宽度,clientTop=顶部边框的宽度 ...

随机推荐

  1. Angular项目目录结构

    前言:不支持MakeDown的博客园调格式的话,真的写到快o(╥﹏╥)o了,所以老夫还是转战到CSDN吧,这边就不更新啦啦啦~ CSDN地址:https://blog.csdn.net/Night20 ...

  2. 杂项-Java-百科:war-un

    ylbtech-杂项-Java-百科:war-un 1.返回顶部 1. war是一个可以直接运行的web模块,通常用于网站,打成包部署到容器中.以Tomcat来说,将war包放置在其\webapps\ ...

  3. SCSS语法格式及编译调试

    一.SASS编译 Sass 的编译有多种方法: 命令编译 GUI工具编译 自动化编译 1.1 命令编译 1)单文件编译 sass <要编译的Sass文件路径>/style.scss:< ...

  4. C# 操作XML学习笔记

    1. Customers.xml <?xml version="1.0" encoding="utf-8"?> <cust:customers ...

  5. H3C 路由环路

  6. 为什么阿里代码规约要求避免使用 Apache BeanUtils 进行属性复制

    缘起 有一次开发过程中,刚好看到小伙伴在调用 set 方法,将数据库中查询出来的 Po 对象的属性拷贝到 Vo 对象中,类似这样: 可以看出,Po 和 Vo 两个类的字段绝大部分是一样的,我们一个个地 ...

  7. vue 改变数据DOM不更新,获取不到DOM的解决方法

    1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...

  8. linux内存池

    在内核中有不少地方内存分配不允许失败. 作为一个在这些情况下确保分配的方式, 内核 开发者创建了一个已知为内存池(或者是 "mempool" )的抽象. 一个内存池真实地只是一 类 ...

  9. linux PCI 接口

    尽管许多计算机用户认为 PCI 是一种电路布线方法, 实际上它是一套完整的规格, 定义 了一个计算机的不同部分应当如何交互. PCI 规范涉及和计算机接口相关的大部分问题. 我们不会在这里涵盖全部; ...

  10. 2019牛客暑期多校训练营(第八场)E.Explorer

    链接:https://ac.nowcoder.com/acm/contest/888/E来源:牛客网 Gromah and LZR have entered the fifth level. Unli ...