HTML——标准流、浮动、Flex 布局

weixin_52874695

已于 2023-12-19 16:27:15 修改

阅读量1.3k

点赞数 11

分类专栏： html 文章标签： html 前端 css 学习

于 2023-11-20 15:24:50 首次发布

本文链接：https://blog.csdn.net/weixin_52874695/article/details/134509121

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.标准流：

标准流就是元素在页面中的默认排列方式，也就是元素在页面中的默认位置。

1.1 块元素----独占一行----从上到下排列

1.2 行内元素----不独占一行----从左到右排列，遇到边界换行

1.3 行内块元素----不独占一行----从左到右排列，遇到边界换行

2.浮动:float

1.属性：

left---向左浮动

right---向右浮动

2.浮动的特点：

2.1 脱标---脱离标准流,释放当前盒子的默认位置---影响父盒子的高度

2.2 浮动的方向---水平方向（左，右，没有中间）

2.3 本质将元素转换为行内块元素---横向排列，并且可以设置宽高

标签代码:

    <div class="left">左</div>
    <div class="right">右</div>

样式代码:

    <style>
      div {
        height: 200px;
        width: 300px;
      }
      .left {
        background-color: aqua;
        /* 浮动到左 */
        float: left;
      }
      .right {
        background-color: burlywood;
        /* 浮动到左 */
        float: left;
        /* 浮动到右 */
        /* float: right; */
      }
    </style>

效果:

小案例:

标签代码:

    <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>
    </ul>

样式代码:

    <style>
      ul {
        height: 50px;
        line-height: 50px;
        list-style: none;
        background-color: rgb(84, 145, 84);
      }
      ul li {
        float: left;
        padding: 0 15px;
      }
      ul li a {
        text-decoration: none;
        color: rgb(255, 255, 255);
      }
    </style>

效果:

3.浮动清除:

方法一(额外标签法):在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

方法二(双伪元素法[推荐]):

/* before 解决外边距塌陷问题 */

/* 双伪元素法 */

.clearfix::before,

.clearfix::after {

/* 插入的内容 */

content: "";

display: table;

}

/* after 清除浮动 */

.clearfix::after {

clear: both;

}

方法三(单伪元素法):

方法四(overflow [推荐]):父元素添加 CSS 属性 overflow: hidden

方法五:给父盒子设置高度[不推荐]

1.浮动后的影响：

1.1.父盒子的高度塌陷，背景颜色不会被子盒子撑开

1.2.父盒子下边的其他元素会上移

2.浮动的清除：

方法一：额外标签法---在浮动的盒子后面添加一个空的标签，设置clear:both---不推荐使用

方法二：给父盒子添加固定高度---不推荐使用---动态数据列表不适用

方法三：单伪元素法---给父盒子添加:after伪元素，设置clear:both---推荐使用

方法四：双伪元素法---给父盒子添加:before和:after伪元素，设置clear:both---推荐使用---即可以清除浮动干扰，同时又能解决父盒子高度塌陷的问题

方式五：给父盒子添加overflow:hidden---推荐使用

标签代码:

    <div class="box clearfix">
      <div class="left">左</div>
      <div class="right">右</div>
      <!--(方法一) <div style="clear: both;"></div> -->
    </div>
    <p>123456789</p>

样式代码:

    <style>
      div .box {
        height: 500px;
        background-color: coral;
      }
      .left {
        height: 200px;
        width: 300px;
        background-color: aqua;
        /* 浮动到左 */
        float: left;
      }
      .right {
        height: 200px;
        width: 300px;
        background-color: burlywood;
        /* 浮动到左 */
        /* float: left; */
        /* 浮动到右 */
        float: right;
      }
      p {
        height: 50px;
        line-height: 50px;
        background-color: cornflowerblue;
      }
      /* before 解决外边距塌陷问题 */
      /* 双伪元素法 */
      .clearfix::before,
      .clearfix::after {
        /* 插入的内容 */
        content: "";
        display: table;
      }
      /* after 清除浮动 */
      .clearfix::after {
        clear: both;
      }
    </style>

效果:

小案例:

标签代码:

  <body>
    <div class="box">
      <div class="left">
        <img src="../images/1.svg" alt="" style="width: 60px" />
        <span>
          <p>一键发布多端</p>
          <p>发布视频到抖音短视频、西瓜视频及今日头条</p>
        </span>
      </div>
      <div class="right">
        <img src="../images/2.svg" alt="" style="width: 60px" />
        <span>
          <p>管理视频内容</p>
          <p>支持修改已发布稿件状态和实时查询视频审核状态</p>
        </span>
      </div>
      <div class="left">
        <img src="../images/3.svg" alt="" style="width: 60px" />
        <span>
          <p>发布携带组件</p>
          <p>
            支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性
          </p>
        </span>
      </div>
      <div class="right">
        <img src="../images/4.svg" alt="" style="width: 60px" />
        <span>
          <p>数据评估分析</p>
          <p>获取视频在对应产品内的数据表现、获取抖音热点,及时进行表现评估</p>
        </span>
      </div>
    </div>
  </body>

