CSS学习培训之5 精准定位合理布局

2021-03-12 20:29 jianzhan

1、精准定位特性的基础状况

应用position特性对元素开展精准定位:

position特性

值:static | absolute | fixed | relative
原始值:static
应用范畴:全部元素
承继值:无
测算值:依据特定明确

static:元素框一切正常转化成。块级元素转化成1个矩形框框,做为文本文档流的1一部分,行内元素则会建立1个或好几个行框,置于其父元素中。

relative:元素框偏位某个间距。元素仍维持其待定位前的样子,它本来所占的室内空间仍保存。

absolute:元素框从文本文档流彻底删掉,并相对其包括块精准定位,包括块将会是文本文档中的另外一个元素或是原始包括块。元素精准定位后转化成1个块级框,而不管原先它在一切正常流中转化成何类型型的框。

fixed:元素框主要表现相近于absolute,但是其包括块是视窗自身。

2、解释精准定位元素的包括块

假定有以下所示HTML构造:

拷贝编码
编码以下:

<div class="father position_a">间距对话框上端100px,间距对话框左端0px</div>

给它加上以下款式:

拷贝编码
编码以下:

* { margin: 0; padding: 0; }
body { font: 12px/1.5 Tahoma, Verdana, "宋体", sans-serif; padding: 50px; }
div { margin-top: 5px; }
.conclusion { margin: 300px 50px ; }
h1, strong { color: red; }
strong, em { font-style: normal; font-weight: normal; }
/* 以上是全部Demo公共性款式,下面的Demo中省略 */
.father { background-color: #999; width: 200px; height: 200px; }
.position_a { position: absolute; top: 100px; left: 0px; }

实际效果较为简易,便是1个紧贴着对话框左侧且间距对话框上端100px的盒子,请点击查询Demo
有以下结果:
在HTML中,根元素的包括块便是html元素。
表明:以便直观地查询,案例选用肯定精准定位方法
下面表明包括块并不是根元素的状况:
HTML构造:

拷贝编码
编码以下:

<div class="father">
<div class="child position_r">相对性精准定位的盒子。相对块级父元素顶部偏位10px,左侧偏位10px</div>
包括块是块级框
</div>

<div class="father">
<span class="father"><span class="child position_r">相对性精准定位的内联框。相对内联父元素顶部偏位10px,左侧偏位10px</span>包括块是内联框</span>
</div>

款式:

拷贝编码
编码以下:

.position_r { position: relative; top: 10px; left: 10px; }

实际效果截图:
下面表明非根元素做包括块的1种状况:
假如精准定位的元素其position值是relative或static,包括块则由近期的块级框、表单报表或行内块级先祖元素的內容界限构成。
接着展现相对性精准定位的元素与其包括块的边距难题,构造以下:

拷贝编码
编码以下:

<div class="father padding">
<div class="child position_r margin">相对性精准定位的盒子。相对父元素顶部偏位30px,左侧偏位30px</div>
精准定位盒子的父元素
</div>

<div class="father">
<span class="father padding"><span class="child position_r margin">相对性精准定位的内联框,相对父元素左侧偏位30px,顶部偏位20px。</span>包括块是内联框</span>
<p>
<em>之因此只向顶部偏位20px而并不是30px,是由于内联元素左右边距合拼引发。在IE6、IE7下相对性精准定位的子元素span间距顶部10px(父元素外溢一部分被掩藏)。</em></p>
</div>

款式:

拷贝编码
编码以下:

.padding { padding: 10px 0 0 10px; }
.margin { margin: 10px 0 0 10px; }

实际效果截图:

结果:针对相对性精准定位的元素,其margin值依然起功效,而且向父元素的内边距靠齐。
下面展现非根元素做包括块的另外一种状况,HTML构造以下:

拷贝编码
编码以下:

<div class="wrapper position_r padding">
<div class="child position_a">肯定精准定位的盒子。相对父元素顶部偏位10px,左侧偏位10px,表明父元素padding失效。</div>

块级父元素
</div>

<div class="wrapper position_r">
<div class="child position_a margin">肯定精准定位的盒子。相对父元素顶部偏位20px,左侧偏位20px,表明肯定精准定位元素能够有外边距。</div>

块级父元素
</div>

<div class="wrapper">
<span class="father position_r padding">行内父元素<span class="child position_a">肯定精准定位的行内元素。</span></span>
<p>

<em>相对父元素顶部偏位10px,左侧偏位10px(父元素有左、上内边距)。IE6下宽度不会受到行内父元素限定。</em></p>
</div>

<div class="wrapper">
<span class="father position_r">行内父元素<span class="child position_a margin">肯定精准定位的行内元素。</span></span>
<p>

<em>相对父元素顶部偏位20px,左侧偏位20px(子元素有左、上外边距)。IE6下宽度不会受到行内父元素限定。</em></p>
</div>

款式同上,实际效果截图以下:

块级元素的状况

行内元素的状况

结果:1个非根元素,假如是肯定精准定位,则它的包括块设定为离它近期的position值并不是static的先祖元素。

假如这个先祖元素是块级元素,包括块则设定为该先祖元素的边框的内界限。
假如这个先祖元素是行内元素,包括块则设定为该元素的內容界限。以从左向右读的語言为例,该元素的上、左侧界是其先祖元素中第1个框內容区的上、左侧界;该元素的下、右侧界是其先祖元素中最终1个框內容区的下、右侧界。
3、访问器对做为精准定位元素的内联元素的解决

针对块级元素,不管是不是精准定位,元素均作块级元素解决,而行内元素肯定精准定位时,作为块级元素解决。倘若有以下HTML:


拷贝编码
编码以下:

<div class="wrapper padding">
<span class="father p_r">相对性精准定位的行内父元素.相对性精准定位的行内父元素.相对性精准定位的行内父元素.<a href="#" class="p_a">肯定精准定位的行内子元素.肯定精准定位的行内子元素.</a>相对性精准定位的行内父元素.相对性精准定位的行内父元素.相对性精准定位的行内父元素.
</span>
</div>

<div class="wrapper p_r">
<span class="father margin" id="p_a" style="width: 90%; height: 80px; ">肯定精准定位的行内父元素.肯定精准定位的行内父元素.肯定精准定位的行内父元素.肯定精准定位的行内父元素.<a href="#" class="p_a" >肯定精准定位的行内子元素.肯定精准定位的行内子元素.</a>肯定精准定位的行内父元素.肯定精准定位的行内父元素.肯定精准定位的行内父元素.肯定精准定位的行内父元素.
</span>
</div>

给它加上以下款式:


拷贝编码
编码以下:

.wrapper { background-color: #DDD; width: 400px; height: 100px; }
.father { background-color: #CCC; border: 1px solid red; }
.p_r { position: relative; }
.p_a { position: absolute; top: 10px; left: 10px; }
#p_a { position: absolute; }
.margin { margin-left: 20px; margin-top: 20px; }
.padding { padding-left: 20px; padding-top: 20px; }

所得实际效果截图:

结果

  1. 相对性精准定位时,做为内联元素解决。
  2. 肯定精准定位时,作block元素解决(可设定宽高)。
4、精准定位元素的宽高
1、相对性精准定位的状况:
HTML构造:

拷贝编码
编码以下:

<div class="father">
<div class="child position_r" style="top: 10px; right: 10px; bottom: 10px; left: 10px;">相对性精准定位元素</div>
</div>
<div class="father">
<span class="father"><span class="child position_r" style="bottom: 10px; left: 10px; width: 100%;">相对性精准定位的内联框</span>包括块是内联框</span>
</div>
 

实际效果截图:

相对性精准定位元素的宽高

结果

  1. 相对性精准定位元素不可以用top,left,right,bottom重要字特定宽高(此时right和bottom值被忽视),务必用width和height特定。
  2. 相对性精准定位的内联元素不能以设定宽高。

2、肯定精准定位的状况:

HTML构造:

拷贝编码
编码以下:

<div class="father position_r">
<div class="child position_a" style="top: 10px; right: 10px; bottom: 10px; left: 10px; ">肯定精准定位元素,能够用top,left,right,bottom重要字融合width特定宽高。IE6访问器下不能以。
top: 10px; right: 10px; bottom: 10px; left: 10px; </div>
</div>
<div class="father position_r">
<div class="child position_a" style="top: 10px; right: 10px; bottom: 10px; left: 10px; width: 100%; ">肯定精准定位元素,能够用top,left,right,bottom重要字融合width特定宽高。IE6访问器下不能以
top: 10px; right: 10px; bottom: 10px; left: 10px; width: 100%; </div>
</div>
<div class="father position_r">
<div class="child position_a" style="top: 10px; right: 10px; bottom: 10px; left: 10px; width: auto; ">肯定精准定位元素,能够用top,left,right,bottom重要字融合width特定宽高。IE6访问器下不能以。
top: 10px; right: 10px; bottom: 10px; left: 10px; width: auto; </div>
</div>
<div class="father">
<span style=" border: 1px solid #999; " class="position_r">行内父元素<span class="child position_a" style=" top: 10px; left: 10px; width: 100%;">肯定精准定位的行内元素。这里能够设定其宽高。IE6下宽度不会受到行内父元素限定。</span></span>
</div>

实际效果截图:

肯定精准定位元素的宽高1

肯定精准定位元素的宽高2

结果

  1. 非IE6下,肯定精准定位元素能够用top,left,right,bottom重要字特定宽高(留意比照,需融合width特定才行),还可以用width和height特定。
  2. 肯定精准定位的内联元素还可以设定宽高。
  3. 客观事实上,肯定精准定位的元素宽度有下列标准:left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=包括块width。
  4. IE6下肯定精准定位的行内元素宽度不会受到父元素限定。

5、精准定位元素在z轴上的置放
下列是CSS2.1有关z-index特性的1些表明:

auto:默认设置值。遵循其父目标的精准定位
number:无企业的整数金额值。可为负数

查找或设定目标的堆叠次序。
较大 number 值的目标会遮盖在较小 number 值的目标之上。如两个肯定精准定位目标的此特性具备一样的 number 值,那末将根据它们在HTML文本文档中申明的次序堆叠。针对未特定此特性的肯定精准定位目标,此特性的 number 值为正数的目标会在其之上,而 number 值为负数的目标在其之下。设定主要参数为 null 能够移除此特性。
此特性仅仅功效于 position 特性值为 relative 或 absolute 的目标。

假定有以下HTML构造:

拷贝编码
编码以下:

<div class="father position_r">
<div class="child position_a" id="box_red">(z-index: 30;)
<div class="subChild" id="subChild_tl">(z-index: auto;)
我是鲜红色大盒子的子盒子</div>
<div class="subChild" id="subChild_bl">(z-index: 29;)
我是鲜红色大盒子的子盒子</div>
<div class="subChild" id="subChild_br">(z-index: 9;)
我是鲜红色大盒子的子盒子</div>
<div class="subChild" id="subChild_extra1">
(z-index: ⑴000;)
我是鲜红色大盒子的子盒子</div>
</div>
<div class="child position_a" id="box_green">(z-index: 10;)
<div class="subChild" id="subChild_extra2">
(z-index: 2000;)
我是翠绿色大盒子的子盒子</div>
</div>
<div class="child position_a" id="box_blue">(z-index: 20;)
<div class="subChild" id="subChild_extra3">
(z-index: 1000;)
我是蓝色大盒子的子盒子</div>
</div>
</div>

加上以下款式:

拷贝编码
编码以下:

.position_r { position: relative; }
.position_a { position: absolute; }
#box_red { background: red; z-index: 30; top: 100px; left: 100px; }
#box_green { background: green; z-index: 10; top: 200px; left: 200px; }
#box_blue { background: blue; z-index: 20; top: 300px; left: 300px; }
.subChild { width: 100px; height: 100px; text-align: left; position: absolute; }
#subChild_tl { background: green; top: ⑸0px; left: ⑸0px; z-index: auto; }
#subChild_bl { background: blue; bottom: 0px; left: 0px; z-index: 29; }
#subChild_br { background: red; bottom: ⑸0px; right: ⑸0px; z-index: 9; }
#subChild_extra1 { background: maroon; width: 150px; height: 150px; top: 20px; right: 20px; z-index: ⑴000; }
#subChild_extra2 { background: orange; width: 150px; top: 80px; left: ⑺0px; z-index: 2000; }
#subChild_extra3 { background: gold; top: 30px; left: ⑵5px; z-index: 1000; }

实际效果截图:

有以下结果

  1. 默认设置(z-index: auto;)状况下,全部肯定精准定位的元素依据其在文本文档中出現的次序显示信息。
  2. 为z-index取值以后,肯定精准定位的叠加依靠于父元素的z-index值,值越大越显示信息在顶层。
  3. 归属于于同1父元素的同级弟兄元素,依据其z-index值明确其在z轴上的次序,值越大越显示信息在顶层。
  4. 归属于不一样父元素的同级元素,其在z轴上的次序将由它们的父元素的z-index值明确,而与它们自身的z-index值不相干。
  5. z-index: auto;等额的于z-index: 0;

能够这么说:针对肯定精准定位的元素,父元素在z轴上的次序将决策他全部子孙后代元素在z轴上的次序,z-index值大的父(先祖)元素将使得它的子孙后代元素优先选择显示信息

或您这么了解:明确肯定精准定位元素叠加次序时,纵向较为父元素的z-index值尺寸,横向较为弟兄元素z-index尺寸,值越大越显示信息在顶层。

表明:以上全部截图均来自FF 3.6,无非常表明的地区,均已适配别的(流行)访问器。笔者水平比较有限,有不正确的地区请纠正!

注:內容参照《CSS权威性指南》(第3版)