35种前端常用布局方案

于 2022-06-17 14:34:30 发布
阅读量318 收藏 5
点赞数
分类专栏： HTML+CSS 文章标签： 前端 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56318180/article/details/124683903
版权

水平居中（七种方案）

  1. 使用text-align属性

    若子级为行内块级元素，可以通过为其父元素设置 text-align:center 即可实现水平居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            background-color: #ff8787;
            text-align: center;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            display: inline-block;
        }

  1. 定宽块级元素水平居中

    对于定宽的子元素，直接 margin：auto 即可实现水平居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            background-color: #ff8787;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            margin: auto;
        }

  1. 定宽块级元素水平居中

    对于开启定位的元素，可以通过left属性和margin属性即可实现水平居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            background-color: #ff8787;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 开启定位 */
            position:relative;
            left:50%;
            /* margin-left 为 负的宽度的一半 */
            margin-left: -150px;
        }

  1. 定宽块级元素水平居中

    当元素开启绝对定位或固定定位时，left属性和right属性一起设置就会拉伸元素的宽度，再配合width属性和margin属性即可实现元素水平居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            background-color: #ff8787;
            /* 父元素开启相对定位 */
            position: relative;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 子元素开启绝对定位 */
            position: absolute;
            /* 水平拉满屏幕 */
            left: 0;
            right: 0;
            /* 拉满屏幕之后设置宽度，最后通过margin实现水平居中 */
            margin: auto;
        }

  1. 定宽块级元素水平居中

    当元素开启绝对定位或固定定位时，left属性和transfrom属性即可实现元素水平居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            background-color: #ff8787;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 开启定位 */
            position: relative;
            /* 该方法不需要手动计算宽度 */
            left: 50%;
            transform: translateX(-50%);
        }

  1. Flex布局

    通过Flex布局即可实现元素水平居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            background-color: #ff8787;
            /* 开启Flex布局 */
            display: flex;
            /* 通过 justify-content 属性实现居中 */
            justify-content: center;
        }
        
        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 子元素设置 margin:auto */
            margin: auto;
        }

  1. Grid布局

    通过Grid布局即可实现元素水平居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            background-color: #ff8787;
            /* 开启Grid布局 */
            display: flex;
            /* 方法一：通过 justify-items:center 属性实现居中 */
            justify-items: center;
            /* 方法二：通过 justify-content 属性实现居中 */
            /*justify-content: center;*/
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 子元素设置 margin:auto 属性 */
            margin: auto;
        }

页面效果：
水平居中

垂直居中（六种方案）

  1. 行内块级元素垂直居中

    若子级为行内块级元素，可以通过为其设置 display:inline-block和 vertical-align: middle，为其父元素设置行高等同与子元素高度即可实现垂直居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            width: 300px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 为父元素设置行高 */
            line-height: 500px;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 为子元素设置 display: inline-block */
            display: inline-block;
            /* 通过 vertical-align:middle 实现居中*/
            vertical-align: middle;
        }

  1. 定位方式垂直居中

    通过定位方式实现垂直居中，实际上就是通过给父元素添加position:relative，给子元素添加position:absolute、top:50%、margin-top：-高度的一半实现的

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            width: 300px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 为父元素开启相对定位 */
            position: relative;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 为子元素开启绝对定位 */
            position: absolute;
            top: 50%;
            /* margin-top 等于 -高度的一半*/
            margin-top: -150px;
        }

  1. 定位方式垂直居中

    通过定位方式实现垂直居中，实际上就是通过给父元素添加position:relative，给子元素添加position:absolute、top:0、bottom:0、margin：auto实现的

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            width: 300px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 为父元素开启相对定位 */
            position: relative;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 为子元素开启绝对定位 */
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

  1. 定位方式垂直居中

    通过定位方式实现垂直居中，实际上就是通过给父元素添加position:relative，给子元素添加position:absolute、top:50%、transform: translateY(-50%)实现的

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            width: 300px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 为父元素开启相对定位 */
            position: relative;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 为子元素开启绝对定位 */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

  1. Flex布局

    通过Flex布局实现垂直居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            width: 300px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 开启Flex布局 */
            display: flex;
            /* 方法一 */
            /* align-items: center; */
        }

        .child {
            width: 300px;
            height: 300px;
            /* 方法二 */
            background-color: #e599f7;
        }

  1. Grid布局

    通过Grid布局实现垂直居中

    <div class="parent">
        <div class="child"></div>
    </div>

        .parent {
            width: 300px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 开启Grid布局 */
            display: grid;
            /* 方法一 */
            /* align-items: center; */
            /* 方法二 */
            /* align-content: center; */
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 方法三 */
            /* margin: auto; */
            /* 方法四 */
            align-self: center;
        }

