CSS--脱流和居中

• CSS布局

  • 从上到下，从左到右

• 脱离标准流的方法有

  • float属性

  • position属性 和 left、right、top、bottom属性

---

CSS布局-float

• float属性的常见取值有
  • left：脱离标准流,浮动在父标签的最左边(默认)

  • right：脱离标准流,浮动在父标签的最右边

    
    float-left.png

CSS布局-float用法参考

---

CSS布局-position（子绝父相）

| 值 | 简介 |
| : | : |
| 1.absolute | 1.生成绝对定位的元素，相对于static定以外的第一个元素进行定位； 2.元素的位置通过“left”、“right”、“top”、“bottom”属性进行规定 |
| 2.fixed | 1.生成绝对定位的元素，相对于浏览器窗口进行定位； 2.元素的位置通过“left”、“right”、“top”、“bottom”属性进行规定 |
| 3.relative | 1.生成相对定位的元素，相对于其正常位置进行定位； 2.因此，“left”：20会向元素的LEFT位置添加20的像素 |
| 4.static | 默认值，没有定位，元素出现在正常的流中（忽略“left”、“right”、“top”、“bottom”或者“z-index”）声明 |
| 5.inherit | 规定应该从父元素继承position属性的值 |

position属性.png

CSS布局-position用法参考

---

居中

• 所有的标签水平居中

  • 行内标签和行内-块级标签居中 在父标签中设置： text-align：center
  • 块级标签： 让内容居中在自身中设置： margin：0 auto

• 所有的标签垂直居中

  • 行内标签和行内-块级标签居中 在父标签中设置： line-height：等于父标签的高度

  • 块级标签：如图

    
    块级标签的垂直居中方式.png