04前端_css定位

我妈被🐕咬了，尬

 

float和position

css的定位机制主要有标准流、浮动、绝对定位

标准流

• 标准流的元素默认自动从左到右、从上向下排列

浮动

• 浮动只能向左或者向右，不能上下

• 浮动元素碰到另一个包含框或浮动框，就停止浮动

• 浮动只影响后面的元素，不影响前面的元素

• 浮动之后脱离文档流，但是仍然占据文本流

浮动属性

• float：left|right|none

清除浮动的方法

• 在浮动元素后使用一个空元素 <div class = 'clear'></div> clear:none|left|right|both

• 给浮动的元素的容器添加overflow:hidden;

• 使用:after伪元素清楚浮动 .clearfix:after{ ​ content:'0'; ​ display:block; ​ height:0; ​ visibility:hidden; ​ clear:both; } .clearfix{zoom:1}

定位disposition（子绝父相）

定位是由定位模式+边偏移组成

• 定位定位

  • static静态定位（无定位、没有边偏移）

    • 使元素定位于常规自然流中

    • 如果两个相邻的元素都设置了外边距，那么最终会显示较大的外边距

  • relative相对定位

    • 相对与他原来的位置（自恋）

    • 相对定位的元素不会离开常规流（心念家乡）

    • 可以使用边偏移top|right|bottom|left|z-index进行相对定位

    • 任何元素都可以设置relative，他的绝对定位的后代都可以相对于它进行绝对定位

  • absolute绝对定位

    • 脱离常规流

    • 相对父元素进行定位，如果父元素没有定位以最近一级有定位的祖先元素进行定位，如果没有祖先元素以浏览器为准定位

  • fixed固定定位

    • 相对于视图窗口定位

    • 和父元素没有任何关系

    • 固定定位不占有原来的位置

  • sticky磁贴定位

    • 相对于视图窗口定位

    • 占有原来的位置

• 边偏移（相对于父元素）

  • top：顶端偏移量

  • right：右端偏移量

  • bottom：底端偏移量

  • left：左端偏移量