（一）浮动***

倔强的小白菜

已于 2022-05-31 16:09:35 修改

阅读量276

点赞数 1

分类专栏：前端基础文章标签： css css3 html

于 2022-05-16 15:52:38 首次发布

本文链接：https://blog.csdn.net/weixin_47481102/article/details/124794182

版权

前端基础专栏收录该内容

51 篇文章 2 订阅

订阅专栏

本文详细介绍了网页布局的三种传统方式：标准流、浮动和定位。重点讨论了浮动布局的作用，如让块级元素水平排列、左右对齐，以及浮动元素的特性。通过案例展示了浮动在小米布局中的应用，包括商品展示和导航栏设计。此外，还提及了浮动元素对标准流的影响和文字环绕效果。最后，文章提到当前为应对疫情挑战，政府推出了一系列助企稳岗的政策，包括社保费率降低、缓缴、稳岗返还等措施，旨在稳定和扩大就业。

摘要由CSDN通过智能技术生成

1.传统网页布局的三种方式

网页布局的本质——用css来摆放盒子，把盒子摆放到相应位置。

css提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：

普通流（标准流）
浮动
定位

2.标准流（普通流/文档流）

所谓的标准流：就是标签按照规定好默认的方式排列。

块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

2.行内元素会按照顺序，从左到右顺序排列，碰到父级元素边缘则会自动换行。

常用元素：span、a（超链接标签）、（i、em >倾斜标签）

以上都是标准流布局。前面说到的就是标准流，标准流是最基本的布局方式

这三种布局方式都是用来摆放盒子的，盒子摆放合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本包含了这三种布局方式（后面会说到移动端学习新的布局方式）。

3.为什么需要浮动

问题：用标准流能方便实现如下效果吗？

1.如何让多个块级盒子（div）水平排列成一行？

想要实线以上效果，虽然转换为行内快元素可以实现一行显示，但是他们之间会有很大的空隙，很难控制。

2.如何实现两个盒子的左右对齐？

总结：有很多的布局效果，标准流是没有办法完成的，稀释记忆可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。

浮动最经典的应用：可以让多个块级元素一行内排列展示。

页面布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

