浮动
如果将元素的定位方式设定为浮动定位的话,那么它将具备以下特征:
1、浮动元素 会被排除在文档流之外-脱离文档流,不占据页面空间,其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边,或平级的其他已浮动元素的边缘上
3、浮动元素只会在当前行内浮动
4、浮动元素依然位于包含框之内
5、浮动定位解决的问题-让多个块级元素在一行内显示
属性:float
取值:1、none,默认值,无浮动定位
2、left,左浮动,让元素停靠在父元素的左边,或紧挨着左侧已有的浮动元素
3、right,右浮动,让元素停靠在父元素的右边,或紧挨着右侧已有的浮动元素
浮动引发的特殊效果
1、当父元素的宽度已显示不下所有的已浮动子元素时,那么最后一个子元素将换行显示(有可能被卡住)
2、元素一旦浮动起来之后,元素的宽度将变成自适应(内容决定宽度,行内块元素特征),前提:不指定元素宽度的情况下
3、元素一旦浮动起来之后,都将变成块级元素,尤其对行内元素影响较大
块级元素:允许修改尺寸
行内元素:不允许修改尺寸
4、文本,行内元素,行内块元素时采用环绕的方式来排列的,是不会被浮动元素压在底下的。
清除浮动影响
属性:clear
取值: 1、none,默认值,不做任何清除操作
2、left,清除该元素左边(上边)的浮动元素所带来的影响
3、right,清除该元素右边的浮动元素所带来的影响
4、both,清除该元素两边的浮动元素所带来的影响
浮动元素对父元素所带来的影响
影响:由于浮动元素脱离文档流,所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话,那么该元素的高度将变成0
解决方案:1、直接设置父元素高度
弊端:必须要知道父元素高度是多少
2、设置父元素也浮动
弊端:对后续元素会带来位置的影响
3、为父元素设置 overflow 属性
取值:hidden 或 auto或是scroll
弊端:如果有内容要以溢出的方式显示的话,也一同被隐藏了。
4、:after伪元素,最推荐的做法
.clear::after{
content:’’,
display:block;
clear:both;
Heigth:0;
visibility:hidden
}
.clear{
/IE6、7专用/
*zoom:1;
}
5、在父元素中,追加空子级块级元素,并设置其clear属性值为 both,原理跟4其实是一样的
定位属性:position
取值:1、static,默认值,默认定位方式
2、relative,相对定位
3、absolute,绝对定位
4、fixed,固定定位(必须给宽度)
5、sticky,粘性定位
注意:position取值为 relative,absolute,fixed 的元素被称为 已定位元素
偏移属性
作用:移动已定位元素
属性:top:值;
bottom:值;
l left:值;
right:值;
注意:添加了定位的行内元素可以设置宽度,块级元素如果没有设置宽高就根据内容自适应
p{
position:absolute;
top:50px;
left:100px
}
相对定位
position:relative,
作用:元素会相对于它原来的位置偏移某个距离,元素移动位置后,原来所占据的空间依然会保留,可以设置margin:auto水平居中
语法:属性:position:relative,配合着 偏移属性 实现位置的移动
绝对定位
position:absolute
绝对定位的特征
1、元素会脱离文档流,不可以设置margin:auto水平居中
2、相对于最近的已定位的祖先元素 来实现位置的初始化
3、如果元素没有已定位祖先元素,那么它的位置就相对于最初的包含块(body,html)
语法:属性:position:absolute,配合着 偏移属性 实现位置的初始化或移动
注意:1、绝对定位的元素会变成块级
2、绝对定位的元素可以使用 margin来改变位置,但是 margin:auto 会失效
固定定位
position:fixed(必须给宽度)
特征:将元素固定在网页的某个位置处,不可以设置margin:auto水平居中
不会随着滚动条而发生位置的变化
语法:position:fixed,配合偏移属性 改变元素位置
注意:固定定位永远都是相对于浏览器窗口进行位置初始化的。
粘性定位
position:sticky
特征:1、以浏览器的可视窗口为参照点移动元素(固定定位特点)
2、粘性定位占有原先的位置(相对定位特点)
3、必须添加top、bottom、left、right其中一个才有效
![img](file:///C:\Users\hhr\AppData\Local\Temp\ksohtml11572\wps4.jpg)
当div距离可视窗口顶部为0时,div就固定了,不随页面滚动
堆叠顺序
1、作用:处理 已定位元素的 堆叠效果
2、默认堆叠效果
平级元素-后来者居上
子元素压在父元素之上-子压父
3、属性:z-index,取值:数值越大越靠上
4、注意
取值可以为负,取值为负时,当前元素会位于页面正常显示内容之下
z-index 是无法改变父子关系的堆叠顺序