页面效果：
垂直居中

水平垂直居中（七种方案）

  1. 行内块级元素水平垂直居中

    行内块级元素水平垂直居中就是通过给父元素添加line-height、text-align:center，给子元素添加 display: inline-block、vertical-align: middle实现的

    <div class="parent">
        <div class="child"></div>
    </div>

        *{
            margin: 0;
            padding: 0;
        }

        .parent {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 设置行高等于容器高度 */
            line-height: 500px;
            /* 通过 text-align: center 实现水平居中 */
            text-align: center;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 将子元素设置为水平块级元素 */
            display: inline-block;
            /* 通过 vertical-align: middle 实现垂直居中 */
            vertical-align: middle;
        }

  1. 定位实现水平垂直居中

    定位实现水平垂直居中就是通过给父元素添加position:relative，给子元素添加 position:absolute、left:calc(50% - 宽度/高度的一半)、top:calc(50% - 宽度/高度的一半)实现的

    <div class="parent">
        <div class="child"></div>
    </div>

        *{
            margin: 0;
            padding: 0;
        }

        .parent {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 为父元素开启相对定位 */
            position: relative;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 为子元素开启绝对定位 */
            position: absolute;
            /* 设置该元素的偏移量，值为 50% 减去 宽度/高度的一半*/
            left: calc(50% - 150px);
            top: calc(50% - 150px);
        }

  1. 定位实现水平垂直居中

    给父元素添加position:relative，给子元素添加 position:absolute、设置该元素的偏移量为50%，通过外边距负值的方式将元素移动回去实现居中

    <div class="parent">
        <div class="child"></div>
    </div>

        *{
            margin: 0;
            padding: 0;
        }

        .parent {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 为父元素开启相对定位 */
            position: relative;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 为子元素开启绝对定位 */
            position: absolute;
            /* 设置该元素的偏移量，值为 50% */
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
        }

  1. 定位实现水平垂直居中

    给父元素添加position:relative，给子元素添加 position:absolute、将元素拉满整个容器、通过margin:auto实现居中

    <div class="parent">
        <div class="child"></div>
    </div>

       *{
            margin: 0;
            padding: 0;
        }

        .parent {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 为父元素开启相对定位 */
            position: relative;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 为子元素开启绝对定位 */
            position: absolute;
            /* 让子元素拉满整个容器 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* 通过 margin:auto 实现水平居中 */
            margin: auto;
        }

  1. 定位实现水平垂直居中

    给父元素添加position:relative，给子元素添加 position:absolute、设置该元素的偏移量值为50%，通过translate反向偏移的方式实现居中

    <div class="parent">
        <div class="child"></div>
    </div>

        *{
            margin: 0;
            padding: 0;
        }

        .parent {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 为父元素开启相对定位 */
            position: relative;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 为子元素开启绝对定位 */
            position: absolute;
            /* 设置元素的偏移量为50% */
            left: 50%;
            top: 50%;
            /* 通过 translate 反向偏移的方式实现居中 */
            transform: translate(-50%, -50%);
        }

  1. Flex布局

    通过Flex布局实现水平垂直居中

    <div class="parent">
        <div class="child"></div>
    </div>

        *{
            margin: 0;
            padding: 0;
        }

        .parent {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 开启Flex布局 */
            display: flex;
            /* 方法一 */
            justify-content: center;
            align-items: center;
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 方法二 */
            /* margin: auto; */
        }

  1. Grid布局

    通过Grid布局实现水平垂直居中

    <div class="parent">
        <div class="child"></div>
    </div>

        *{
            margin: 0;
            padding: 0;
        }

        .parent {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #ff8787;
            /* 开启Flex布局 */
            display: grid;
            /* 方法一 */
            align-items: center;
            justify-content: center;
            /* 方法一缩写 */
            /* place-items: center; */
            /* 方法二 */
            /* align-content: center; */
            /* justify-content: center; */
            /* 方法二缩写 */
            /* place-content: center; */

        }

        .child {
            width: 300px;
            height: 300px;
            background-color: #e599f7;
            /* 方法三 */
            /* margin: auto; */
            /* 方法四 */
            /* align-self: center; */
            /* justify-self: center; */
            /* 方法四缩写 */
            /* place-self: center; */
        }

