定位概述
来源:互联网 发布:网络打印机远程打印 编辑:程序博客网 时间:2024/05/22 03:33
定位概述
1. 可视化格式模型
块级元素:p、h1、或div
行内元素:strong、span
1.可以使用display属性改变生成的框的类型。
display:block; //则将行内元素表现的像块级元素。
2.块级框从上往下一个一个的垂直排列,框之间的垂直距离由框的垂直外边距计算出来。 行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整它们的水平距离。但是 ,垂直内边距、边框和外边距不影响行内框的高度。
padding-left:8px; //可加长行内元素左右之间的距离padding-top:10px; //不可以撑高行内元素,即高度不变
这时可以使用 1 中所写的display属性,display:block,使padding-top起作用。如果想块级元素像行内元素水平排列,则可以使用display:inline-block。
2.相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。
3.绝对定位
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在时一样
注意:绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素,那么它的位置是相对于初始包含块的。根据用户代理的不同,初始包含块可能是画布或HTML元素。
#brand{background-color: green;width: 70px;height: 10px;position:relative;}.tel{right: 1px;bottom: 1px;text-align: right;position: absolute;}<div id="branding"> <p class="tel">123456</P></div>
这个代码让一个文本段落对准一个大框的右下角,只需对包含框进行相对定位,然后相对于这个框对段落进行绝对定位。
4.固定定位
固定定位是绝对定位的一种。差异在于固定元素的包含块是视口(viewport)。这使我们能够创建总是出现在窗口中相同位置的浮动元素。
- 定位概述
- CSS 6.1 定位-定位概述
- GPS定位原理概述
- CSS-定位概述
- 手机定位技术概述
- CSS 定位体系概述
- 手机定位技术概述
- 机器人定位技术概述
- 室内定位常用算法概述
- 室内定位常用算法概述
- 移动机器人定位方法概述
- 手机定位技术概述 利用GPS 网络 wifi 定位
- 国内PaaS概述及EEPlat定位
- GPS车辆定位系统功能概述
- 对elf文件连接的理解(一)-重定位概述
- 软件测试之BUG分析定位概述(转载)
- 面部特征点定位概述及最近研究进展
- 软件测试之BUG分析定位概述(QA如何分析定位BUG)
- scala 将异常信息完成输出到日志中
- 工作线程操作UI线程元素的方法
- 模板模板参数推导例子
- linux fstab解读
- 图片循环切换播放
- 定位概述
- JavaScript异步编程
- ThinkPHP的自动验证摘记
- warning: templates not found /usr/local/git/share/git-core/templates
- 51nod 1461 稳定桌
- 51nod_1130 N的阶乘的长度 V2(斯特林近似)
- ElasticSearch系列03:elasticsearch.yml(中文配置详解)
- 【已解决】Action无法调用Service 出现空指针异常
- TextView的textIsSelectable属性和setMovementMethod()