CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed

元素flow, overlap

相对参照物:

能否用offset(

top, left, bottom, right)参数

是否移出 normal flow

是否可以

overlap

备注

Static

缺省的,
normal flow

忽略

No

Relative

its own normal position

No

Yes

常用作 Absolute元素的container

Fixed

browser  windows

Yes

Yes

ignore scrolling

Absolute

相对于

* 首个非static的父元素, (包括relative的),

* document body元素(如果没有非static元素的话)

Yes

Yes

偏移量(offset)的描述: /coordinate: top,
bottom, left, and right

使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,

移动浏览器对 fixed 的支持很差, tips见 :http://bradfrost.com/blog/mobile/fixed-position/

http://www.w3schools.com/css/css_display_visibility.asp
http://zh.learnlayout.com/margin-auto.html

* 搞定zIndex:'Auto' means that
element gets z-index from its parent.

水涨船高, 后面的总会比他高(继承了!!!)

用图片美化按钮:

.{

position: ;

left:;

top:;

z-index: ;

background: () ;

}

Positioning, layout, coordinate and offset

CSS的4种定位方式比较的更多相关文章

  1. CSS的五种定位方式

    CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  4. Selenium 之18 种定位方式

    1 id 定位 driver.find_element_by_id() HTML 规定id 属性在HTML 文档中必须是唯一的.这类似于公民的身份证号,具有很强的唯一性 from selenium i ...

  5. Selenium学习之==>18种定位方式的使用

    Selenium的定位方式一共有18种,单数8种,复数8种,最后两种是前面这16种的底层封装 单数形式8种 # 1.id定位 al = driver.find_element_by_id('i1') ...

  6. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  7. Android中几种定位 方式

    介绍的几种定位方式 http://www.cnblogs.com/cuihongyu3503319/p/3863867.html 百度地图api: http://lbsyun.baidu.com/in ...

  8. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  9. 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both

    1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...

随机推荐

  1. KiCad 如何在原理图添加元件时看到 PCB 封装?

    KiCad 如何在原理图添加元件时看到 PCB 封装? 这个功能默认是关闭,评估关闭的原因是因为 PCB 封装很大,而且在前期也没必要详细知道 PCB 封装. 但是有时修改可以看到 PCB 封装会方便 ...

  2. mysql查询相关问题

    前言 本文实现的这个需求其实十分普遍,举例来说,我们存在一个用户来源表,用来标记用户从哪个渠道注册进来.表结构如下所示… 其中 origin 是用户来源,其中的值有 iPhone .Android . ...

  3. ubuntu忘记登录密码解决方法

    1.重启系统,长按Shift键,直到出现下面菜单.选择recovery mode(恢复模式).2.接下来会进入如下界面,选择Drop to root shell prompt ,也就是获取root权限 ...

  4. python 通过pymongo操作mongoDB执行sort

    在mongo shell 中对数据进行排序操作的时候 db.getCollection('ANJUKE_PRICE').find({},{'id':1,'_id':0}).sort({'id':1}) ...

  5. java-文件和I/O

    理解IO:http://www.importnew.com/23708.html 一.读写文件: FileInputStream 该流用于从文件读取数据,它的对象可以用关键字 new 来创建. 有多种 ...

  6. Spring Boot中对自然语言处理工具包hanlp的调用详解

    概 述 HanLP 是基于 Java开发的 NLP工具包,由一系列模型与算法组成,目标是普及自然语言处理在生产环境中的应用.而且 HanLP具备功能完善.性能高效.架构清晰.语料时新.可自定义的特点, ...

  7. 《Windows核心编程》第3章——深入理解handle

    本文借助windbg来理解程序中的函数如何使用handle对句柄表进行查询的.所以先要开启Win7下Windbg的内和调试功能. 解决win7下内核调试的问题 win7下debug默认无法进行内核调试 ...

  8. 基于select类型多路IO复用,实现简单socket并发

    还有很多缺限,如客户断开无限重复 以下转至老师博客: server: #!/usr/bin/env python # -*- coding: utf-8 -*- __author__ = " ...

  9. pyqt环境安装

    pyqt环境配置 pip install pyqt5 windows下 pip install pyqt5-tools linux安装designer sudo apt install qttools ...

  10. 关于JAVA架构师

    在我们行业内,我们大致把程序员分为四级 1.初级Java程序员的重心在编写代码.运用框架: 2.中级Java程序员重心在编写代码和框架: 3.高级Java程序员技术攻关.性能调优: 4.架构师 解决业 ...