页面效果：
水平垂直居中

两列布局（六种方案）

  1. float+calc()函数完成左列定宽右列自适应

    左右列同时开启浮动，右列宽度为父级100%减去左列的宽度

      <div class="box clearfix">
          <div class="left">定宽</div>
          <div class="right">自适应</div>
      </div>

        *{
            margin: 0;
            padding: 0;
        }
        .box{
             height: 400px;
             background-color: #eebefa;
        }
        .left{
              width: 200px;
              height: 400px;
              background-color: #f7f895;
              line-height: 400px;
              text-align: center;
              font-size: 70px;
              /* 左边列开启浮动 */
              float: left;
        }
        .right{
               height: 400px;
               background-color: #c0eb75;
               line-height: 400px;
               font-size: 70px;
               /* 右边列开启浮动 */
               float: left;
               /* 宽度减去左列的宽度 */
               width: calc(100% - 200px);
        }
        /* 清除浮动 */
        .clearfix:after{
                  height: 0;
                  content: '';
                  display: block;
                  clear: both;
                  visibility: hidden;
        }

  1. float+margin-left完成左列定宽右列自适应

    左列开启浮动，右列宽度为左列的宽度的外边距

      <div class="box clearfix">
          <div class="left">定宽</div>
          <div class="right">自适应</div>
      </div>

        *{
            margin: 0;
            padding: 0;
        }
        .box{
             height: 400px;
             background-color: #eebefa;
        }
        .left{
              width: 200px;
              height: 400px;
              background-color: #f7f895;
              line-height: 400px;
              text-align: center;
              font-size: 70px;
              /* 左边列开启浮动 */
              float: left;
        }
        .right{
               height: 400px;
               background-color: #c0eb75;
               line-height: 400px;
               font-size: 70px;
               /* 通过外边距的方式使该容器的左边有200px */
               margin-left: 200px;
        }
        /* 清除浮动 */
        .clearfix:after{
                  height: 0;
                  content: '';
                  display: block;
                  clear: both;
                  visibility: hidden;
        }

  1. absolute+margin-left完成左列定宽右列自适应

    左列开启定位，右列宽度为左列的宽度的外边距

      <div class="box clearfix">
          <div class="left">定宽</div>
          <div class="right">自适应</div>
      </div>

        *{
            margin: 0;
            padding: 0;
        }
        .box{
             height: 400px;
             background-color: #eebefa;
        }
        .left{
              width: 200px;
              height: 400px;
              background-color: #f7f895;
              line-height: 400px;
              text-align: center;
              font-size: 70px;
              /* 左边列开启定位 脱离文档流 */
              position: absolute;
        }
        .right{
               height: 400px;
               background-color: #c0eb75;
               line-height: 400px;
               font-size: 70px;
               /* 通过外边距的方式使该容器的左边有200px */
               margin-left: 200px;
               
        }
        /* 清除浮动 */
        .clearfix:after{
                  height: 0;
                  content: '';
                  display: block;
                  clear: both;
                  visibility: hidden;
        }

  1. float+overflow完成左列定宽右列自适应

    左列开启浮动，右列设置overflow:hidden完成自适应

      <div class="box clearfix">
          <div class="left">定宽</div>
          <div class="right">自适应</div>
      </div>

        *{
            margin: 0;
            padding: 0;
        }
        .box{
             height: 400px;
             background-color: #eebefa;
        }
        .left{
              width: 200px;
              height: 400px;
              background-color: #f7f895;
              line-height: 400px;
              text-align: center;
              font-size: 70px;
              /* 左边列开启浮动 */
              float: left;
        }
        .right{
               height: 400px;
               background-color: #c0eb75;
               line-height: 400px;
               font-size: 70px;
               /* 右列实现自适应 */
               overflow: hidden;
        }
        /* 清除浮动 */
        .clearfix:after{
                  height: 0;
                  content: '';
                  display: block;
                  clear: both;
                  visibility: hidden;
        }

  1. Flex布局

    通过Flex布局实现左列定宽右列自适应

      <div class="box clearfix">
          <div class="left">定宽</div>
          <div class="right">自适应</div>
      </div>

        *{
            margin: 0;
            padding: 0;
        }
        .box{
             height: 400px;
             background-color: #eebefa;
             /* 开启Flex布局 */
             display: flex;
        }
        .left{
              width: 200px;
              height: 400px;
              background-color: #f7f895;
              line-height: 400px;
              text-align: center;
              font-size: 70px;
        }
        .right{
               height: 400px;
               background-color: #c0eb75;
               line-height: 400px;
               font-size: 70px;
               /* 右列实现自适应  flex: 1 表示 flex-grow: 1 -----> 即该项占所有剩余空间 */ 
               flex: 1;

        }
        /* 清除浮动 */
        .clearfix:after{
                  height: 0;
                  content: '';
                  display: block;
                  clear: both;
                  visibility: hidden;
        }

  1. Grid布局

    通过Grid布局实现左列定宽右列自适应

      <div class="box clearfix">
          <div class="left">定宽</div>
          <div class="right">自适应</div>
      </div>

        *{
            margin: 0;
            padding: 0;
        }
        .box{
             height: 400px;
             background-color: #eebefa;
             /* 开启Grid布局 */
             display: grid;
             /* 将其划分为两行，其中一列有本身宽度决定，一列占剩余宽度 */
             grid-template-columns: auto 1fr;
        }
        .left{
              width: 200px;
              height: 400px;
              background-color: #f7f895;
              line-height: 400px;
              text-align: center;
              font-size: 70px;
        }
        .right{
               height: 400px;
               background-color: #c0eb75;
               line-height: 400px;
               font-size: 70px;
        }
        /* 清除浮动 */
        .clearfix:after{
                  height: 0;
                  content: '';
                  display: block;
                  clear: both;
                  visibility: hidden;
        }

