CSS的4种定位方式比较
CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed
元素flow, overlap
|
相对参照物: |
能否用offset( top, left, bottom, right)参数 |
是否移出 normal flow |
是否可以 overlap |
备注 |
|
|
Static |
缺省的, |
忽略 |
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种定位方式比较的更多相关文章
- CSS的五种定位方式
CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- Selenium 之18 种定位方式
1 id 定位 driver.find_element_by_id() HTML 规定id 属性在HTML 文档中必须是唯一的.这类似于公民的身份证号,具有很强的唯一性 from selenium i ...
- Selenium学习之==>18种定位方式的使用
Selenium的定位方式一共有18种,单数8种,复数8种,最后两种是前面这16种的底层封装 单数形式8种 # 1.id定位 al = driver.find_element_by_id('i1') ...
- CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
- Android中几种定位 方式
介绍的几种定位方式 http://www.cnblogs.com/cuihongyu3503319/p/3863867.html 百度地图api: http://lbsyun.baidu.com/in ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both
1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...
随机推荐
- AD10 没有原理图是否可以修改 PCB
AD10 没有原理图是否可以修改 PCB 有朋友问 AD 是否可以在没有原理的情况下修改 PCB 呢? 答案是肯定的,可以. 比如增加元件和网络,可以先增加元件封装,再打开网络管理给焊盘加上网络. 相 ...
- docker for mac 安装 kubernetes、kubernetes dashboard
安装参考地址(按照此文档,安装成功):https://yq.aliyun.com/articles/508460 官方说明:https://kubernetes.io/docs/tasks/acces ...
- thinkphp本地调用Redis队列任务
1.安装配置好Redis 2.进入项目根目录文件夹输入cmd进入命令行 3.输入php think 查看php扩展 4.输入 php think queue:listen 启动队列监听
- Linux 下Tomcat单机多应用
修改/etc/profile 下,增加如下两个tomcat的配置.apache-tomcat-8.0.50为第一个tomcat, apache-tomcat-8.0.50_2为第二个tomcat ex ...
- Spring Boot 配置详解
Spring Boot 针对常用的开发场景提供了一系列自动化配置来减少原本复杂而又几乎很少改动的模板配置内容,但是,我们还是需要了解如何在Spring Boot中修改这些自动化的配置,以应对一些特殊场 ...
- 基于nginx + lua实现的反向代理动态更新
大家都知道,nginx是当前应用非常广泛的web服务器,热度因为他的高并发高性能高可靠性,且轻量级!牛逼的不行,不多说这些. 今天要介绍的是,如何基于nginx和lua脚本,也就是在openresty ...
- B.A.T.M.A.N
参考: http://wiki.openwrt.org/doc/howto/mesh.batman?s[]=batmand The Better Approach To Mobile Adhoc Ne ...
- 【java】JDK与JRE的区别
JRE和JDK区别: JDK和JRE提供的服务包: JDK是整个JAVA的核心,JDK包含如下核心组件: ·javac – 编译器 ·jar – 打包工具 ·javadoc – 文档生成器 ·jdb ...
- SDI初识
SDI初识 SDI接口,即“数字分量串行接口(Serial Digital Interface)”.按照速率可以分为: 标准清晰度SD-SDI,速率为270Mb/s; 高清标准HD-SDI,速率为1. ...
- msp430学习笔记-msp430g2553
C语言例程:http://wenku.baidu.com/link?url=49JzNSvt3m0fRuf8SWTEM8yEw1yzqr4lBR-QbX8FddcmjTVYnDhuR97wB60HNf ...