欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css基础5

程序员文章站 2022-07-11 17:16:32
今天在这里跟大家分享css基础最核心的部分,浮动和定位。话不多说,直接上干货! 一、浮动 定义:定位元素是相对于其正常位置应该出现的位置。定位元素的位置是相对于自身、父级元素位置、其他元素以及浏览器窗口本身的位置。 定位主要分为文档流定位、浮动、相对定位、绝对定位、固定定位 浮动主要解决的是行内元素 ......

今天在这里跟大家分享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。一般定位基点都是加相对定位的。
    • 注意:绝对定位会让元素脱离文档流,不占据页面空间,且会变成快元素,宽度会变成自适应。
    • 使用场景:常用于各种弹出框和页面布局。
  • 固定定位:
    • 定位基点:页面可视区
    • 备注:其他的跟绝对定位一样,也会脱离文档流,也会变成快元素,宽度会变成自适应。
    • 使用场景:页面侧边栏

 完结!