页面效果：
两列布局

三列布局（五种方案）

三列布局主要分为两大类：一种是前两列定宽最后一列自适应，一种是两边列定宽中间自适应

  1. 通过float实现两边列定宽中间自适应
 <!-- 解决高度塌陷 -->
<div class="container clearfix">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="content">内容</div>
</div>

        body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
        }

        .left {
            height: 400px;
            width: 200px;
            background-color: #f783ac;
            /* 左列开启左浮动 */
            float: left;
        }

        .content {
            height: 400px;
            background-color: #d9480f;
            /* 自适应元素设置overflow会创建一个BFC完成自适应 */
            overflow: hidden;
        }

        .right {
            height: 400px;
            width: 200px;
            background-color: #c0eb75;
            /* 右列容器开启右浮动 */
            float: right;
        }

        .left,
        .content,
        .right {
            font-size: 70px;
            line-height: 400px;
            text-align: center;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
  1. 通过float实现两边列定宽中间自适应
 <!-- 解决高度塌陷 -->
<div class="container clearfix">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="content">内容</div>
</div>

        body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
        }

        .left {
            height: 400px;
            width: 200px;
            background-color: #f783ac;
            /* 左列开启左浮动 */
            float: left;
        }

        .content {
            height: 400px;
            background-color: #d9480f;
            /* 使中间自适应的宽度为父级容器减去两个定宽的列 */
            width:calc(100%-400px);
        }

        .right {
            height: 400px;
            width: 200px;
            background-color: #c0eb75;
            /* 右列容器开启右浮动 */
            float: right;
        }

        .left,
        .content,
        .right {
            font-size: 70px;
            line-height: 400px;
            text-align: center;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

  1. 通过position实现两边列定宽中间自适应

    左右两列脱离文档流，并通过偏移的方式达到自己的区域;中间列宽度为父级容器减去两个定宽的列;通过外边距将容器往内缩小

 <!-- 解决高度塌陷 -->
    <div class="container clearfix">
        <div class="left">左</div>
        <div class="content">内容</div>
        <div class="right">右</div>
    </div>


        body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
        }

        .left {
            height: 400px;
            width: 200px;
            background-color: #f783ac;
            /* 左列脱离文档流，并通过偏移的方式到达自己的区域*/
            position: absolute;
            left: 0;
            top: 0;
        }

        .content {
            height: 400px;
            background-color: #d9480f;
            /* 使中间自适应的宽度为父级容器减去两个定宽的列 */
            width: calc(100%-400px);
            /* 通过外边距将容器往内缩小 */
            margin-left: 200px;
            margin-right: 200px;
        }

        .right {
            height: 400px;
            width: 200px;
            background-color: #c0eb75;
            /* 右列脱离文档流，并通过偏移的方式到达自己的区域*/
            position: absolute;
            left: 0;
            top: 0;
        }

        .left,
        .content,
        .right {
            font-size: 70px;
            line-height: 400px;
            text-align: center;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

  1. Flex布局

    通过Flex布局实现左右两列定宽中间自适应

<!-- 解决高度塌陷 -->
<div class="container clearfix">
    <div class="left">左</div>
    <div class="content">内容</div>
    <div class="right">右</div>
</div>

        body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
            /* 为父元素开启flex布局 */
            display: flex;
        }

        .left {
            height: 400px;
            width: 200px;
            background-color: #f783ac;
        }

        .content {
            height: 400px;
            background-color: #d9480f;
        }

        .right {
            height: 400px;
            width: 200px;
            /* flex:1 表示该项占所有剩余空间 */
            flex: 1;
        }

        .left,
        .content,
        .right {
            font-size: 70px;
            line-height: 400px;
            text-align: center;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

  1. Grid布局

    通过Grid布局实现左右两列定宽中间自适应

  <!-- 解决高度塌陷 -->
    <div class="container clearfix">
        <div class="left">左</div>
        <div class="content">内容</div>
        <div class="right">右</div>
    </div>

        body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
            /* 为父元素开启Grid布局 */
            display: grid;
            /* 将其划分为两行，其中一列有本身宽度决定， 一列占剩余宽度*/
            grid-template-columns: auto 1fr auto;
        }

        .left {
            height: 400px;
            width: 200px;
            background-color: #f783ac;
        }

        .content {
            height: 400px;
            background-color: #d9480f;
        }

        .right {
            height: 400px;
            width: 200px;
        }

        .left,
        .content,
        .right {
            font-size: 70px;
            line-height: 400px;
            text-align: center;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

页面效果：
三列布局

等分布局（四种方案）

  1. 浮动+百分比
  <!-- 父元素清除浮动 -->
    <div class="container clearfix">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
    </div>

        body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
        }

        .item {
            height: 100%;
            /* 开启浮动，每个元素占25%的宽度 */
            width: 25%;
            float: left;
        }

        .item1 {
            background-color: #eccc68;
        }

        .item2 {
            background-color: #a6c1fa;
        }

        .item3 {
            background-color: #fa7d90;
        }

        .item4 {
            background-color: #b0ff70;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
  1. 行内块级+百分比方式
    <!-- 父元素清除浮动 -->
    <div class="container clearfix">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
    </div>

        body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
        }

        .item {
            height: 100%;
            /* 将元素设为行内块级元素 */
            display: inline-block;
            /* 每个元素占24.5%的宽度 */
            width: 24.5%;
        }

        .item1 {
            background-color: #eccc68;
        }

        .item2 {
            background-color: #a6c1fa;
        }

        .item3 {
            background-color: #fa7d90;
        }

        .item4 {
            background-color: #b0ff70;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
  1. Flex布局
    <!-- 父元素清除浮动 -->
    <div class="container clearfix">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
    </div>

        body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
            /* 开启Flex布局 */
            display: flex;
        }

        .item {
            height: 100%;
            /* 每个元素占相同的宽度*/
            flex:1;
        }

        .item1 {
            background-color: #eccc68;
        }

        .item2 {
            background-color: #a6c1fa;
        }

        .item3 {
            background-color: #fa7d90;
        }

        .item4 {
            background-color: #b0ff70;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
  1. Grid布局
    <!-- 父元素清除浮动 -->
    <div class="container clearfix">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
    </div>

   body {
            margin: 0;
        }

        .container {
            height: 400px;
            background-color: #eebefa;
            /* 开启 grid 布局 */
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* 使用 repeat 函数生成如下代码 */
            /* grid-template-columns: 1fr 1fr 1fr 1fr; */
        }

        .item {
            height: 400px;
        }

        .item1 {
            background-color: #eccc68;
        }

        .item2 {
            background-color: #a6c1fa;
        }

        .item3 {
            background-color: #fa7d90;
        }

        .item4 {
            background-color: #b0ff70;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

页面效果：
等分布局

lemontreetrees
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发常见的五种布局方式及应用场景
m0_64409387的博客
02-10 2864
前端开发常见的五种布局方式及应用场景 1.静态布局： 给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。优点：设计简单。缺点：对于不同尺寸屏幕的兼容性不好，特别是移动端。 2.流式布局： 元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。优点：页面元素宽高可以自适应调整。缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。 3.自适应布局： 屏幕尺寸或分辨率变化时，页面元素会跟着变化。缺点：页面元素不会随着窗口大小的调整而发生变化。 4.弹性布局
CSS基础之如何前端布局方式有哪些
lee前端技术站
08-27 697
我们知道html定义了前端页面的结构，css定义了页面的样子，JavaScript定义了用于的行为。页面的结构和样式，又可以简单的成为是布局，我们就来讲讲前端页面的布局有哪些？ 1、流体布局 流体布局其实我们正常的布局，他其实就是一个盒子模型。 在这种布局下我们其实能操作的布局样式很少，我这里主要提一下margin属性，我们可以通过margin:auto；对子元素进行水平居中。通过它可以让元素水平居中的原因在于 auto 的计算原理：auto会让盒子模型填充父元素剩下的宽度。也可实现盒子的垂...
前端布局面典型案例
wgchen
05-28 910
这里写目录标题搭建web静态页面基础知识前端布局典型案例一、题目要求及页面效果示意图二、考点分析三、解答代码1）定位写法2）伸缩布局写法四、页面展示 搭建web静态页面基础知识 前端布局典型案例 一、题目要求及页面效果示意图 1）如下图布局，分为上下两栏，下面一栏又分左右两栏。上栏宽度为100%、高度为200px，下栏左侧栏宽度为100px，下栏右侧栏根据页面宽度自适应。请写出具体的HTML和css代码。 2）当浏览器宽度减少到700px后，顶部栏高度变为50px，下栏左侧栏消失，下栏右侧栏宽度为100%
总结了 42 种前端常用布局方案（一）
李水灵的博客
03-14 213
转载自：前端大全 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 本篇文章总结了 42 中 CSS 的常见布局，这 42 种布局可以细分为如下几类： 水平居中 垂直居中 水平垂直居中 两列布局 三列布局 等分布局 Sticky Footer 布局 全屏布局 这些内容也正是本篇文章的目录。 水平居中 实现水平布局比较简单，方法也比较多，这里总结了 7 种常用的布局方法，其公共的 CSS 代码如下所示： .parent {
web前端开发常用布局demo
09-20
本内容主要包含常用的web开发中所需要用到的布局方式，可以作为参考引用到自己的项目开发中。
牛客-前端布局与事件高频考点
04-03
flex布局是一种常用的布局方式，可以用来实现一些复杂的布局效果。flex布局可以用来实现圣杯布局、双飞翼布局等。 八、元素居中 元素居中是指元素在容器中居中的情况。元素居中可以通过position:absolute和...
WEB前端设计师常用工具集锦
09-04
WEB前端设计师在日常工作中需要掌握一系列工具来提升效率和效果，这些工具涵盖了调试、优化、设计、兼容性检查等多个方面。以下是一些常用的工具及其重要功能： 【Firefox插件】 1. Firebug：这是一个强大的HTML、...
前端布局
04-07
首先，我们需要理解前端布局的几种基本模式。传统上，我们有固定布局、流体布局和混合布局。固定布局是早期网页设计常用的方式，各元素宽度固定，不随浏览器窗口大小变化。流体布局则允许页面元素根据浏览器窗口大小...
前端拖拽布局框架.pdf
03-09
在前端开发中，拖拽布局框架是实现用户交互和动态界面设计的重要工具。这些框架允许用户通过简单的拖放操作来调整元素的位置和大小，从而创建个性化的布局。本文将主要探讨与前端拖拽布局框架相关的HTML、CSS以及...
JavaWeb前端到后台常用框架介绍共10页.pdf.zi
10-30
【标题】"JavaWeb前端到后台常用框架介绍共10页.pdf" 提供了一个关键信息，即这份资料主要探讨的是JavaWeb开发过程中，从用户界面到服务器端所使用的常见框架。在JavaWeb开发中，框架起到了提高开发效率、规范代码...
妙味课堂——前端HTML+CSS修炼之道-值得反复推敲的经典布局方案
11-10
前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局 前端HTML+CSS修炼之道-值得反复推敲的经典布局方案.如何合理的对网页中的各个元素进行合理布局
总结了42种前端常用布局方案，值得看看
一碗周
12-09 3479
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第三十七篇-《四十二种前端布局方案》 本系列文章在掘金首发，编写不易转载请获得允许 对CSS布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。 本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为如下几类： 水平居中 垂直居中 水平垂直居中 两列布局 三列布局 等分布局 Stic.
前端响应式布局原理与方案（详细版）
tinfengyee的博客
04-22 614
引言 本文转自： 前端响应式布局原理与方案（详细版） 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。...
前端设计，CSS 常用布局解决方案
zysgdhf4253的博客
09-03 368
记录下 CSS 常用布局的解决方案，对于需要高兼容性的布局可以使用基于 posistion 属性的布局，table 布局方式也经常用到。还有基于margin 和 float 的传统布局方式、利用 BFC 的布局方式和 CSS3 的弹性布局 flex 的布局方式。具体选用哪一种可以依据实际业务加以变通和修改。 1、水平居中布局   inline-block + text-align   优...
常见的几种页面内容布局方式
热门推荐
wang839305939的博客
07-27 6万+
常见的页面布局，左右自适应布局
前端常见的适配方式
yuanfanlove的博客
11-08 3502
1，静态配置--固定布局（pc端） 以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸 2，根据不同根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局）自适应布局 1、<script> // 分辨率大于等于1680，大部分为1920的情况下，调用此css if(window.screen.width >= 1680){ document.write('<link rel="stylesheet" href="css/index_1920.css"&gt
HTML与CSS布局技巧总结
bingkingboy的博客
04-11 3万+
很多人对CSS的布局有困惑，实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解，分析下了解各种布局的优劣，同时希望能分享给初入前端的朋友们一些在布局上的经验，如果有那些地方总结的不好，欢迎大家指正。言归正传，现在就来揭开各种布局的面纱。 单列布局 <div class="parent"> <div class="child"></div> </div>水平
前端之移动端布局实例
tianduantoutiao的博客
05-31 1702
移动端布局实例 基于rem的布局 首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。 em单位示例 <!DOCTYPE html> <html lan...
常见前端布局问题（二）垂直居中
chongxiaocheng的博客
10-31 451
1，垂直居中 1-1，块级元素 1-2,行内块   1-3,定位   1-4,负边距   1-5,伪类   1-6,flex布局        
主流前端移动端适配方案
最新发布
04-19
好的，关于主流前端移动端适配方案，一种常用的方式是使用响应式设计，根据不同设备尺寸和屏幕密度，自动调整页面布局和字体大小。另外，还有使用Viewport、rem、em等CSS单位来实现屏幕适配的方法。您可以根据具体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值