HTML之布局position理解
HTML中的布局,一个比较难以理解的概念,就是position了,W3C上的解释,position有如下几种:
1. static,默认值,也就是在样式中不指定position
2. fixed
3. absolute
4. relative
其中,static,fixed的相对好理解点,比较难一点的是absolute及relative。 我个人的理解,这里的position,都是要找一个参照层再来说位置的布局。没有参照层,布局其实就没有什么意义,至少生产环境下是这样子的,因为你放置一个HTML元素的时候,一定在设计的时候是有一个期望的,那就是你希望这个元素放在父层中的什么位置。也就是说你不会瞎放,若是想瞎放,那就不在这个话题范围内了!
其实,这个要是有切身的体会,还是不那么难理解的,若没有实际操作过,估计是比较难以搞明白。尤其absolute和relative。 还有,这position中,static下,top,left,bottom, right等属性将无效。 relative和absolute,通常要和top/left/bottom/right一起使用,他们也往往与margin一起实现布局中的位置调整。
理解上的东西,最好来个例子,会有助于接受概念上的东西。 下面的例子,是用来做web页面模块拖拽设计的一部分。需要的可以参考。
<style type="text/css">
#sub1,#sub2,#sub3{
position : relative;
height: 50px;
margin: 10px; }
#sub1p{
border: 1px solid blue;
margin: 20px;
position:;
top: 50px;
left: 50px;
right: 50px;
} #parentLeft{
border: 1px solid gray;
width: 34%;
position: relative;
float: left;
height:100%
}
#parentRight{
border: 1px solid gray;
width: 64%;
position: relative;
float: right;
height: 100%;
z-index: 1;
}
.ptop{
position: absolute;
width: 100%;
top: 0px;
height: 2px;
border: 1px solid green;
cursor: n-resize;
z-index: 1;
}
.pleft{
position: absolute;
width: 2px;
top: 0px;
left: 0px;
height: 100%;
border: 1px solid green;
cursor: e-resize;
z-index: 1;
}
.pright{
position: absolute;
width: 2px;
top: 0px;
right: -2px;
height: 100%;
border: 1px solid green;
cursor: e-resize;
z-index: 1;
}
.pbottom{
position: absolute;
width: 100%;
left: 0px;
bottom: -2px;
height: 2px;
border: 1px solid green;
cursor: n-resize;
z-index: 1;
}
.pboth{
position: absolute;
width: 10px;
right: -0px;
bottom: -0px;
height: 10px;
border: 2px solid pink;
cursor: nw-resize;
z-index: 2;
}
</style>
<div id="parentLeft">
<div id="sub1p">sub1p
<div id="sub1" style="border: 1px solid red;">
<div class="ptop"></div>
<div class="pleft"></div>
<div class="pright"></div>
<div class="pbottom"></div>
<div class="pboth"></div>
sub1
</div>
<div id="sub2" style="border: 1px solid red;">
<div class="ptop"></div>
<div class="pleft"></div>
<div class="pright"></div>
<div class="pbottom"></div>
<div class="pboth"></div>
sub2
</div>
<div id="sub3" style="border: 1px solid red;">
<div class="ptop"></div>
<div class="pleft"></div>
<div class="pright"></div>
<div class="pbottom"></div>
<div class="pboth"></div>
sub3
</div>
</div>
</div>
<div id="parentRight"> </div>
<script src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var divs = $("div");
$.each(divs, function(i, div){
$(this).click(function(){
alert(this.id + ", " + $(this).css("position"));
});
});
});
</script>
这里,读者自己细心体会吧,例子中除了fixed没有用到,其他几个都有。fixed相对简单,使用的场景相对也简单,比如页面导航,或者页脚等。 例子中的position,感兴趣的话,可以修改一下试试,找点感觉,这样会对理解有帮助。
HTML之布局position理解的更多相关文章
- c++对象内存布局的理解
我对c++对象内存布局的理解 引言 结合网上的一些资料,通过自己的一番摸索,得出了一点个人见解.现在写下来,希望与各位同学共同探讨,共同进步. 以下所有代码均是在VS2012下测试. 一个普通的基 ...
- 学习CSS布局 - position例子
position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...
- 布局 position
position : 设置定位方式 跟『定位』相关的有一些属性,最重要的一个是『position』,它主要是设置『定位方式』. 而定位方式最重要的是设置『参照物』. 配合 position 使用的有这 ...
- 学习CSS布局 - position
position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...
- Web开发中常用的定位布局position
定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美. position是CSS中非常重要的一个属性,通过position属性,我们可以让元素 ...
- 定位布局—position
1. position的属性 1.1position:static 默认位置,没有定位效果 1.2 position:relative 相对定位,不会脱离文档流,相对于原来位置的变化 <!DOC ...
- 我对c++对象内存布局的理解
引言 结合网上的一些资料,通过自己的一番摸索,得出了一点个人见解.现在写下来,希望与各位同学共同探讨,共同进步. 以下所有代码均是在VS2012下测试. 一个普通的基类 1: #include < ...
- 左侧固定,右侧自适应的布局方式理解margin负值理论
一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; backgr ...
- CSS 对于grid布局的理解,举例代码及解释
网格布局介绍: CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式.CSS 一直用来布局我们的网页,但一 ...
随机推荐
- Unity3d Shader
Unity3d Shader 预览Surface Shader主要用来实现光照相关处理,可能更简洁. Vertex and Fragment Shader 如果不与光照交互, 则可以用这个shader ...
- 转:Microsoft Enterprise Library 5.0 系列教程(一) Caching Application Block (高级)
http://www.360doc.com/content/13/0918/22/15643_315482318.shtml http://www.360doc.com/content/13/0918 ...
- LeetCode Find the Duplicate Number 找重复出现的数(技巧)
题意: 有一个含有n+1个元素的数组,元素值是在1-n之间的整数,请找出其中出现超过1次的数.(保证仅有1个出现次数是超过1的数) 思路: 方法一:O(nlogn).根据鸽笼原理及题意,每次如果< ...
- SQL SERVER 2012使用sequence
从之前Oracle转过来,现在看sql server中对于id的实现竟然用guid这种方式.为啥不像在Oracle中一样使用Sequence并行获取序列号呢?今天看MSDN才发现在sql server ...
- 1130-host ... is not allowed to connect to this MySql server 开放mysql远程连接 不使用localhost
报错:1130-host ... is not allowed to connect to this MySql server 解决方法: 1. 改表法. 可能是你的帐号不允许从远程登陆,只能在loc ...
- 解决LinearLayout中控件不能居右对齐
转载自:http://lgb168.blog.163.com/blog/static/49674438201172492935235/ 2011-08-24 21:35:25| 分类: Androi ...
- spring二级缓存的ehcache 的 配置文件
<ehcache> <!-- Sets the path to the directory where cache .data files are created. If the p ...
- linux中进程控制
1.进程标识 每个进程都有一个非负整型表示的唯一的进程ID.进程ID标识符总是唯一的. 虽然进程ID是唯一的,但某个ID被回收后,ID号是可以复用的. ID为0的进程通常是调度进程(其常常被称交换进 ...
- linux下c语言实现计算磁盘剩余空间
#include <sys/statfs.h> unsigned ; size_t mbFreedisk = ; unsigned ; size_t mbTotalsize = ; str ...
- UI组件(思维导图)