首页 前端知识 HTML——标准流、浮动、Flex 布局

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

2024-06-03 12:06:06 前端知识 前端哥 472 191 我要收藏

目录

1.标准流:

2.浮动:float

3.浮动清除:

4.flex弹性盒子布局:

5.flex常用属性:

1.父属性:

2.子属性:


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>

效果:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10640.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!