样式代码:

    <style>
      .box {
        width: 950px;
        height: 150px;
        padding: 50px 15px;
        margin: 50px;
        border: 1px solid rgb(158, 158, 158);
        font-size: 12px;
        border-radius: 10px;
      }
      .box .left {
        width: 500px;
        float: left;
      }
      .box .left span {
        display: inline-block;
      }
      .box .left span > p:first-child {
        font-size: 15px;
        margin-bottom: 0;
      }
      .box .right {
        float: left;
      }
      .box .right span {
        display: inline-block;
      }
      .box .right span > p:first-child {
        font-size: 15px;
        margin-bottom: 0;
      }
    </style>

效果:

4.flex弹性盒子布局:

本质：改变当前盒子内部的子元素空间排列位置

1.特点：

1.1 子元素标签默认都会横向排列

1.2 当子元素标签的总宽度大于父盒子的宽度时，子元素标签会自动内减

2.常用属性：

2.1 父属性：

2.1.1 display:flex; 定义弹性盒子

2.1.2 justify-content:定义子元素标签的在X方向排列方式

space-between--- 两端对齐，中间相等间距留白

space-around---两端的间距是中间间距的一半

center --- 居中对齐

2.2.3 align-items:定义子元素标签在Y方向排列方式

flex-end---底部对齐

center---居中对齐

stretch---拉伸对齐

标签代码:

   <div class="bigbox">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
    </div>

样式代码:

    <style>
      .bigbox {
        margin: 85px auto; /*居中*/
        width: 1000px;
        height: 600px;
        background-color: wheat;
        display: flex; /*弹性盒子*/

        /*排列方向*/
        flex-direction: row; /*水平、左*/
        /*flex-direction: row-reverse; /*水平、右*/
        /*flex-direction:column;/*垂直、上*/
        /*flex-direction:column-reverse;/*垂直、下*/

        /*换行处理属性*/
        /*flex-wrap: nowrap;/*不换行*/
        flex-wrap: wrap; /*第一行在上面*/
        /*flex-wrap: wrap-reverse;/*第一行在下面*/

        /*x方向排列*/
        /*justify-content: flex-start; /*左对齐*/
        /*justify-content: flex-end;/*右对齐*/
        /*justify-content: center; /*居中*/
        /*justify-content: space-between; /*两端对齐，项目之间的间隔都相等*/
        /*justify-content: space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
        justify-content: space-evenly; /*平均分配,两端与中间间隔都相等*/

        /*y方向对齐*/
        /*align-items: flex-start; /*交叉轴的起点对齐*/
        /*align-items: flex-end;/*交叉轴的终点对齐*/
        align-items: center; /*交叉轴的中点对齐*/
        /*align-items: baseline;/*项目的第一行文字的基线对齐*/
        /*align-items: stretch;/*如果项目未设置高度或设为auto，将占满整个容器的高度*/

        /*多根轴对齐方式*/
        /*align-content: flex-start;/*与交叉轴的起点对齐*/
        /*align-content: flex-end;/*与交叉轴的终点对齐*/
        /*align-content: center; /*与交叉轴的中点对齐*/
        /*align-content: space-between; /*与交叉轴两端对齐，轴线之间的间隔平均分布*/
        align-content: space-around; /*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
        /*align-content: stretch;/*轴线占满整个交叉轴*/
      }
      .bigbox div {
        width: 300px;
      }
      .bigbox .box1 {
        height: 200px;
        background-color: lavenderblush;
      }
      .bigbox .box2 {
        height: 200px;
        background-color: lightgreen;
      }
      .bigbox .box3 {
        height: 200px;
        background-color: pink;
      }
      .bigbox .box4 {
        height: 200px;
        background-color: rgb(179, 243, 245);
      }
      .bigbox .box5 {
        height: 200px;
        background-color: rgb(237, 179, 245);
      }
      .bigbox .box6 {
        height: 200px;
        background-color: rgb(255, 128, 128);
      }
    </style>

效果:

小案例:

