IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      float和position属性实现CSS的浮动和相对定位

      • 发布时间:
        2023-04-13
      • 版权所有:
        云和教育
      • 分享:
      CSS的浮动和定位可以改变元素的排列方式,使网页内容变得丰富多彩。CSS的浮动可以通过float属性进行设置。首先我们来介绍float的常用属性值,属性值和属性描述如下表:

      属性值和属性描述

      1.CSS允许任何元素浮动,不论是列表、段落还是图像。无论元素先前是什么状态,浮动后都成为块级元素,浮动元素的宽度缺省为auto。

      2.浮动元素的外边缘不会超过其父元素的内边缘。

      3.如果一个浮动元素在另一个浮动元素之后显示,而且会超出容纳块(没有足够的空间),则它下降到低于先前任何浮动元素的位置,即换行显示。

      position属性可以让网页中的某个元素在网页的特定位置出现,如弹出菜单。

      设置定位方式的常用属性值

      浮动元素

      设置元素具体位置的常用属性值
      重叠是当一个父元素中的多个子元素同时被定位时,定位元素之间有可能会发生:
      重叠元素

      显示器显示的图案是一个二维平面,使用×轴和y轴来表示位置属性。
      位置属性

      z-index属性表示Z轴的深度,它表示三维立体的概念,多个定位子元素的上下层的立体关系。
      ·可以控制定位元素在垂直于显示屏方向(z轴)上的堆叠顺序
      ·值大的元素发生重叠时会在值小的元素上面,其取值可为正整数、负整数和0,默认值为0。
      ·只能在position属性值为relative、absolute或fixed的元素上有效。z-index值越大的元素越靠近用户。
      三维空间
      三维空间