CSS常见手写题汇总(一） 两栏布局、三栏布局、垂直居中

于 2025-02-12 08:30:00 发布
阅读量2.1k 收藏 39
点赞数 56
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/internet__/article/details/145581544
版权

目录

一、两栏布局的实现

1.1浮动+margin

1.2浮动+BFC

1.3flex布局

1.4左边子绝父相

1.5右边子绝父相

二、三栏布局的实现

2.1绝对定位+margin

2.2flex布局

2.3浮动

2.4圣杯布局（三浮动 加margin负值 +relative）

2.5双飞翼布局(三浮动 加margin负值)

三、水平垂直居中的实现

3.1.绝对定位+margin负值

3.2.绝对定位+translate

3.3绝对定位+margin:auto

3.4felx布局

四、实现“品” 字布局

4.1浮动实现

4.2inline-block实现

五、实现九宫格

5.1flex布局

5.2grid布局

5.3浮动

5.4行内块 inline-block

一、两栏布局的实现

1.1浮动+margin

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）

html结构：

  <div class="outer">
    <div class="left">aaaaa</div>
    <div class="right">bbbb</div>
  </div>

样式：

  <!-- <style>
    .outer{
      height: 100px;
    }
    .left{
      width: 200px;
      float: left;
      background-color: tomato;
    }
    .right{
      margin-left: 200px;
      width: auto;
      background-color: pink;
    }
  </style> -->

1.2浮动+BFC

利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

  <!-- 浮动+BFC 浮动不会和BFC产生重叠 -->
  <!-- <style>
    .left{
      width: 200px;
      float: left;
      background-color: orange;
    }
    .right{
      background-color: red;
      overflow: hidden;
    }
  </style> -->

1.3flex布局

利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1

<!-- 利用flex -->
   <!-- <style>
    .outer{
      display: flex;
    }
    .left{
      width: 200px;
      background-color: orange;
    }
    .right{
      flex:1;
      background-color: red;
    }
   </style> -->

1.4左边子绝父相

利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

   <!-- 左边子绝父相 -->
    <!-- <style>
      .outer{
        height: 200px;
        position: relative;
      }
      .left{
        position: absolute;
        width: 200px;
        background-color: orange;
      }
      .right{
        margin-left: 200px;
        height: 200px;
        background-color: red;
      }
    </style> -->

1.5右边子绝父相

利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

     <style>
      .outer{
        position: relative;
        height: 200px;
      }
      .left{
        width: 200px;
        background-color: red;
      }
      .right{
        position: absolute;
        top: 0;
        /* bottom: 0; */
        /* 同时设置了left和right会进行拉伸满足这两个要求 如果有width了 就会忽略right
          /* 同时设置了bottom和top也是同理 */
        right: 0;
        left: 200px;
        background-color: orange;
        height: 200px;
      }
     </style>

二、三栏布局的实现

2.1绝对定位+margin

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

html：

  <div class="outer">
    <div class="left"></div>
     <div class="center"></div>
    <div class="right"></div>

  </div>
   .outer{
      height: 200px;
      position: relative;
    }
    .left{
      width: 200px;
      height: 100px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: orange;
    }
    .right{
      width: 200px;
      height: 100px;
      position: absolute;
      right: 0;
      top: 0;
      background-color: red;
    }
    .center{
      margin-left: 200px;
      margin-right: 200px;
      height: 200px;
      background-color: blue;
    }

2.2flex布局

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1

/* 2.flex布局 */
 .outer{
  height: 200px;
  display: flex;
}
.left{
  width: 100px;
  background-color: orange;
}
.right{
  width: 100px;
  background-color: red;
}
.center{
  flex:1;
  background-color: blue;
}

2.3浮动

利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后：

/* 3.浮动 html一定要先写左右 再center 因为margin占位置  先左再center 右只能到下一行了 */
 .outer{
  height: 200px;
}
.left{
  width: 100px;
  height: 200px;
  float: left;
  background-color: orange;
}
.right{
  width: 100px;
  height: 200px;
  float: right;
  background-color: red;
}
.center{
  margin-left: 100px;
  margin-right: 100px;
  height: 200px;
  background-color: blue;
}

2.4圣杯布局（三浮动 加margin负值 +relative）

圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

 .outer{
  height: 200px;
  padding-left: 200px;
  padding-right: 200px;
  background-color: pink;
}
.center{
  float: left;
  width: 100%;
  height: 200px;
  background-color: red;
}
.left{
  position: relative;
  left: -200px;
  float: left;
  background-color: blue;
  height: 200px;
  width: 200px;
  margin-left: -100%;
}
.right{
  float: left;
  background-color: green;
  height: 200px;
  width: 200px;
  margin-left: -200px;
  position: relative;
  right: -200px;
}

2.5双飞翼布局(三浮动 加margin负值)

双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

/* 双飞翼布局  三浮动 加margin负值*/
.outer{
  height: 200px;
}
.wrapper{
  float: left;
  height: 200px;
  width: 100%;
  background-color: blue;
}
.center{
  margin-left: 200px;
  margin-right: 150px;
  background-color: pink;
  height: 200px;
}
.left{
  float: left;
  /* 因为这个百分比是相对wrapper来说的  */
  margin-left: -100%;
  width: 200px;
  height: 200px;
  background-color: red;
}
.right{
  float: left;
  width: 150px;
  height: 200px;
  margin-left: -150px;
  background-color: orange;
}

三、水平垂直居中的实现

3.1.绝对定位+margin负值

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

    .father{
      height: 100px;
      width: 100px;
      background-color: pink;
      position: relative;
    }
    .pos{
      width: 20px;
      height: 20px;
      background-color: blue;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -10px;
      margin-top: -10px;
    }

3.2.绝对定位+translate

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

.father{
      height: 100px;
      width: 100px;
      background-color: pink;
      position: relative;
    }
    .pos{
      width: 20px;
      height: 20px;
      background-color: blue;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

3.3绝对定位+margin:auto

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

   .father{
      height: 100px;
      width: 100px;
      background-color: pink;
      position: relative;
    }
    .pos{
      width: 20px;
      height: 20px;
      background-color: blue;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

3.4felx布局

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

.father{
      height: 100px;
      width: 100px;
      background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .pos{
      width: 20px;
      height: 20px;
      background-color: blue;

四、实现“品” 字布局

4.1浮动实现

我们可以使用定位实现，对于上面的1，使用magin属性让他水平居中；下面的两个使用浮动即可实现，其HTML结构如下：

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
    /* 用浮动就是想让下面两个div不换行 */
     div{
      width: 100px;
      height: 100px;
      font-size: 20px;
      color: white;
      line-height: 100px;
      text-align: center;
    }
    .div1{
      background-color: red;
      margin: auto;
    }
    .div2{
      float: left;
      background-color: pink;
      margin-left: 50%;
    }
    .div3{
      float: left;
      background-color: blue;
      margin-left: -200px;
    }

4.2inline-block实现

这里将div设置为了inline-block，实际上和上面的float的作用是一眼的，就是让下面的两个块不换行。使用CSS样式如下：

/* 用display：inline-block也可以实现不换行 */
    div{
      width: 100px;
      height: 100px;
      font-size: 20px;
      color: white;
      line-height: 100px;
      text-align: center;
    }
    .div1{
      background-color: red;
      margin: auto;
    }
    .div2{
      display: inline-block;
      background-color: pink;
      margin-left: 50%;
    }
    .div3{
      display: inline-block;
      background-color: blue;
      margin-left: -200px;
    }

五、实现九宫格

5.1flex布局

对于九宫格布局，我首先想到的就是flex布局，flex布局实现九宫格很简单，需要设置一个flex-wrap: wrap;使得盒子在该换行的时候进行换行。

由于我们给每个元素设置了下边距和右边距，所以最后同一列（3、6、9）的右边距和最后一行（7、8、9）的下边距撑大了ul，所以这里使用类型选择器来消除他们的影响。

  <div class="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </div>
 .box{
      width: 500px;
      height: 500px;
    }
    ul{
      padding: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    li { 
	    list-style: none;
      text-align: center;
	    border-radius: 5px;
	    background: skyblue;
      width: 30%;
      height: 30%;
      margin-right: 5%;
      margin-bottom: 5%;
  }
  li:nth-of-type(3n){
    margin-right: 0;
  }
  li:nth-of-type(n+7){
    margin-bottom: 0;
  }

5.2grid布局

grid布局相对于flex布局来说，实现九宫格就更加容易了，只需要设置几个属性即可

 <!-- <style>
    .box{
      width: 500px;
      height: 500px;
    }
    ul{
      padding: 0;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 30% 30% 30%;
      grid-template-rows: 30% 30% 30%;
      grid-gap: 5%;
    }
    li{
      list-style: none;
      text-align: center;
      border-radius: 5px;
      background-color: skyblue;
    }
   </style> -->

5.3浮动

这里首先需要给父元素的div设置一个宽度，宽度值为：盒子宽 * 3 + 间距 * 2；然后给每个盒子设置固定的宽高，为了让他换行，可以使用float来实现，由于子元素的浮动，形成了BFC，所以父元素ul使用overflow:hidden；来消除浮动带来的影响。

<!-- <style>
    .box{
      width: 500px;
      height: 500px;
    }
    ul {
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    li {
      list-style: none;
      background-color: skyblue;
      float: left;
      width: 30%;
      height: 30%;
      margin-right: 5%;
      margin-bottom: 5%;
      }

    li:nth-of-type(3n){ 
      margin-right: 0;
    }

    li:nth-of-type(n+7){ 
      margin-bottom: 0;
    }
   </style> -->

5.4行内块 inline-block

其实inline-block的作用和上面float的作用是一样的，都是用来让元素换行的

 <!-- 但是行内块之间默认有间距 在ul里设置font-size：0或者letter-space负值来消除-->
   <style>
    .box{
      width: 500px;
      height: 500px;
      letter-spacing: -5px;
      /* font-size: 0; */
    }
    ul {
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    li {
      list-style: none;
      background-color: skyblue;
      display: inline-block;
      width: 30%;
      height: 30%;
      margin-right: 5%;
      margin-bottom: 5%;
      }

    li:nth-of-type(3n){ 
      margin-right: 0;
    }

    li:nth-of-type(n+7){ 
      margin-bottom: 0;
    }
   </style>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值