阅读 33

CSS常用布局

本文是个人笔记,都是些基础用法,大佬请自行略过

多列等高,多行布局共用html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>常用布局</title>
  <style>
      html, body {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>
复制代码

多列等高布局

常见应用:三列布局,左右定宽,中间自适应

效果图如下:

普通实现(最不喜欢的方案)

html

<div class="container">
  <div>1</div><!--
  --><div>2</div><!--
  --><div>3</div>
</div>
复制代码

css

.container {
  width: 100%;
  height: 100%;
}

.container>div {
  display: inline-block;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
  box-sizing: border-box;
}

.container>div:nth-child(2) {
  width: calc(100% - 200px);
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}
复制代码

display 为 inline-block 时会有空隙,常见的解决方案有如下几种:

  1. html不换行,但是这样不方便维护,可以通过添加注释的方法实现(示例代码用的就是这个方法)
  2. 将父元素 font-size 设为 0 ,子元素 font-size 重新设置正确的值(font-size 会继承父元素的值)
  3. 设置浮动,会影响布局(不推荐)
  4. 设置子元素的 margin 为负值
  5. 最好的方案:使用别的布局方案!!!

flex 实现

.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(2) {
  flex: 1;
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}
复制代码

学习 flex 布局可以参考以下链接:

grid 实现

.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  /* grid-template-columns: 100px auto 100px; */
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}
复制代码

学习 grid 布局可以参考以下链接

table 实现

.container {
  display: table;
  width: 100%;
  height: 100%;
}

.container>div {
  display: table-cell;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}
复制代码

多行布局

常见应用:上中下布局,上下定高,中间自适应

实现与多列类似,下面是具体代码

效果图如下:

普通方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
}

.container>div {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
  box-sizing: border-box;
}

.container>div:nth-child(2) {
  /* width: 80%;
  margin: auto; */
  height: calc(100% - 200px);
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  height: 100px;
}
复制代码

如页脚需要固定在页面底端,请另行处理

flex 方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
  display: flex;
  flex-direction: column;
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(2) {
  flex: 1
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  height: 100px;
}
复制代码

grid 方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  /* grid-template-rows: 100px auto 100px; */
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}
复制代码

多行多列

常见应用:三行三列,两行三列等

示例为 三行三列——左右列定宽,中间列自适应;上下行定高,中间行自适应

效果图如下:

flex 方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>混合-多行多列-flex</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      height: 100%;
      /* height: 200vh; */
      display: flex;
      flex-direction: column;
      text-align: center;
    }

    header, footer {
      height: 100px;
      display: flex;
    }

    section {
      flex: 1;
      display: flex;
    }

    header>div, section>div, footer>div {
      width: 100px;
      border: 1px solid red;
    }

    header>div:nth-child(2), section>div:nth-child(2), footer>div:nth-child(2) {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </header>
    <section>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </section>
    <footer>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </footer>
  </div>
</body>
</html>
复制代码

grid 方式

html<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>混合-多行多列-grid</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      height: 100%;
      /* height: 200vh; */
      display: grid;
      /* grid-template-columns: 100px auto 100px;
      grid-template-rows: 100px auto 100px; */
      grid-template: 100px auto 100px / 100px auto 100px;
    }

    .container>div {
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>
复制代码

参考链接:🏩grid模板属性,实现三列两行布局 - #掘金沸点#

兼容性

flex:flex-caniuse

grid: grid-caniuse

flex 的兼容性比较好

所以:flex 大法好,但也不能滥用哦~

掘友如果有其他的方案可以评论区交流

关注下面的标签,发现更多相似文章
评论