关于定位

已知的定位方法可以说有三种

一种是使用margin:0 auto定位

一种是使用float定位

另一种则是position子绝父相进行定位

 

首先来说第一种margin:0 auto

这种定位的方式有限制,

margin:0 auto是在已知width和hight的情况下使用才有效,

并且margin:0 auto的意思是设置外边距margin上下为0px,左右设置为auto

所以效果会显示为贴顶边水平居中显示,

要想再设置垂直居中的话可以根据具体情况设置margin的上下距离

 

接下来是第二种float

float意为浮动,可以单独使用

一般会设置为float:left/right

但是浮动的不确定因素太多,会因其他属性的设置而受到不同影响

且会有将图片设置为文字环绕式的情况

所以一般会在比较简单的页面使用

 

那么最后,就是在复杂页面使用也不大会出错的position定位方式

首先,position有五种设置,分别为:

static(默认定位)

fixed(固定定位)

sticky(粘性定位)——一般会使用在网页的导航条中

relative(相对定位)

absolute(绝对定位)

其中relative和absolute两者最为常用,搭配为子绝父相

也就是说在父级元素设置了相对定位的情况下,子级元素要设置绝对定位position才能生效

然后就可以针对情况设置left/right/top/bottom值

 

一般情况下,三种方式都是单独使用的,

但是也有特殊情况,

那么下期再讲

以上