css基础5

今天在这里跟大家分享css基础最核心的部分，浮动和定位。话不多说，直接上干货！

一、浮动

• 定义：定位元素是相对于其正常位置应该出现的位置。定位元素的位置是相对于自身、父级元素位置、其他元素以及浏览器窗口本身的位置。
• 定位主要分为文档流定位、浮动、相对定位、绝对定位、固定定位
• 浮动主要解决的是行内元素在一行内显示的问题
• 属性：float  left表示左浮动  right表示右浮动
• 浮动的问题：
  • 浮动元素是脱离文档流的（不占据页面空间）
  • 浮动只能往左浮动或右浮动，或者停靠在以及浮动元素的边缘上
  • 浮动元素一定要有包含框（父元素）
  • 浮动元素默认不会换行，除非包含框的宽度不足以放下所有的浮动元素，那么后面的元素就会默认换行。
  • 浮动元素的高度最好要保持一致，如果不一致就会浮不上去，出现问题。
  • 如果多个快元素需要在一行内显示，一定要全部都浮动。
  • 元素一旦浮动后，就会快元素（脱离文档流的元素也会变成快元素）。
  • 元素一旦浮动，那么他的宽度就会变成自适应。
• 浮动造成包含框高度塌陷的问题：
  • 注释：当一个父元素里面的所有子元素都浮动，且父元素没有设置高度，这个时候由于浮动元素脱离文档流，所有造成父元素中没有内容撑开高度。
• 清除浮动带来的影响：
  • 属性：clear  不是真正的解决问题，只是解决布局混乱的问题。

  　属性值：　　

  • left  清除元素左浮动所带来的影响
  • right  清除元素右浮动所带来的影响
  • both   清除元素左右浮动所带来的影响
• 清除浮动的方法：解决包含框高度塌陷的问题。
  • 手动设置包含框的高度
  • overflow：hidden撑开父元素的高度
  • 父元素内部最后加一个空的快元素，设置clear：both
  • 内容生成：可以通过向某个元素的前面后者后面加入一个标签

　　　　　　　　元素：before {

　　　　　　　　content：“插入元素的文本内容”

　　    　　　　   width：；

　　　　　　　   height：；

　　　　　　　   background：；

　　　　　　　　}

二、定位

• 定义：定位主要分为文档流定位、相对定位、绝对定位、固定定位。

属性：position

• static表示的是静态定位（文档流定位）
• relative表示的是相对定位
• absolute表示的是绝对定位
• fixed表示的是固定定位
• 何为定位元素：position属性为relative、absolute、fixed。元素定位后，只是让元素可以移动了，真正实现让元素位置的移动，需要配合位移属性。
• 位移属性：
  • left：距离定位基点左边的距离；正值往右跑，负值往左跑。
  • right：距离定位基点右边的距离；正值往左跑，负值往右跑。
  • top：距离定位基点上边的距离；正值往下跑，负值往上跑。
  • bottom：距离定位基点下边的距离；正值往上跑，负值往下跑。
• 属性单位：px或者百分比
• 注意：
  • 一般情况下水平方向和垂直方向位移属性只有一个方向值只有一个
  • 如果left  right同时出现，以left为准
  • 如果top  bottom同时出现，以top为准

重点：

• 相对定位：
  • 定位基点：基于当前元素未移动前的位置
  • 注意：移动后依然占据着空间，没有脱离文档流。
  • 使用场景：微调元素位置；配合绝对定位
• 绝对定位：
  • 方向值
    • top：距离定位基点最上边的距离
    • bottom： 距离定位基点最下面的距离
    • left：距离定位基点最左边的距离
    • right：距离定位基点最右边的距离
  • 定位基点：距离最近的已经定位的祖先元素，如果没有默认Html/body。一般定位基点都是加相对定位的。
  • 注意：绝对定位会让元素脱离文档流，不占据页面空间，且会变成快元素，宽度会变成自适应。
  • 使用场景：常用于各种弹出框和页面布局。
• 固定定位：
  • 定位基点：页面可视区
  • 备注：其他的跟绝对定位一样，也会脱离文档流，也会变成快元素，宽度会变成自适应。
  • 使用场景：页面侧边栏

　完结！