欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;
}

position属性和float属性——对文档流的影响
方式一:加float:left; 脱离文档流

.child1{
	/* 让小黑边框细一点,才能看到小红的边框 */
	border: 2px solid black;
	color: black;
	/* 添加: float: left; 让“小黑”脱离文档流 */
	float: left;
}

position属性和float属性——对文档流的影响
由上图可以看出:
“小黑”的样式加上:float:left,使它脱离了文档流;
导致父元素“小粉”的高度就不包括“小黑”的高度了(它现在的高度是“小红”+“小绿”的高度)
可怜的“小红”被挤到下面去了

方式二:加 position:absolute;脱离文档流

.child1{
	/* 让小黑边框细一点,才能看到小红的边框 */
	border: 2px solid black;
	color:   black;
	/* 添加: position:absolute 让“小黑”脱离文档流 */
	position: absolute; 
}

position属性和float属性——对文档流的影响
由上图可以看出:
“小黑”的样式加上:position: absolute;,使它脱离了文档流;
导致父元素“小粉”的高度就不包括“小黑”的高度了(它现在的高度是“小红”+“小绿”的高度)
“小黑”覆盖在了“小红”的身上

方式三:加 position:fixed;脱离文档流

.child1{
	/* 让小黑边框细一点,才能看到小红的边框 */
	border: 2px solid black;
	color: black;
	/* 添加: position: fixed; 让“小黑”脱离文档流 */
	position: fixed;
}

position属性和float属性——对文档流的影响
同理,如方式二的position:absolute;

脱离文档流方式总结:
  • float:left; position:absolute; position:fixed; 都可使元素脱离文档流
  • 有没有发现float:left; 脱离的不太彻底,“浮动的小黑”影响了“小红”,它并没有像position:absolute; position:fixed;一样,覆盖在“小红身上”
    position属性和float属性——对文档流的影响
    浮动的目的:
    最初时,浮动只能用于图形(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。后来,CSS才允许可以浮动任何元素;

绝对定位和浮动的区别:

  • 绝对定位是将元素彻底从文档流中删除,并相对于其包含块定位;
    元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素也不会影响到其他元素的布局。
  • 浮动,会以某种方式将浮动元素从文档的正常流中删除,并把元素向左或向右浮动,不过它还是会影响布局。
    如上图:
    “小黑”浮动后,脱离了文档流(“小红”占据了“小黑”原来的空间,看边框颜色!)
    但是“小红”里的文字并没有随之占据“小黑”的位置,而是环绕在浮动之后的“小黑”旁边。
    这就是为了避免“小黑”把“小红”里的文字给覆盖了,这就是浮动的目的

相对定位relative对文档流的影响

.child1{
	border: 3px solid black;
	color: black;
	position: relative;
	top:10px;
	left: 25px;
}

position属性和float属性——对文档流的影响
由上图可以看出:

  • 相对定位relative并没有影响父元素的高度
    对元素进行相对定位,其父元素的真实空间位置还是原来的位置,只是肉眼看到的新位置相对于原来的位置进行移动,所占据的真实空间是不变的。

position属性和float属性——对文档流的影响
面试到这个了啊!!!你能看到这就是赚了啊!!!不用谢~