|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
利用CSS来定位页面内层的地位，一向是对照难以把握的事变，良多时分，常常被相对定位的元素，老是以扫瞄器的左上角为坐标原点，此时，假如扫瞄器的巨细改动，被界说的层就会偏离计划想要的地位，让人很挠头。
实在，要想把持好层的相对定位，只需了解CSS中关于定位（position）的界说，统统就会变得轻松复杂。
CSS中关于定位（position）是如许界说的：
定位（position）同意用户准确界说元素框呈现的绝对地位，能够相对它一般呈现的地位，相对其下级元素，相对另外一个元素，大概相对扫瞄器视窗自己。每一个显现元素都能够用定位的办法来形貌，而其地位由此元素的包括块来决意的。
包括块（containingblock）是格局编排产生的联系关系场景，比方，一个加粗的元素的包括块能够是该元素所呈现的段落，如所示。
在了解定位之前，起首，要先了解HTML文件的布局，比方有一个html文件内容以下：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>文档布局</title>
</head>
<body>
<h1>CSS划定规矩</h1>
<p>款式表由一些<strong>款式划定规矩</strong>构成。</p>
<ul>
<li>选择符
<ul>
<li>类选择符</li>
<li>ID选择符</li>
<li><em>包括</em>选择符</li>
</ul>
</li>
<li>属性</li>
<li>值</li>
</ul>
</ul>
</body>
</html>
此文档对应的树型布局，如所示。
CSS年夜部分才能是基于元素的“父子”干系，在的家属树中，每一个元素都是另外一个元素的“父”大概“子”大概二者都是。比方：body既是html的子元素，又是h1的父元素，而html就是h1的先人，h1则是html的子孙。
Body是一切扫瞄器能显现的元素的先人，而html是一切元素的先人，也称为“根元素”。
那为何定位了的元素还老是以扫瞄器窗口的左上角为坐标呢？
由于并非每一个元素都能为厥后辈元素天生一个包括块。
创建包括块的划定规矩以下：
- “根元素”的包括块（也叫初始包括块）由用户代办署理天生，在HTML中，根元素是HTML元素，只管有的扫瞄器会不准确地利用body元素。
- 关于那些未相对定位的非根元从来说，元素的包括块设置为比来的块级先人元素的内容区边缘。
- 对那些利用相对（absolute）作为定位（postition）的非根元素，包括块设为比来的定位（postition）不是运动（static）的先人元素（任何范例）。有以下几种情形：
- 假如先人元素是块级（block）元素，包括块设为先人元素的添补（padding）边缘，也就是被边框（border）束缚的地区。
- 假如先人元素是内联（inline）元素，包括块设为先人元素的内容边缘。
关于包括块，最主要的是要记着它为一切后代元素创建了一个格局编排的高低文。另外一个主要方面是，元素可定位于它们的包括块以外。
因而，相对定位的元素常常以扫瞄器可视地区的左上为坐标原点来举行定位了。
在CSS中但是利用position属性来在分歧的定位范例当选择。
语法：
position:static|absolute|fixed|relative|inherit
其各参数寄义是：
- static:静态（默许），无特别定位。
- relative:绝对，工具不成层叠，但将根据left，right，top，bottom等属性在一般文档流中偏移地位
- absolute:相对，将工具从文档流中拖出，利用left，right，top，bottom等属性举行相对定位。而其层叠经由过程z-index属性界说。此时工具不具有边距，但仍有补白和边框。
- fixed:悬浮，使元素流动在屏幕的某个地位，其包括块是可视地区自己，因而它不随转动条的转动而转动。（IE5.5+不撑持此属性。）
- inherit:这个值从其下级元素承继失掉。
示例：
div{...}{position:absolute;bottom:1in;left:1in;right:1in;top:1in;}
div{...}{position:relative;top:-3px;left:6px;}
既然懂得了包括块的观点，那末关于绝对定位和相对定位的干系，就很好把握了。
比方，如今必要把页面内容全体居中，然后再将个中某些层相对定位的话，那就要把最表面的层设置定位属性。
<body>
<divid="box">
<divid="nav">
<p>每一个显现元素都能够用定位的办法来形貌，而其地位由此元素的<strong>包括块</strong>来决意的。</p>
</div>
</div>
</body>
此时，假如你要对nav相对定位，则需设置css：
body{...}{
margin:0;
padding:0;
text-align:center;
}
#box{...}{
background:#ff0;
position:relative;/**//*使box层成为其子孙元素的包括块*/
width:500px;
height:200px;
margin:0auto;
}
#nav{...}{
background:#ccc;
position:absolute;/**//*nav层将在box层的边框局限内相对定位*/
top:20px;
left:40px;
width:200px;
}
其显现效果如所示。
因而，把握了包括块的观点，定位就变得不那末坚苦了。
本文部分常识来历于：《CSS威望指南》
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:12:35
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主