CSS的position精准定位和float波动详解

2021-01-20 18:26 jianzhan

1、position精准定位

(1):position的特性

1.absolute:转化成肯定精准定位的元素,相对近期1级精准定位并不是static的父元向来开展精准定位;

2.relative:转化成相对性精准定位的元素,相对其所属一般的文本文档流部位开展精准定位;

3.static:默认设置值,沒有精准定位,元素出現在一切正常的文本文档流中;

4.fixed:老IE不适用,和absolute1致,相对对话框开展精准定位,当出現翻转条时,不伴随着翻转而翻转;

5.sticky:(CSS3)有适配性难题,它就好像relative和fixed的合体,当在显示屏中时按基本流排版,当卷动到显示屏外时则主要表现如fixed。该特性的主要表现是实际中你见到的吸附实际效果。

(2):有关position应用1般会引起的难题

 1.倘若有1个默认设置100%宽度的div,1旦再加absolute肯定精准定位,该元素立马inline-block化,默认设置宽度就会自融入元素內部宽度,会致使网页页面的宽高塌陷。

 2.因为absolute肯定精准定位的灵便性,针对一般的网页页面合理布局,有时出于方便的缘故很非常容易导致absolute/relative/top/left/z-index的乱用,这样会使后期的拓展和维护保养导致不便

(3):position编码示例

1.relative相对性精准定位。

目标2相对本身文本文档流原先部位挪动,并还占有着文本文档流,下面的黄色块再次依照它原先的部位往下排序,relative仅仅是视觉效果上部位变了。

<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px}
#position1 {height: 100px;background: green;}
#position2 {height: 100px;background: blue;position: relative;top: 10px;left: 50px;}
#position3{height: 100px;background: yellow;color: #000}
</style>
<body>
<div class="aa">
    <div id="position1">目标1</div>
    <div id="position2">目标2</div>
    <div id="position3">目标3</div>
</div>
</body>

2.absolute肯定精准定位

目标1absolut特性相对父级div偏位,摆脱文本文档流,宽高塌陷,在文本文档流之上。

<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px;position: relative;}
#position1 {height: 100px;background: green;position: absolute;top: 10px;left:50px; }
#position2 {height: 100px;background: blue;}
#position3{height: 100px;background: yellow;color: #000}
</style>
</head>
<body>
<div class="aa">
    <div id="position1">目标1</div>
    <div id="position2">目标2</div>
    <div id="position3">目标3</div>
</div>

2、float波动

(1)float的界定

float 特性界定元素向左/右方位波动。波动元素会转化成1个块级框,而无论它自身是何种元素。

float的值:left/right/none

(2)float完成文本围绕

带有波动特性的元素还可以使元素inline-block化,具备包裹性,使得元素企业兼并了块元素和内联元素的的优势。带有波动特性的元素会摆脱规范流开展排序合理布局,摆脱规范流后的波动元素漂浮在一切正常块元素上面,可是仍然占有一切正常文本文档流的文字室内空间,使得后边的文字以除波动元素以外的室内空间为排序标准,产生了文字围绕的实际效果。

<style>
.a{width: 200px;height: 400px;margin: 0 auto;border: 1px solid #000;}
.pic{float: left;}
p{font-size: 16px;line-height: 18px;font-family: "Microsoft Yahei"}
</style>
</head>
<body>
<div class="a">
    <img src="2.jpg" width="100" width="100" class="pic">
    <p>这是1段检测文本啦啦啦啦啦这是1段检测文本啊啊啊啊啊这是1段文本显示信息呐呐呐呐这是1段文本显示信息啦啦啦啦啦</p>
</div>

(3)float波动合理布局

规范文本文档流从上到下排序。

div1向左float后,很显著,高宽比塌陷,div2和div3和div1重合。

(4)为何要消除波动和消除波动的几个方式

因为波动致使元素高宽比塌陷造成不良反应,父级盒子的边框不可以被撑开,情况不可以显示信息,父子级间的margin和padding设定值不可以正确被显示信息。

<style>
.div1{width: 400px;border: 2px solid #000;}
.div2{width: 100px;height: 100px;background: blue;float: left;}
.div3{width: 100px;height: 100px;background: green;float: right;}
</style>
</head>
<body>
<div class="div1">
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</div>

方式1:在父级完毕前,加上1个子标识<div style="clear:both;"></div>

<div class="div1">
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div style="clear:both;"></div>
</div>

方式2:在父级css特性再加入overflow:hidden;zoom:1;或overflow:auto;zoom:1;

方式3:在父级用zoom+:after方式,基本原理相近于clear:both,运用CSS方法:after在元素內部加1个clear:both的元素块

.box1{zoom:1;}
.box1:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

方式4:对父级设定适合的高宽比立即撑开

(5)float和JavaScript 

IE访问器:

obj.style.styleFloat = "left";

别的访问器:

obj.style.cssFloat = "left";

以上便是本文的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,另外也期待多多适用脚本制作之家!