快速理解页面布局中浮动和定位的概念
作者:互联网
浮动和定位
浮动
浮动标签:float;
其具有属性有:left/right/none
float:left;左浮动
float:right;右浮动
float:none;没有任何效果
使用浮动后,页面会有两层:普通文档流和浮动层;当元素浮动后,元素大小不变,不占有原来的位置,且飘于浮动层。
元素浮动起来之后,不占有原来的位置。如果后面有元素,会自动替补上一元素的位置。
left、right浮动方向顾名思义向左或者向右浮动。
给出以下范例便于理解。
1、当元素不浮动时,观察三个小方块红绿蓝的位置分别在九宫格的第一四七的位置上。
2、当一个小方块红色向左浮动时,观察三个小方块的位置。
观察结果,发现绿色小方块“不见了”,而蓝色小方块占据了原来绿色方块的位置,红色方块位置不变。
当红色方块变成右浮动时,发现红色方块跑到九宫格三号位置,绿色占据红色原来的位置(即九宫格一号位置),蓝色跑到了绿色的位置。
由以上,可以得出浮动后元素不再占有原来的位置,而处于浮动层。其他元素的位置会受其影响(替补浮动元素的位置)。
3、当将三个小方块都左浮动时,发现三个小方块可以并排一行。由此我们可知,浮动后的元素具有行内块元素的性质,不独占一行,可设置宽高。
<style>
.father{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
}
.son1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.son2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.son3{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
以上是浮动的样式代码。
定位
定位分为相对定位,绝对定位和固定定位三种。定位一般用在微小调整某一元素的位置。
相对定位:元素相对于自身原来位置的左顶点进行偏移。关键字:position:relative;
由上面两张图可知,第一张是蓝色方块原始所在位置,第二张图是将方块进行了相对定位,距左边和顶部各100px。
也从而可以得出相对定位不脱离文档流,且占有原来的位置,移动的参考位置是原始位置的左顶点。
绝对定位:元素相对于页面的左顶点进行移动。关键字是:position:absolute;
由上面两张图知,绝对定位所参考的位置是页面左顶点。(此时移动距离也是左边和顶部各100px)绝对定位后元素脱离文档流,不再占有原来的位置。
固定定位:与绝对定位相似,始终是以页面左顶点为参考位置来进行移动的。一旦进行固定定位后,无论页面怎么滑动,元素始终在所定位的位置。关键字position:fixed; 此种定位方法比较适合做网页的侧边栏。
上述中讲到固定定位与绝对定位还有不同点,其不同之处体现在绝对定位和相对定位可以结合起来使用,即子绝父相布局。此时绝对定位所参考的移动位置就变成了父元素的左顶点了,就不再是页面的左顶点。
标签:浮动,定位,元素,小方块,位置,100px,页面 来源: https://blog.csdn.net/weixin_44291183/article/details/114849950