CSS
文档流
标签在网页中的默认排放顺序
浮动
使标签脱离原来的文档流 在父标签中浮动起来
通过< float >设置 left向左浮动 none不浮动 right向右浮动
.f1{
float: left;
<!---向左浮动--->
background-color: cornflowerblue;
height: 60px;
padding: 2px 100px;
}
行级标签和块级标签都可以浮动 一个行级标签浮动起来会变成块级标签 当行标签浮动起来之后 , 宽度默认是内容的宽度 所以一般情况下 , 会为其指定宽度
浮动标签不会撑开父标签
清除浮动
清除标签周围的浮动对标签的影响 其他标签位置不发生变化
<div style="clear"></div>
<!---left 忽略左侧浮动--->
<!---right 忽略右侧浮动--->
<!--- both 忽略全部浮动--->
定位
允许标签相对于其他正常位置 或者相对于一个父标签 , 另一个标签 , 浏览器窗口本身而出现的位置
相对定位
相对于起点移动 , 移动后原来的位置还被占用着
.n1{
background-color: #0000FF;
width: 100px;
height: 100px;
<!---开启相对定位
距离顶部0px
距离左边0px
--->
position: relative;
top: 0px;
left: 0px;
}
相对定位的特点
开启相对定位后 , 不设置偏移量 , 标签不会发生任何变化
相对定位是相对于原来在文档流中的原来位置进行定位
相对定位的标签不会脱离原来的文档流
不会改变标签的性质
绝对定位
绝对定位不会占用空间,绝对定位会使标签浮动起来,视觉上会与其他标签重合
.n2{
background-color: #6495ED;
width: 100px;
height: 100px;
<!---开启相对定位
top left right bottom 设置偏移量
--->
position: absolute;
top: 30px;
left: 30px;
}
绝对定位的特点
标签会脱离原来的文档流
开启后如果不设置偏移量,标签的位置不会发生变化
开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化
绝对定位是相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位 如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位)
会将行级标签变为块级标签
z-index
可以设置标签的堆叠顺序----如果定位标签的层级是一样,下边的标签会盖住上边的标签
通过z-index属性可以用来设置标签的层级-------可以为z-index指定一个正整数作为值,该值将会作为当前标签的层级 层级越高,越优先显示
必须开启定位的标签才可以使用z-index