html5绝对元素的对齐与偏移的方法
来源:互联网 发布:linux c 串口中断 编辑:程序博客网 时间:2024/06/18 01:34
原文链接
想把绝对定位元素排列到它的定位最近的祖先元素的上、下、左、右4边上。还想将它从排列位置上进行偏移。还想为它设置尺寸或进行包裹。下面我们就给大家介绍一下html5绝对元素的对齐与偏移的方法吧!
解决方案
把样式赋给已选择的类和ID上:
n 用width:+VALUE和height:+VALUE为元素设定尺寸;
n 用width:auto和height:auto对元素进行包裹。
从左侧进行偏移:
n 用left:0和right:auto将元素左对齐;
n 用margin-left:+VALUE将元素从左侧向右偏移;
n 用margin-left:-VALUE将元素从左侧向左偏移。
从右侧进行偏移:
n 用right:0和left:auto将元素右对齐;
n 用margin-right:+VALUE将元素从右侧向左偏移;
n 用margin-right:-VALUE将元素从右侧向右偏移。
从顶端进行偏移:
n 用top:0和bottom:auto将元素顶端对齐;
n 用margin-top:+VALUE将元素从顶端向下偏移;
n 用margin-top:-VALUE将元素从顶端向上偏移。
从底端进行偏移:
n 用bottom:0和top:auto将元素底端对齐;
n 用margin-bottom:+VALUE将元素从底端向上偏移;
n 用margin-bottom:-VALUE将元素从底端向下偏移。
模式
绝对元素的左偏移
SELECTOR { position:absolute; left:0;right:auto;
margin-left:±VALUE;margin-right:auto; }
绝对元素的右偏移
SELECTOR { position:absolute; left:auto; right:0;
margin-left:auto; margin-right:±VALUE;}
绝对元素的顶端偏移
SELECTOR { position:absolute; top:0;bottom:auto;
margin-top:±VALUE;margin-bottom:auto; }
绝对元素的底端偏移
SELECTOR { position:absolute; top:auto; bottom:0;
margin-top:auto; margin-bottom:±VALUE; }
适用范围
此设计模式可应用于所有元素。
以上就是我们给大家介绍的html5绝对元素的对齐与偏移的方法了。希望大家继续关注我们的网站!
- html5绝对元素的对齐与偏移的方法
- 绝对元素的对齐与偏移
- 四字节对齐,获取结构中元素的偏移量
- 让绝对定位的元素水平居中对齐
- Html元素与body元素之间的偏移距离
- js获得元素绝对位置的方法
- 元素的相对定位与绝对定位
- 同一行元素顶端对齐的方法
- 元素的绝对位置
- 绝对定位的元素的水平居中的一个方法
- HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)
- 对Web页面元素的绝对唯一引用方法
- 对Web页面元素的绝对唯一引用方法
- css3 让绝对定位元素水平居中的方法
- 让IE6支持HTML5元素的方法
- js 实现ff与ie元素的绝对位置
- 获得元素的绝对位置
- 获取元素的绝对坐标
- GCC Compile and Link options
- 【video】主流流媒体服务器介绍
- 获取ip地址
- jdk1.8中ConcurrentHashMap的实现原理
- 反射(基础知识)
- html5绝对元素的对齐与偏移的方法
- Android开发:getContentResolver的使用
- Java中集合List,Map,Set的使用
- Hashtable,HashMap,ConcurrentHashMap 底层实现原理与线程安全问题
- Cron 触发器及相关内容 (第一部分)
- mysql学习(一)
- hdu 2138 How many prime numbers (Miller Rabbin大质数判定)
- centos安装PHPredis扩展安装
- 华为灵活qinq简单配置