CSS中的布局

最新推荐文章于 2024-08-26 19:16:26 发布

「已注销」

最新推荐文章于 2024-08-26 19:16:26 发布

阅读量154

点赞数

分类专栏：面试前端文章标签： css 面试布局

本文链接：https://blog.csdn.net/Skay_l/article/details/100067505

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

面试

1 篇文章 0 订阅

订阅专栏

文章目录

- - - 一、如何实现品字布局
    - 二、如何实现垂直水平居中

一、如何实现品字布局

每块宽度相等但没有确定值，且不超过50%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>品字布局</title>
  <style>
    /* div2，div3 设置为 inline-block，可用 text-align: center 居中 */
    body { text-align: center; }
    .div { width: 40%; height: 300px; line-height: 300px; background-color: aqua; border: solid 1px #666; }
    /* 上面的div居中 */
    .div1 { margin: 0 auto; }
    /* 下面的两个div设置为 display: inline-block，不换行 */
    .div2 { display: inline-block; }
    .div3 { display: inline-block; }
  </style>
</head>
<body>
  <div class="div div1">1</div>
  <div class="div div2">2</div>
  <div class="div div3">3</div>
</body>
</html>

每块都有固定宽高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>品字布局</title>
  <style>
    .div { width: 100px; height: 100px; line-height: 100px; background-color: aqua; border: solid 1px #666; text-align: center; }
    .div1 { margin: auto; }
    /* 根据固定的宽度进行定位 */
    .div2 { float: left; margin-left: 50%; position: relative; left: -100px; }
    .div3 { float: left; position: relative; left: -100px;}
  </style>
</head>
<body>
  <div class="div div1">1</div>
  <div class="div div2">2</div>
  <div class="div div3">3</div>
</body>
</html>

满屏宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>品字布局</title>
  <style>
    .div { height: 300px; line-height: 300px; text-align: center; }
    .div1 { width: 100%; margin: auto; background-color: red; }
    .div2 { width: 50%; float: left; background-color: yellow; }
    .div3 { width: 50%; float: right; background-color: blue; }
  </style>
</head>
<body>
  <div class="div div1">1</div>
  <div class="div div2">2</div>
  <div class="div div3">3</div>
</body>
</html>

二、如何实现垂直水平居中

margin: auto

	.outer {
      position: relative;
      width: 100%;
      height: 500px;
      background: red;
    }
    .inner {
      background: blue;
      width: 50%;
      height: 50%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

transform

	.outer {
      position: relative;
      width: 100%;
      height: 500px;
      background: red;
    }
    .inner {
      background: blue;
      width: 50%;
      height: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%)
    }

flex

	.outer {
      width: 100%;
      height: 500px;
      background: red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .inner {
      background: blue;
      width: 50%;
      height: 50%;
    }

table

	/* 需要确定宽高 */
	.outer {
      width: 700px;
      height: 500px;
      background: red;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .inner {
      display: inline-block;
      background: blue;
      width: 400px;
      height: 300px;
    }

grid

	/* 需要确定内部容器宽度 */
    .outer {
      background: red;
      width: 700px;
      height: 500px;
      display: grid;
      justify-content: center;
    }
    .inner {
      background: blue;
      width: 300px;
      height: 50%;
      align-self: center;
    }