对CSS中的Position、Float特性的1些深层次讨论

2021-03-07 03:53 jianzhan

本文关键讨论点:

1.Position、Float特性的基础应用方式
2.Position、Float特性对元素所导致的危害
3.Position、Float特性交叉式应用上面的危害
4.Position、Float特性应用上的小窍门

本文构造点:

1.HTML合理布局的基础关键点(点我立即自动跳转)
  盒子实体模型
  HTML的一般流

2.Position特性(点我立即自动跳转)
  特性值详细介绍
  用法详细介绍
  1些有关position的小专业知识

3.Float特性(点我立即自动跳转)
  特性值详细介绍
  用法详细介绍
  与Position之间的适配难题

HTML合理布局的基础关键点:

假如要把握、应用好Position、Float特性务必要对HTML的两个基础点有清楚的掌握。

1.盒子实体模型(box model)
2.HTML的一般流(normal flow)
盒子实体模型
在HTML中元素的盒子实体模型分成两种:块状元素、行内元素,请留意这里的块状元素(Block)和行内元素(Inline)与Display特性中的inline、block两个特性值其实不等同于。盒子实体模型中的Inline、Block相近因而Display特性的父类,比如:Display特性中的list-item特性值是属于块状(Block)种类的。

大家直观的上看两种盒子实体模型的差别

•块状(Block)种类的元素能够设定width、height特性,而行内(Inline)种类设定失效。
•块状(Block)种类的元素会占有1行(直观的说便是会换行显示信息,没法与别的元素在同1行内显示信息,除非你积极改动元素的款式),而行内(Inline)种类的元素则都会在1行内显示信息。
•块状(Block)种类的元素的width默认设置为100%,而行内(Inline)种类的元素则是依据本身的內容及子元向来决策宽度。
例举出1些大伙儿普遍的元素的归类

•块状元素:P、DIV、UL、LI、DD、DT...
•行内元素:A、IMG、SPAN、STRONG...
HTML的一般流
访问器在载入HTML源码的情况下是依据元素在编码出現的次序载入,最后元素的展现方法是根据元素的盒子实体模型来决策的。行内元素是从左到右,块状元素是从上到下。(以下图)


拷贝编码
编码以下:

<style type="text/css">
div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; }
</style>
<strong>strong</strong><em>em</em><span>span</span>
<div style="background: blue">A</div>
<div style="background: red">B</div>
<div style="background: green">C</div>


假如你不更改元素的默认设置款式前提条件下,元素在HTML的一般流中会“占有”1个部位,而“占有”部位的尺寸、部位则是由元素的盒子实体模型来决策。因而,在后续讲的Position、Float特性是不是会使元素摆脱这个一般流是1个重要点。

Position特性:
大家最先来谈谈Position特性,由于Position特性可以很好的反映HTML一般流这个特点。关键在于运用了不一样的position值以后是不是有摆脱一般流和更改Display特性这两点。

Position特性值
Position的特性值共有4个static、relative、absolute、fixed。

Static
全部元素在默认设置的状况下position特性均为static,而大家在合理布局上常常会用到的相对性精准定位和肯定精准定位常见的特性top、bottom、left、right在position为static的状况下失效。其用法为:在更改了元素的position特性后能够将元素重设为static让其重归到网页页面默认设置的一般流中。

Relative
俗称的相对性精准定位,关键在于对相对性了解。大家此前说过每一个元素在网页页面的一般流中会有“占有”1个部位,这个部位能够了解为默认设置部位,而相对性精准定位便是将元素偏移元素的默认设置部位,但一般流中仍然维持着原来的默认设置部位,并沒有摆脱一般流,只是视觉效果上产生的偏位。
大家先用块状元向来做个示例:


拷贝编码
编码以下:

<style type="text/css">
div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
</style>
<div style="background: blue">A</div>
<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>
<div style="background: green">C</div>




右图中的黑色虚线一部分为元素B的默认设置一般流部位,而黄色线则意味着元素B的相对性偏位量。大家能够很显著的看出在元素C仍然還是保存在原位,并沒有由于元素B产生了偏位而随之转变。

大家再看来看行内元素(在这里用大伙儿最常见的span来做示例)


拷贝编码
编码以下:

<style type="text/css">
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
</style>
<strong>strong</strong><em>em</em><span>span</span>


请留意看,在这里我是有对span开展width特性的取值(为100px)。可是大家能够看到span在应用了relative这个position特性值后,仍然对width特性失效,换而言之,position: relative并沒有更改行内元素的Display特性,这个定义十分关键(留意与接下来的absolute的差别)

Absolute

俗称的肯定精准定位,肯定精准定位是相对性而言的,如何了解呢?运用了position: absolute的元素会循着连接点树中的父(祖)元向来明确“根”,随后相对性这个“根”元向来偏位。假如在其连接点树中全部父(祖)元素都沒有设定position特性值为relative或absolute则该元素最后将对body开展部位偏位。运用了position: absolute的元素会摆脱网页页面中的一般流并更改Display特性(关键)!

大家先用1个默认设置嵌套循环的DIV来做示例


拷贝编码
编码以下:

