一、元素的浮动
1、元素的浮动属性
浮动是指设置了浮动属性的标签会脱离标准文档流(标准文档流指的是内容元素排版布局过程中,会自动从左往右,从上往下进行流式排列)的控制,移动到其父标签中指定位置的过程。
语法格式:选择器{float:属性值;}
属性值 | 描述 |
left | 标签向左浮动 |
right | 标签向右浮动 |
none | 标签不浮动(默认值) |
2、清除浮动
在网页中,当一个元素被设为浮动后,就不再占用标准文档流的位置,与该元素相邻的其他元素,会受浮动的影响,产生位置上的变化。如果要避免浮动对其他元素的影响,就需要清除浮动。
语法格式:选择器{clear:属性值;}
属性值 | 描述 |
left | 不允许左侧有浮动标签(清除左侧浮动的影响) |
right | 不允许右侧有浮动标签(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
2.1 使用空标签清除浮动
在浮动元素之后添加空标签,并对该空标签应用“clear:both;”样式,可清除元素浮动所产生的影响。
2.2 使用overflow属性清除浮动
浮动元素的父元素添加overflow:hidden;或overflow:auto;也可以清除浮动。overflow属性清除浮动的方法弥补了空标签清除浮动的不足,不会在页面中添加不必要的元素结构。
2.3 使用after伪对象清除浮动
after伪对象清除浮动的实现原理和空标签清除浮动的原理类似。区别在于空标签清除浮动是在结构中插入一个没有内容的标签,而after伪对象清除浮动是利用其伪类“:after”在元素内部增加一个类似于空标签的效果。
注意:
- 必须为需要清除浮动的元素伪对象设置“height:0;”样式,否则该元素会比其实际高度高出若干像素。
- 必须在伪对象中设置content属性,属性值可以为空。
3、overflow属性
overflow属性是CSS中的重要属性,除了用于清除浮动之外,当盒子内的元素超出盒子自身的大小时,该属性还可用于溢出内容的显示方式。
语法格式:选择器{overflo属性值
属性值 | 描述 |
visible | 内容不会被修剪,会呈现在元素框之外(默认值)。 |
hidden | 溢出内容会被修剪,并且被修剪的内容是不可见的。 |
auto | 在需要时产生滚动条,即自适应所要显示的内容 |
scroll | 溢出内容会被修剪,且浏览器会始终显示滚动条。 |
二、元素的定位
1、元素的定位属性
1.1 定位模式
在CSS中,position属性用于设置元素的定位模式。
语法格式:选择器{position:属性值;}
属性值 | 含义 |
static | 静态定位(默认定位方式) |
relative | 相对定位,相对于原文档流的位置进行定位 |
absolute | 绝对定位,相对于上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
1.2 边偏移
在CSS中,通过边偏移属性,可以精确设置定位元素的位置。
边偏移属性 | 描述 |
top | 顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离。 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离。 |
2、静态定位
静态定位是元素的默认定位方式,当position属性的取值为static时,元素为静态定位模式。静态定位就是指各元素在HTML标准文档流中默认的位置。
任何元素在默认状态下都会以静态定位来确定自己的位置。所以当元素没有设置position属性时,并不是说明该元素没有自己的位置,它会遵循默认值显示为静态位置。在静态定位状态下,我们无法通过边偏移属性来改变元素的位置。
3、相对定位
相对定位是将元素相对于它在标准文档流中的位置进行定位,当position属性的取值为relative时,可以将元素设置为相对定位。
我们对元素设置相对定位后,可以通过边偏移属性改变该元素的位置,但是这个标签在文档流中的位置仍然保留。
4、绝对定位
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素进行定位,若所有父元素都没有定位,设置绝对定位的元素会依据body元素(也可以看做浏览器窗口)进行定位。当position属性的取值为absolute时,可以将元素的定位模式设置为绝对定位。
注意:
- 如果仅对标签设置绝对定位,不设置边偏移,则标签的位置不变,但该标签不再占用标准文档流中的空间,会与位置上移的标签重叠。
- 定义多个边偏移属性时,如果同时设置left和right参数值,以left参数值为准;如果同时设置top和bottom参数值,以top参数值为准。
5、固定定位
当元素的position属性的取值为fixed时,该元素的定位模式为固定定位。
元素特性:
- 固定定位是相对于“当前浏览器窗口”来进行的定位。
- 设置固定定位的元素不再占用标准文档流的空间,元素层级要高于普通元素,跟“浮动”类似
- 设置固定定位的元素,是一个“块元素”,即使行内元素使用fixed定位,也将转成“块元素”。
- 如果只指定了fixed定位属性,并没有设置偏移量,则元素会固定在其原始位置。
6、z-index属性
z-index属性用于调整层叠等级,该属性取值可为正整数、负整数和0,默认状态下z-index的属性值为0。z-index属性取值越大,设置该属性的定位元素在层叠元素中越居上。
注意:z-index属性仅对定位元素生效