css定位
css的定位有:
1、普通流定位
普通流定位又称为“文档流定位”,即页面中默认的定位
特点: 所有的元素默认从其父元素左上角开始出现;所有的块级元素,按从上到下排列,每个元素独占一行;页面中行内元素,按照从左到右的方式排列,一行显示不下则换行。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #d1{ width:100px; height:100px; background:pink; } </style> </head> <body> <div id="d1">我是块级元素div</div> <span style="background:yellow">我是行内元素span1</span> <span style="background:green">我是行内元素span2</span> <p style="background:greenyellow">我是块级元素p</p> </body> </html>
2、浮动定位
页面中所有的元素都可以设置浮动
float:left/right/none/both
特点:将元素排除在普通流之外,即脱离文档流,那么元素将不再页面占据空间,但是元素依然在页面中显示,而且后面没有浮动的元素要上前占位;浮动元素会停靠在其父元素的左边或者右边,或其他已经浮动元素的边缘上;浮动元素处理的问题,让块级元素能够在一行显示‘浮动元素只能在当前行显示。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ float:left; width:100px; height:100px; } #d4{ float:right; } </style> </head> <body> <div id= "d1" style="background:greenyellow"></div> <div id= "d2" style="background:yellow"></div> <div id= "d3" style="background:pink"></div> <div id= "d4" style="background:gray"></div> </body> </html>
注意:浮动定位会引发特殊的效果,如果一行显示不下所有的浮动元素,那么最后一个会换行,但是可能被卡住,是由于上一行某个浮动元素的高度比其他的都大,所以,换行的浮动元素被卡住;元素一旦浮动,宽度则以内容为准,当然前提是没有设置宽度;元素浮动后,该元素将变成块级元素,可以设置高度和宽度(行内元素设置宽高是无效的,行内元素设置宽高有效);
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #s1{ background:pink; width:200px; height:100px; } #s2{ background:yellow; width:200px; height:100px; float:left; } </style> </head> <body> <span id="s1">我是没有浮动的span</span> <span id="s2">我是浮动了的span</span> </body> </html>
******有一个问题**** 没有浮动的元素并没有压在浮动的元素下,是因为图片,文字,行内块元素,采用的是“环绕”的方式排列,是不能被浮动压在下面的。
*****清除浮动*** clear:none/left/right/both ---> 清除当前元素前面的一个元素浮动带来的影响
****浮动元素对父元素的影响*****:
由于浮动元素不占据页面空间,所以他也就不占据父元素高度
解决方法:
直接设置父元素的高度,不好的一点就是有时候并不知道父元素的高度;
将父元素也进行浮动设置,不好的一点就是不是所有的时候都要对父元素进行浮动设置,而且父元素浮动,对他后面的元素位置也会有影响;
为父元素设置overflow:hidden/auto(overflow可以做溢出处理,也可以撑起浮动元素的父元素的高度),不好点一点,有需要溢出显示时会被隐藏;
clear所有的浮动:both,在父元素中追加一个空的块级元素,并设置clear为both;
*******定位*********
定位方式属性:
position:static/relative/absolute/fixed
如果取值为relative/absolute/fixed其中的之一 ,则该元素则被称为“已定位元素”
偏移属性:
作用:为了修改“已定位元素”的位置
属性:top 以元素的上边为基准变,改变元素的偏移距离
bottom 以元素的下边为基准变,改变元素的偏移距离
left 以元素的左边为基准变,改变元素的偏移距离
right 以元素的右边为基准变,改变元素的偏移距离
向内的都是正直,向外的都是负值。
堆叠顺序
修改“已定位元素”们之间的堆叠效果,层叠顺序
属性:z-index (值为无单位的数字)
该属性可以设置任何整数值,数值越大,所排列的顺序越靠前。
3、相对定位
position:relative
一般配合偏移属性实现定位
元素相对于自己原来的位置发生的位置的改变,而且该元素原来占据的位置依然保留,不会被其他元素占据
使用于元素位置的微调
4、绝对定位
position:absolute
一般配合偏移属性来实现定位
特点:脱离文档流,不占据页面空间,会压在其他元素之上
绝对定位的元素会相对于离他最近的、已经定位的祖先元素来实现位置的初始化
如果元素没有已定位的祖先元素,那么他则会相对于body来实现初始化
******小窍门*****
一般情况下,绝对定位的元素一定会有一个已经定位了的祖先元素,多数都是由直接父元素来充当这个已经定位了的
影响:
脱离文档流
绝对定位的元素会变成块级元素
margin可以正常使用,但是左右auto值失效
绝对定位的元素将left、right、bottom、top设置为0的情况下,会使整个元素变得绝对居中,(auto只对左右有效)
5、固定定位