CSS经常使用布局

时间 2019-11-08

标签 css 经常使用布局栏目 CSS 繁體版

原文原文链接

本文是我的笔记，都是些基础用法，大佬请自行略过css

多列等高，多行布局共用htmlhtml

<!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>
复制代码

多列等高布局

常见应用：三列布局，左右定宽，中间自适应ide

效果图以下：布局

普通实现（最不喜欢的方案）

html学习

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

cssflex

.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 时会有空隙，常见的解决方案有以下几种：ui

html不换行，可是这样不方便维护，能够经过添加注释的方法实现（示例代码用的就是这个方法）
将父元素 font-size 设为 0 ，子元素 font-size 从新设置正确的值（font-size 会继承父元素的值）
设置浮动，会影响布局（不推荐）
设置子元素的 margin 为负值
最好的方案：使用别的布局方案！！！

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 布局能够参考如下连接：flexbox

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 布局能够参考如下连接spa

CSS Grid 网格布局教程-阮一峰老师
grid-MDN

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;
}
复制代码

多行布局

常见应用：上中下布局，上下定高，中间自适应code

实现与多列相似，下面是具体代码

效果图以下：

普通方式

.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 大法好，但也不能滥用哦~

掘友若是有其余的方案能够评论区交流