4.什么是浮动？

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器{float：属性值；}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>什么是浮动</title>
    <style>
      /* 使用了复合选择器中的并集选择器，并集选择器hi各种选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分 */
      .left,
      .right {
        height: 200px;
        width: 200px;
        background-color: pink;

        /* float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
        语法：
            选择器 {float：属性值；}
            属性值none，默认值，元素不浮动
            属性值left，元素靠左浮动
            属性值right，元素靠右浮动 */
        /* 元素靠右浮动 */
        /* float: right; */

        /* 元素靠左浮动 */
        float: left;
      }

      /* 使用到css三大属性中的层叠性，就近原则 */
      .right {
        background-color: red;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
  </body>
</html>

5.浮动特性***

加了浮动之后的元素，会具有很多特性，需要掌握：

浮动元素脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

设置了浮动（float）的元素最重要的特性：

脱离标准流的控制（浮）移动到指定位置（动），俗称脱标
浮动的盒子不再保留原来的位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动特性-脱标</title>
    <style>
      /* 设置了浮动的元素重要特性：
        1.脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
        2.浮动的盒子不在保留原先的位置 */
      .box1 {
        height: 200px;
        width: 200px;
        background-color: aqua;
        /* 靠左浮动 ，设置了浮动的元素，漂浮在普通流的上面，不占位置，脱标*/
        float: left;
      }

      /* 没有设置浮动，正常标准流展示，占据了设置了浮动元素的标准流，此时标准流与浮动的盒子重叠，标准流部分被浮动的盒子遮挡 */
      .box2 {
        height: 300px;
        width: 300px;
        background-color: chartreuse;
      }
    </style>
  </head>
  <body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
  </body>
</html>

如果多个盒子都设置了浮动，则他们会按照属性值一行内展示并且顶端对齐排列

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动特性之浮动元素一行显示</title>
    <style>
      div {
        height: 200px;
        width: 200px;
        background-color: pink;
        float: left;
      }

      /* 以下使用了css三大属性中的层叠性，就近原则 */
      .two {
        background-color: aqua;
        height: 400px;
      }

      .four {
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
  </body>
</html>

3.浮动元素会具有行内块元素特性

任何元素都是可以浮动的，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的带下根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着的
行内元素同理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动特性-浮动元素具有行内快特性</title>
    <style>
      /* <span > 标签是典型的的行内元素，设置高度和宽度是无效的 ；默认宽度是它本身内容的宽度，一行可以显示多个*/
      span,
      div {
        height: 200px;
        width: 200px;
        background-color: pink;
        /* 任何元素都可以浮动，不管原来是什么模式的元素，添加浮动后具有行内块元素相似的特性；
        所以，当行内元素添加浮动后，设置的高度和宽度有效展示 */
        float: left;
      }

      /* <p > 标签未设置浮动之前是标准流，与设置了浮动的元素重叠 ；
        没有设置宽度，只设置了高度且添加了浮动设置，此时的p盒子的宽度是它本身内容的宽度*/
      p {
        height: 300px;
        background-color: bisque;
        float: right;
      }
    </style>
  </head>
  <body>
    <span>1</span>
    <span>2</span>
    <div>div</div>

    <!-- 块元素独占一行，高度、宽度、外边距、内边距都可以设置；宽度默认是容器（父级宽度）的100%；是一个容器及盒子，里面可以放置多个行内元素或者行内块元素 -->
    <p>块元素</p>
  </body>
</html>

6.浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，网页布局一般采取得策略是：先使用标准流的父元素排列上下外置，之后内部元素采取浮动排列左右位置，符合网页布局第一准则。

7.案例：

7.1.小米布局一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .one {
        width: 1226px;
        height: 460px;
        background-color: pink;
        margin: 100px auto;
      }

      .two {
        float: left;
        width: 234px;
        height: 460px;
        background-color: #959997;
      }

      a {
        text-decoration: none;
        color: #fff;
        padding-left: 30px;
      }

      li {
        list-style: none;
        height: 42px;
        line-height: 42px;
      }

      ul {
        margin: 20px 0;
      }

      .three img {
        float: left;
        height: 460px;
        width: 992px;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <div class="two">
        <ul>
          <li><a href="#">手机</a></li>
          <li><a href="#">电视</a></li>
          <li><a href="#">笔记本 平板</a></li>
          <li><a href="#">家电</a></li>
          <li><a href="#">出行 穿戴</a></li>
          <li><a href="#">智能 路由器</a></li>
          <li><a href="#">电源 配件</a></li>
          <li><a href="#">健康 儿童</a></li>
          <li><a href="#">耳机 音响</a></li>
          <li><a href="#">生活 箱包</a></li>
        </ul>
      </div>
      <div class="three">
        <img src="images/背景图.png" alt="" />
      </div>
    </div>
  </body>
</html>

7.2.小米布局二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 992px;
        height: 300px;
        background-color: #eee;
        margin: 100px auto;
      }

      .one {
        float: left;
        width: 234px;
        height: 300px;
        background-color: #fff;
        margin-left: 14px;
      }

      .two {
        float: left;
        width: 234px;
        height: 300px;
        background-color: #fff;
        margin-left: 14px;
      }

      .three {
        float: left;
        width: 234px;
        height: 300px;
        background-color: #fff;
        margin-left: 14px;
      }

      .four {
        float: left;
        width: 234px;
        height: 300px;
        background-color: #fff;
        margin-left: 14px;
      }

      img {
        height: 160px;
        width: 160px;
        margin: 0 37px 18px 37px;
      }

      h3 {
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        margin: 0 10px 2px;
      }

      .miaoshu {
        font-size: 12px;
        margin: 0 10px 10px;
        height: 18px;
        color: #b0b0b0;
      }

      .jiage {
        color: #ff6700;
        text-align: center;
        margin: 0 10px 14px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="one">
        <img src="images/01.webp" alt="" />
        <h3>Xiaomi Civi 1S</h3>
        <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
        <p class="jiage">2299</p>
      </div>

      <div class="two">
        <img src="images/02.webp" alt="" />
        <h3>Xiaomi Civi 1S</h3>
        <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
        <p class="jiage">2299</p>
      </div>

      <div class="three">
        <img src="images/03.webp" alt="" />
        <h3>Xiaomi Civi 1S</h3>
        <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
        <p class="jiage">2299</p>
      </div>

      <div class="four">
        <img src="images/04.webp" alt="" />
        <h3>Xiaomi Civi 1S</h3>
        <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
        <p class="jiage">2299</p>
      </div>
    </div>
  </body>
</html>

7.3.小米布局三

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        height: 614px;
        width: 1226px;
        background-color: #eee;
        margin: 100px auto;
        /* 为了清晰的看到边框 */
        border: 1px solid #b0b0b0;
      }

      .left img {
        height: 614px;
        width: 234px;
        background-color: #fff;
        float: left;
      }

      .right {
        height: 614px;
        width: 992px;
        background-color: #b0b0b0;
        float: left;
      }

      li {
        list-style: none;
        width: 234px;
        height: 300px;
        background-color: #fff;
        float: left;
        margin: 0 0 14px 14px;
      }

      li img {
        height: 160px;
        width: 160px;
        margin: 15px 37px 18px;
      }

      h3 {
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        margin: 0 10px 2px;
      }

      .miaoshu {
        font-size: 12px;
        margin: 0 10px 10px;
        height: 18px;
        color: #b0b0b0;
      }

      .jiage {
        color: #ff6700;
        text-align: center;
        margin: 0 10px 14px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left">
        <img src="images/左.webp" alt="" />
      </div>
      <div class="right">
        <ul>
          <li>
            <img src="images/01.webp" alt="" />
            <h3>Xiaomi Civi 1S</h3>
            <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
            <p class="jiage">2299</p>
          </li>

          <li>
            <img src="images/01.webp" alt="" />
            <h3>Xiaomi Civi 1S</h3>
            <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
            <p class="jiage">2299</p>
          </li>

          <li>
            <img src="images/01.webp" alt="" />
            <h3>Xiaomi Civi 1S</h3>
            <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
            <p class="jiage">2299</p>
          </li>

          <li>
            <img src="images/01.webp" alt="" />
            <h3>Xiaomi Civi 1S</h3>
            <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
            <p class="jiage">2299</p>
          </li>

          <li>
            <img src="images/01.webp" alt="" />
            <h3>Xiaomi Civi 1S</h3>
            <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
            <p class="jiage">2299</p>
          </li>
          <li>
            <img src="images/01.webp" alt="" />
            <h3>Xiaomi Civi 1S</h3>
            <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
            <p class="jiage">2299</p>
          </li>

          <li>
            <img src="images/01.webp" alt="" />
            <h3>Xiaomi Civi 1S</h3>
            <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
            <p class="jiage">2299</p>
          </li>

          <li>
            <img src="images/01.webp" alt="" />
            <h3>Xiaomi Civi 1S</h3>
            <p class="miaoshu">原生美肌人像｜奇迹阳光动人新色｜...</p>
            <p class="jiage">2299</p>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

8.拓展

浮动元素只会压住他下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片），浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果，文字会围绕浮动元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 浮动之所以不会压住文字（图片），因为浮动产生的目的最初是为了做文字环绕的效果，
        文字会围绕浮动元素不被压住 */
      img {
        float: left;
      }
    </style>
  </head>
  <body>
    <p>
      开栏的话
      今年我国就业工作总体开局平稳，成绩来之不易。同时要看到，受国内外多重因素影响，就业面临的风险挑战明显增多。人社部门如何加快推进相关政策落地见效，帮助企业解决困难、促进就业；各类就业服务机构如何发挥自身优势，不断提高服务质量和水平；各类企业如何履行社会责任，努力稳定和扩大就业岗位……本版今起推出“千方百计稳定和扩大就业”系列报道，呈现各地各部门为稳就业保就业采取的政策措施，敬请关注。
      稳就业事关广大家庭生计，是经济运行在合理区间的关键支撑。今年一季度，我国就业形势总体保持基本稳定，但3月份以来，受国内外多重因素影响，就业面临的风险挑战明显增多。
      “面对复杂严峻的就业形势，全国人社系统将把稳就业作为当前的首要任务，加大就业优先政策实施力度，努力保持就业大局稳定，更好服务于经济社会发展。”人社部有关负责人说。
      接下来，人社部将出台哪些稳就业举措？如何推动、确保相关政策落地落实？记者进行了采访。
      　打好政策“组合拳” “降缓返补”助企业
      日前，洋紫荆油墨（中山）有限公司领取到了2021年失业保险稳岗返还资金5万元，惠及400名员工。“稳岗返还资金有利于我们提高员工福利，在特殊时期稳岗稳队伍。”公司负责人黄嘉敏说。
      量大面广的中小微企业和个体工商户是稳经济的重要基础、稳就业的主力支撑。当前，受国内外多重因素影响，相关市场主体困难明显增多。为此，人社部推出一系列阶段性、组合式稳岗位、提技能、防失业的政策措施，切实助企纾困稳岗位。
      人社部有关负责人介绍，人社部将推出社保“降、缓、返、补”四个方面的支持举措，助力企业爬坡过坎。
      降，即延续降低费率。将阶段性降低失业保险、工伤保险费率政策延续实施至2023年4月30日。
      缓，即加大缓缴社保费力度。对受疫情影响经营困难的所有中小微企业、个体工商户，实施暂缓缴纳养老、失业、工伤保险费政策。其中，养老保险费缓缴期限3个月，失业保险和工伤保险费缓缴期限不超过1年，缓缴期间免收滞纳金。
      返，即提高稳岗返还标准。将中小微企业、个体工商户失业保险稳岗返还比例最高提至90%。对没有对公账户的小微企业，可将资金直接返还至当地税务部门提供的其缴纳社会保险费的账户。
      补，即加大就业补贴实施力度。对企业吸纳重点群体就业给予社保补贴、见习补贴等；对受疫情影响暂时无法正常生产经营的中小微企业发放一次性留工培训补助。
      越是困难时刻，越要尽快把帮扶政策送到企业手上。眼下，各地人社部门正用足用好组合政策，推行“免申即享”经办模式，让企业便捷享受政策红利。
      广东深圳市第一时间将中小微企业失业保险稳岗返还比例提至90%，预计惠及企业超80万家。当地人社局正在抓紧时间进行数据比对，完成后将主动发放稳岗返还资金。
      广西崇左提前谋划，通过信息系统初步筛查符合条件的企业2507家，拟返还补贴资金2631.37万元，惠及职工超5.58
      万人。 就业服务搬上网 招聘用工有保障
      企业是吸纳就业的主渠道。做好企业招聘用工服务，对支持企业生产经营、保持就业局势稳定具有重要作用。近日，各地方、各部门都有针对性地加强和改进就业服务。
      一方面，通过常态化举办线上招聘活动，开设大型专项招聘活动线上专场专区，推广运用直播带岗、远程面试等新型招聘对接模式，实现线上招聘活动不停歇。
      山东龙口市开展“人社干部联百企”活动，自3月初建立《企业用工引才需求台账》以来，累计在网上发布岗位信息3240条；
      <img src="images/p.jpeg" alt="" />
      甘肃庆阳市的人社干部化身“网络主播”进行“直播带岗”“直播宣策”，推送就业岗位，解读就业帮扶政策，服务对象覆盖高校毕业生、农民工、退役军人等。
      在国家层面，人社部将继续开展百日千万网络招聘专项行动。5月16日至8月25日，针对重点人群就业和用人单位招聘需要，搭建全国统一、多方联动的网络招聘平台，以优质高效服务助推稳就业、保就业。
      另一方面，在做好疫情防控前提下，各地也因地制宜开展各类线下招聘活动，针对性举办小规模、定制化招聘会，实现“周周有活动、日日有服务”。
      4月中旬，湖南常德石门县组织开展了为期3天的“送岗下乡”专场招聘会，招聘会服务对象为返乡农民工、留乡劳动力。一共带来了2000个就业岗位，累计进场求职人员1200多人，达成就业意向约190人。
      与此同时，为了进一步筑牢民生底线，对就业困难人员的重点帮扶力度不减。各地将城镇零就业家庭成员、就业困难人员以及残疾登记失业人员、脱贫人口和农村低收入人口等重点人群列入就业帮扶对象，通过同步开展精准匹配就业、靶向扶持创业、公岗安置托底等措施，促进重点群体人岗匹配。
      公共服务进校园 就业选择更多元
      今年，我国有1076万高校毕业生走出校门找工作。做好高校毕业生就业工作，不仅事关千家万户，也有利于人力资源的利用。
      今年3月以来，人社部启动公共就业服务进校园活动。各地汇集专业资源，凝聚各方力量，推动公共就业服务向前延伸、提质增效。
      创新方式加大政策宣传。人社部数据显示，福建、江西、四川、贵州等省份已举办政策宣讲748场次。湖北制作发布“高校毕业生就业创业政策地图”小程序，总访问量超过20万人次。浙江杭州市在主要商务区利用160余块户外电子大屏幕滚动宣传就业政策，动员全市企业提供岗位。
      招聘服务搭建对接平台。江西、山东、安徽、湖南、重庆、甘肃等地举办了实施公共服务进校园系列专场招聘活动，已组织各类线上线下招聘600余场次，发布岗位80余万个。陕西联合市场机构为毕业生和用人单位搭建远程视频面试，已有19万毕业生通过平台获得服务。湖北采取“小规模、多场次”方式，进校园开展“才聚荆楚”招聘活动，提供近1.5万个就业岗位。
      培训指导提升就业能力。黑龙江、广西等地积极与高校合作，共建高校就业创业服务站、校园职业成长导师站；浙江杭州市推出“导师面对面”等咨询服务，为毕业生免费提供择业指导、创业咨询、心理疏导等服务；河南、贵州等地明确了今年高校毕业生技能培训目标，启动新兴产业、智能制造、现代服务业等专项培训。
      “由政府牵头，把学校、科研机构、企业等各方资源进行整合，多方合力，给我们提供了更多元的就业选择。”2022年应届毕业生崔宇杰说。
      不仅是人社部门，各部门都在为稳定高校毕业生就业贡献力量。
      工信部联合教育部启动2022年全国中小企业网上百日招聘高校毕业生活动，直接将“专精特新”中小企业硕、博巡回招聘开进校园。
      国有企业扩大招聘规模。“我们不仅扩大招聘，还为毕业生准备了人才公寓，免费提供一年的住宿，一年之后发放租房补贴，连续发放3年。”中国重型汽车集团有限公司组织与人力资源部副部长刘秉阳说。
      “我们将持续完善毕业生市场化就业的政策措施，稳定公共部门招聘规模，适当扩大升学入伍、基层项目、科研助理等规模，努力创造更多适合毕业生的优质岗位。”人社部有关负责人说。
      （人民日报记者 李心萍）
    </p>
  </body>
</html>

倔强的小白菜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（一）浮动***

1.传统网页布局的三种方式网页布局的本质——用css来摆放盒子，把盒子摆放到相应位置。css提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：普通流（标准流）浮动定位2.标准流（普通流/文档流）所谓的标准流：就是标签按照规定好默认的方式排列。块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table2.行内元素会按照顺序，从左到右顺序排列，碰到父级元素边缘则会自动换行。常用元素：span、a（超链接标签
复制链接

扫一扫

专栏目录