属性

display

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
常用取值:

  • none   此元素不会被显示
  • block   此元素将显示为块级元素
    • 此元素前后会带有换行符，通常被现实为独立的一块，会单独换一行
    • 默认情况下，block元素宽度自动填满其父元素宽度
    • block元素可以设置width,height属性，块级元素即使设置了宽度,仍然是独占一行
    • block元素可以设置margin和padding属性
  • inline   默认。此元素会被显示为内联元素
    • 此元素前后没有换行符，一系列inline元素都在一行内显示，直到该行排满
    • 其宽度随元素的内容而变化
    • inline元素设置width,height属性无效
    • inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果
  • inline-block   简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性

position

这个属性定义建立元素布局所用的定位机制

  • static   元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  • relative   元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
  • absolute   元素框从文档流完全删除，并相对于其包含块（离元素最近的块级祖先元素）定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  • fixed   元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

布局

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
position属性