标签代码:

    <div class="box">
      <div class="box1">
        <img src="../images/group.svg" alt="" />
        <p>账号授权</p>
        <p>包含抖音帐号授权登录与授权绑定的能力</p>
      </div>
      <div class="box1">
        <img src="../images/user.svg" alt="" />
        <p>用户管理</p>
        <p>包含用户的基础信息以及关系链相关数据的获取</p>
      </div>
      <div class="box1">
        <img src="../images/video.svg" alt="" />
        <p>视频管理</p>
        <p>包含抖音、西瓜、头条视频的发布以及相关数据的获取能力</p>
      </div>
      <div class="box1">
        <img src="../images/interact.svg" alt="" />
        <p>互动管理</p>
        <p>包含私信收发以及评论管理的能力</p>
      </div>
      <div class="box1">
        <img src="../images/search.svg" alt="" />
        <p>搜索管理</p>
        <p>包含通过关键词获取抖音视颍及该视频下评论，并进行回复的能力</p>
      </div>
      <div class="box1">
        <img src="../images/data.svg" alt="" />
        <p>数据开放服务</p>
        <p>包含用户授权后的公开用户数据，视频数据等能力</p>
      </div>
      <div class="box1">
        <img src="../images/business.svg" alt="" />
        <p>企业号开放能力</p>
        <p>包含企业号意向用户、企业消息卡片、团购活动等的管理能力</p>
      </div>
      <div class="box1">
        <img src="../images/life.svg" alt="" />
        <p>生活服务开放能力</p>
        <p>包含商铺/商品库/交易系统等能力的开放接入</p>
      </div>
    </div>

样式代码:

    <style>
      .box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 900px;
        height: 460px;
        padding: 60px 80px;
        background-color: rgb(226, 226, 226);
      }
      .box .box1 {
        width: 130px;
        height: 130px;
        border-radius: 10px;
        padding: 40px 40px;
        background-color: white;
      }
      .box .box1 p {
        font-size: 13px;
        color: #000;
        text-align: center;
      }
      .box .box1 p:last-child {
        font-size: 8px;
        color: rgb(146, 146, 146);
      }
      .box img {
        width: 40px;
        display: block;
        margin: auto;
      }
    </style>

效果:

5.flex常用属性:

1.父属性：

display: flex;---设置为flex布局

flex-wrap---设置子元素换行

nowrap:默认值，不换行

wrap:换行

flex-direction---设置子元素排列方向

row:默认值，从左到右

row-reverse:从右到左

column:从上到下

column-reverse:从下到上

justify-content---设置子元素在主轴上的对齐方式

flex-start:默认值，从左到右

flex-end:从右到左

center:居中

space-between:两端对齐

space-around:平均分配,两端留有空间,中间间隔相等,总空间是子元素的2倍

space-evenly:平均分配,两端与中间间隔都相等

2.子属性：

flex--- 子元素的伸缩比例

默认值：0

1：子元素会占据父元素的所有空间

2：子元素会占据父元素的所有空间的2倍

align-self---单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

flex-start:默认值，从上到下

flex-end:从下到上

center:居中

baseline:以基线对齐

stretch:拉伸

标签代码:

    <div class="top">
      <div class="back">返回</div>
      <div class="search">输入框</div>
      <div class="query">查询</div>
    </div>
    <div class="box">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
    </div>

样式代码:

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .top {
        /* 宽度为视口（移动端的窗口）宽度的100% */
        width: 100vw;
        height: 10vw;
        background-color: rgb(207, 233, 255);
        display: flex;
      }
      .top .back {
        border: 1px solid red;
      }
      .top .search {
        /* 比例：占一份 */
        flex: 1;
        border: 1px solid red;
      }
      .top .query {
        border: 1px solid red;
      }
      .box {
        width: 100vw;
        height: 15vw;
        background-color: sandybrown;
        display: flex;
      }
      .box .box1 {
        flex: 1;
        height: 10vw;
        background-color: rgb(73, 151, 134);
      }
      .box .box2 {
        flex: 2;
        height: 10vw;
        background-color: rgb(73, 94, 151);
      }
      .box .box3 {
        flex: 3;
        height: 10vw;
        background-color: rgb(126, 73, 151);
      }
    </style>

效果:

weixin_52874695

关注

11
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
HTML——标准流、浮动、Flex 布局

方法四：双伪元素法---给父盒子添加:before和:after伪元素，设置clear:both---推荐使用---即可以清除浮动干扰，同时又能解决父盒子高度塌陷的问题。方法三：单伪元素法---给父盒子添加:after伪元素，设置clear:both---推荐使用。2.1 脱标---脱离标准流,释放当前盒子的默认位置---影响父盒子的高度。1.3 行内块元素----不独占一行----从左到右排列，遇到边界换行。1.2 行内元素----不独占一行----从左到右排列，遇到边界换行。
复制链接

扫一扫