position属性和float属性——对文档流的影响
程序员文章站
2022-03-02 15:37:31
...
position
属性
定义和用法:position
属性用于指定一个元素在文档中的定位方式。top
,right
,bottom
,left
属性则决定了该元素的最终位置。
参数
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于最近的非 static 祖先元素 定位。当这样的祖先元素不存在时,则相对于根级容器定位 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位 |
relative | 生成相对定位的元素,相对于其正常位置进行定位 |
static | 默认值,没有定位,元素出现在正常流中 (忽略top,bottom,left,right或者z-index声明) |
inherit | 规定应该从父元素继承的position属性的值 |
文档流
- 内联元素默认从左到右,遇到阻碍或者宽度不够自动换行,继续按照从左到右的方式布局
- 块级元素单独占据一行,并按照从上到下的方式布局
脱离文档流
- 文档脱离文档流后,父元素的高度就不包括它了
- 脱离文档流的方法:
float:left;
position:absolute;
position:fixed;
代码演示
基础模板如下:
<div class="parents">
<div class="child1">小黑</div>
<div class="child2">小红</div>
<div class="child3">小绿</div>
</div>
.parents{
border: 3px solid pink;
}
.parents>div{
width:50px;
height:30px;
}
.child1{
border: 3px solid black;
color: black;
}
.child2{
border: 3px solid red;
color: red;
}
.child3{
border: 3px solid green;
color: green;
}
方式一:加float:left;
脱离文档流
.child1{
/* 让小黑边框细一点,才能看到小红的边框 */
border: 2px solid black;
color: black;
/* 添加: float: left; 让“小黑”脱离文档流 */
float: left;
}
由上图可以看出:
“小黑”的样式加上:float:left
,使它脱离了文档流;
导致父元素“小粉”的高度就不包括“小黑”的高度了(它现在的高度是“小红”+“小绿”的高度)
可怜的“小红”被挤到下面去了
方式二:加 position:absolute;
脱离文档流
.child1{
/* 让小黑边框细一点,才能看到小红的边框 */
border: 2px solid black;
color: black;
/* 添加: position:absolute 让“小黑”脱离文档流 */
position: absolute;
}
由上图可以看出:
“小黑”的样式加上:position: absolute;
,使它脱离了文档流;
导致父元素“小粉”的高度就不包括“小黑”的高度了(它现在的高度是“小红”+“小绿”的高度)
“小黑”覆盖在了“小红”的身上
方式三:加 position:fixed;
脱离文档流
.child1{
/* 让小黑边框细一点,才能看到小红的边框 */
border: 2px solid black;
color: black;
/* 添加: position: fixed; 让“小黑”脱离文档流 */
position: fixed;
}
同理,如方式二的position:absolute;
脱离文档流方式总结:
-
float:left;
position:absolute;
position:fixed;
都可使元素脱离文档流 - 有没有发现
float:left;
脱离的不太彻底,“浮动的小黑”影响了“小红”,它并没有像position:absolute;
position:fixed;
一样,覆盖在“小红身上”
浮动的目的:
最初时,浮动只能用于图形(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。后来,CSS才允许可以浮动任何元素;
绝对定位和浮动的区别:
-
绝对定位是将元素彻底从文档流中删除,并相对于其包含块定位;
元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素也不会影响到其他元素的布局。 -
浮动,会以某种方式将浮动元素从文档的正常流中删除,并把元素向左或向右浮动,不过它还是会影响布局。
如上图:
“小黑”浮动后,脱离了文档流(“小红”占据了“小黑”原来的空间,看边框颜色!)
但是“小红”里的文字并没有随之占据“小黑”的位置,而是环绕在浮动之后的“小黑”旁边。
这就是为了避免“小黑”把“小红”里的文字给覆盖了,这就是浮动的目的
相对定位relative
对文档流的影响
.child1{
border: 3px solid black;
color: black;
position: relative;
top:10px;
left: 25px;
}
由上图可以看出:
- 相对定位
relative
并没有影响父元素的高度
对元素进行相对定位,其父元素的真实空间位置还是原来的位置,只是肉眼看到的新位置相对于原来的位置进行移动,所占据的真实空间是不变的。
面试到这个了啊!!!你能看到这就是赚了啊!!!不用谢~