<body style="background: yellow;">
<div style="background: #fff">
A
<div style="background: #81b6ff">
A - 1
<div style="background: #b6ff00;">
A - 2
</div>
</div>
</div>
</body>


如今大家对A⑵这个div设定肯定精准定位(Top: 0, Left: 0),而沒有对它的父元素(A、A⑴)设定任何的position值


拷贝编码
编码以下:

<body style="background: yellow;">
<div style="background: #fff">A
<div style="background: #81b6ff">A - 1
<div style="background: #b6ff00; position: absolute; top: 0; left: 0;">
A - 2</div></div></div></body>


能够看到(A⑵)最后是依据body来造成了位移,让大家比照各自设定1下父元素position。

从上面的图,大家能够总结下列几个结果。

1)块状元素在position(relative/static)的状况下width为100%,可是设定了position: absolute以后,会将width变为auto(会遭受父元素的宽度危害)。

2)元素设定了position: absolute以后,假如沒有设定top、bottom、left、right特性的话,访问器会默认设置设定成auto,而auto的值则是该元素的“默认设置部位”。即设定position: absolute前后左右的offsetTop和offsetLeft特性值不会改变。
独特状况:

Firefox的话会立即将top、left设定成offsetTop和offsetLeft的值而非auto。
IE7下的主要表现更相近于float,会额外到父元素的结尾。

 

1些的position小专业知识

1)运用了position: relative/absolute的元素,margin特性依然合理,以position:relative来举例。假如设定了left、top、bottom、right的特性,提议大伙儿不必设定margin数据信息,由于很难精准元素的精准定位,尽可能降低影响要素。

2)position: absolute忽视根元素的padding。


拷贝编码
编码以下:

<div id="a" style="background: #fff; width: 200px;">A
<div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1
<div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2
</div>
</div>
</div>


3)在IE6/7中设定position特性后会致使z-index特性无效


拷贝编码
编码以下:

<!-- 处理计划方案,父元素设定1个更大的z-index值便可 -->
<div style="z-index: 2;">
a
<div style="position: relative; z-index: 1;">
b
</div>
</div>

4)行内元素在运用了position:absolute以后会更改display。


拷贝编码
编码以下:

<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;">
我的display特性由inline变为了block
</span>



因而,要留意到relative是并沒有更改行内元素的展现方式,而absolute是会更改行内元素的展现方式,假如设定了absolute其实不必须显式的的将元素display改为block。


5)运用了position: absolute / relative以后,会遮盖别的非精准定位元素(即position为static的元素),假如你不想遮盖到别的元素,还可以将z-index设定成⑴。


Fixed

在很长的時间里,这个特性值由于适配性难题,并沒有获得十分普遍的运用(IE6未完成该特性值)。fixed和absolute有许多相互点:

    会更改行内元素的展现方式,使display之变动为block。会让元素摆脱一般流,不占有室内空间。默认设置会遮盖到非精准定位元素上。

fixed与absolute最大的差别在于:absolute的”根元素“是能够被设定的,而fixed则其”根元素“固定不动为访问器对话框。即当你翻转网页页面,其元素与访问器对话框之间的间距是稳定不会改变的。

 Float特性

float的特性值有none、left、right,有几个关键点:
仅有横向波动,并沒有纵向波动。当元素运用了float特性后,可能摆脱一般流,其器皿(父)元素将得不到摆脱一般流的子元素高宽比。会将元素的display特性变动为block。波动元素的后1个元素会紧紧围绕着波动元素(典型应用是文本紧紧围绕照片),与运用了position的元素相比波动元素其实不会遮住后1个元素。波动元素的前1个元素不容易遭受任何危害(假如你想让两个块状元素并排显示信息,务必让两个块状元素都运用float)。

与position的适配性难题

1)元素另外运用了position: relative、float、(top / left / bottom / right)特性后,则元素先波动到相应的部位,随后再依据(top / left / bottom / right)所设定的间距来产生偏位。

<div style="position:relative; float:right; left:50px; top:10px;">div</div>

左图中的div是沒有设定top、left值的,而右侧则设定了50px的偏位。

2)元素另外运用了position: absolute及float特性,则float无效。

<div style="position: absolute; right:10px; top: 10px; float: left;">我是1个运用了position:absolute和float:left的DIV,但是我還是在访问器的右侧,沒有波动到左侧。</div>


3)第1个元素运用了position以后会遮盖着接下来的float元素(假如两个元素所处的部位同样)

<div style="position: absolute; left:10px; top: 10px;"> 我是1个运用了position:absolute的DIV。</div><div style="float:left; background: red; width: 300px; height: 150px; "> 我是float:left的DIV</div>

回望:假如你不将float的元素的position设定成relative的话,你想根据设定float元素的z-index来的做到遮盖position:absolute是失效的。同理,float元素下面存在position: absolute的子元素,假如你不将float的元素的position设定成relative的话,absolute元素是不容易精准定位到float元素的。

4)另外运用position: absolute和float: left会致使消除波动失效(position: relative则能够消除波动)。
常见的消除波动的方式有两种:

    根据在器皿中加上1个标识,设定该标识的款式为 clear: both器皿设定overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;"> <div style="float: left; position: absolute;">我是DIV</div> <div style="clear: both;"></div><div>