首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端课程——浮动

前端课程——浮动

作者头像
Dreamy.TZK
发布2020-04-09 15:46:46
8510
发布2020-04-09 15:46:46
举报
文章被收录于专栏:小康的自留地小康的自留地

定位是什么

所谓定位,简单来说就是通过CSS样式属性设定HTML页面元素在运行时显示的位置。

定位的基本思想很简单,它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。

CSS实现定位的效果主要通过浮动( float )和定位( position)两个样式属性实现。

文档流

  • 文档流是HTML页面中元素在排列时所占用位置的一-种规则。理解好文档流的概念有助于学习CSS样式中的浮动和定位两块内容。
  • 将HTML页面中的元素自,上向下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。
  • 文档流是HTML页面的底层结构,HTML页面创建的元素默认都在文档流中。

注意:如果在一行中不能容纳所有的元素,则会换到下一-行,继续自左向右排列。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位。

浮动

float属性指定一个 元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该属性具有以下几个值: .

  • none:默认值,表示元素不浮动。
  • left: 表示元素必须要浮动在其所在容器的左侧。
  • right:表示元素必须要浮动在其所在容器的右侧。

设置为浮动后,该元素原来的位置会被下一个元素替代。当前元素设置浮动后,之影响当前元素后边的元素

所有元素都设置为浮动的话,块级元素排列顺序变为水平方向的排列,

块级元素的浮动

块级元素默认的宽度和高度

  • 宽度是父级元素宽度的100%
  • 高度是0或者所有后代元素高度之和

设置为浮动后

  • 宽度默认是0或者所有后代元素宽度之和
  • 高度默认是0或者所有后代元素高度之科

多个块级元素都设置为浮动后->垂直方向排列变为水平方向排列

如果占满父级元素宽度的100%后,会自动换行

内联元素

内联元素的默认宽度和高度

  • 宽度是内容的宽度- width属性是无效的
  • 高度是内容的高度- height 属性是无效的

内联元素设置为浮动后

  • width 和height属性有效
  • 多个内联元素依旧是水平排列

行内块级元素

行内块级元素设置为浮动后,元素之间的空白间隙被取消

浮动的特殊情况

父级与子级之间的浮动

为子级元素设置浮动不能超出父级元素的范围(与父级元素浮不浮动无关)

兄弟同时设置浮动

如果兄弟关系的两个元素,为下一个兄弟元素设置为浮动,下一个兄弟元素不会超过上一个兄弟元素的位置

文本与浮动的元素

文本内容与浮动的元素之间,文本内容不会被浮动的元素所覆盖,而是环绕在浮动元素的周围

清除浮动

clear属性设置元素是否显示在其之前元素的下方。该属性具有以下几个值:

  • none:表示元素不会向下移动清除之前的浮动。
  • left: 表示元素被向下移动用于清除之前的左浮动。
  • right: 表元素被向下移动用于清除之前的右浮动。
  • both: 元素被向下移动用于清除之前的左右浮动。
  • clear属性的使用可以分别以下两种情况:
  1. 使用clear属性为非浮动元素清除浮动时,该元素将移动到之前浮动元素的下方。
  2. 使 用clear属性为浮动元素清除浮动时,该元素将移动到之前浮动元素的下方,并且会影响之后浮 动元素的布局。

伪类清除浮动

#container::after { 
  content: "";
  display: block; 
  clear: both;
}

高度塌陷

发生的场景

  1. 存在父子级关系
  2. 父级没有设置高度
  3. 子级元素设置浮动

解决方案:

  1. 为父级设置高度(不推荐)
  2. 块级格式化上下文(BFC) 开启方式如下几种:
    1. 将元素设 置为浮动(元素的CSS样式属性float值不为none )
    2. 将元素 设置为绝对定位
    3. 将元素设 置为行内块级元素(元素的CSS样式属性display值为inline- -block )
    4. overflow属 性值设置不为visible的块级元素(一般情况下,值为hidden )

    多多少少会带有一些副作用

案例

京东垂直菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: gray;
        }
        ul{
            background-color: white;
            width: 150px;
            list-style-type: none;
            padding: 0;
        }
        ul li{
            font-size: 14px;
            line-height: 25px;
            color: gray;
            padding: 0 7px ;
        }
        ul li:hover{
            color: lightcoral;
            background-color: lightgray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
</body>
</html>

京东水平菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: gray;
        }
        ul{
            background-color: white;
            list-style: none;
            /* 去除项目符号所占空间 */
            padding-left: 0; 
            /* 解决高度塌陷问题 */
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 95px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        li:hover{
            background-color: violet;
        }
        li a{
            text-decoration: none;
            color: black;
        }
        ul li a{
            display: block;
            width: 100%;
            height: 40px;

        }
    </style>
</head>
<body>
    <ul>
        <li><a href='#'>测试1</a></li>
        <li><a href='#'>测试2</a></li>
        <li><a href='#'>测试3</a></li>
        <li><a href='#'>测试4</a></li>
        <li><a href='#'>测试5</a></li>
    </ul>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-02-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 定位是什么
  • 文档流
  • 浮动
  • 块级元素的浮动
  • 内联元素
  • 行内块级元素
  • 浮动的特殊情况
    • 父级与子级之间的浮动
      • 兄弟同时设置浮动
        • 文本与浮动的元素
        • 清除浮动
        • 伪类清除浮动
        • 高度塌陷
        • 案例
          • 京东垂直菜单
            • 京东水平菜单
            相关产品与服务
            容器服务
            腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档