0408布局中的位置问题

绝对定位与相对定位

position的参数:
static :  默认属性,对象遵循正常文档流,top,right,bottom,left等属性不会被应用。
relative : 相对定位,脱离文档流,但是在文档中的位置依然存在,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。相对body定位。偏移的位置是相对于自己在文档流中原有的位置
absolute : 绝对定位,对象脱离正常文档流,在正常文档流中的位置不存在,使用left、right、top、bottom等属性进行绝对定位。而其层叠通过[css z-index]属性定义。此时对象不具有边距,但仍有补白和边框。相对html定位,或者相对父元素非“position:static”的元素定位。
fixed: 固定定位,对象脱离正常文档流,相对于父元素的定位,父元素一般为浏览器窗口,需要配合top,left,right,bottom,z-index等属性(IE6不支持)。

注意:

  • 我们如果使用absoulte或fixed定位的话,必须指定 left、right、 top、 bottom 属性中的至少一个,否则left/right/top/bottom属性会使用它们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递,简单讲就是都变成relative,会占用文档空间,这点非常重要,很多人使用absolute定位后发现没有脱离文档流就是这个原因,这里要特别注意~~~
    •如果top和bottom一同存在的话,那么只有top生效。
    •如果left和right一同存在的话,那么只有left生效。
  • 使用static 定位或无position定位的元素z-index属性是无效的,即(z-index为整数,可为负,仅能在定位元素上奏效,如position:absolute、relative、fixed;)
  • margin的auto属性的作用是用来分配剩余空间。内联元素,不是占一整行,没有剩余空间,如,
    ,,,。块级元素需要设置宽度,如果没有宽度的块默认就是100%,就没有auto值了。

设置块级元素水平垂直居中

  • 方法一(弊端:需要计算块级元素的一半,来进行偏移)
    position: absolute;top:50%;left: 50%;margin-left: -25px;margin-top: -25px
  • 方法二(translate方法中的参数分别指x、y方向的偏移,适用于底部居中等)
    position: absolute;top: 50%;left:50%;transform:translate(-50%,-50%)"
  • 方法三(推荐使用)
    position: absolute;top: 0;bottom: 0;left:0;right:0;margin: auto
  • 注意fixed的顶部水平居中
    position: fixed; top:0; left:0; right:0;margin-left:auto; margin-right: auto;

注意:
一般块级元素水平居中用margin:0 auto;即可。
文字水平居中:单行文字用text-align:center,多行文字参照块居中。垂直居中,将文本的line-height设置父元素的高度

flex布局

float浮动

手册解释:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
(那浮动float的本意是什么呢?是:让文字像流水一样环绕浮动元素。用浮动实现页面布局本不是浮动该干的事情)
取值:默认none,元素不浮动,并会显示在其在文本中出现的位置。left左浮动。right右浮动。inherit从父元素继承float属性的值。

你可能感兴趣的:(0408布局中的位置问题)