微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > CSS列间隙和等高列利用表格实现

博主信息

博文 28

粉丝 0

访问量 39789

专题推荐

更多>

CSS 列间隙和等高列利用表格实现

先来看看最近学习的 CSS 变量和 CSS 计算的方法

CSS 变量的使用

:root{
    /* 声明这是一个CSS变量：用“--”来声明 */
    --background-color:red
}
.header{
    /* 引用变量：   属性：var(变量名) */
    background-color:var(--background-color)
}

注意两点：1.使用--来声明变量，2.使用var来引用变量。

CSS 计算

/* 设置一个页面宽度为70% */
.box{
    width:70%
}
/* 另外一个设置为30%，同时左侧设置一个1em的列间隙 */
.box2{
    width:calc(30% - 1em)
}

注意：calc 中适用 + - * /等基本运算，但是运算符前后要使用空格来隔开，如calc(值 '空格' '运算符' '空格' '另外一个值')

CSS 中的 @media 查询
可以查询的媒体类型：

值	描述
`all`	用于所有设备
`print`	用于打印或打印预览
`screen`	用于电脑屏幕、平板电脑、智能手机等
`speech`	应用于屏幕阅读器等发声设置

语法：@media 值 and (条件){符合条件时的CSS代码}
实例：使用@media 查询来制作响应式设计。

/* 通过媒体查询当前页面最小宽度等于800px时改变:root字号 */
@media screen and (min-width:800px){
    :root{
        font-size:0.8em;
    }
}
通过媒体查询当前页面最小宽度等于1000px时改变:root字号
@media screen and (min-width:1000px){
    :root{
        font-size:1.5em;
    }
}

列间距的设置：

通过设置 margin 来实现列间距，目前有两种方法：

通过百分比设置
通过百分比 - em 来实现（推荐使用）

通过百分比来设置：

<style>
      body {
        background-color: antiquewhite;
        color: blueviolet;
      }
      .main,
      .aside {
        /* 转为IE盒子 */
        box-sizing: border-box;
        /* 使用浮动来实现页面布局 */
        float: left;
        /* 盒子颜色aqua */
        background-color: aqua;
      }
      /* 设置左侧main的宽度 */
      .main {
        width: 70%;
      }
      /* 设置右侧.aside的宽度 */
      .aside {
        width: 30%;
      }
      /* 通过margin在盒子aside左侧来设置间隙 */
      .aside {
        /* 设置列间隙为1% */
        margin-left: 1%;
      }
    </style>
  </head>
  <body>
    <header class="header">
      <h1>列间距的设置方案</h1>
      <main class="main">
        <p>这是第一个盒子</p>
      </main>
      <aside class="aside">
        <div class="div">这是第二个盒子</div>
      </aside>
    </header>
  </body>

通过百分比 - em 来设置列间隙：

      body {
        background-color: antiquewhite;
        color: blueviolet;
      }
      .main,
      .aside {
        /* 转为IE盒子 */
        box-sizing: border-box;
        /* 使用浮动来实现页面布局 */
        float: left;
        /* 盒子颜色aqua */
        background-color: aqua;
      }
      /* 设置左侧main的宽度 */
      .main {
        width: 70%;
      }
      /* 设置右侧.aside的宽度 */
      .aside {
        width: 30%;
      }
      /* 通过margin在盒子aside左侧来设置间隙 */
      .aside {
        /* 通过CSS计算盒子aside最终宽度，避免宽度超过100%溢出 */
        width: calc(30% - 1em);
        /* 设置列间隙为1em */
        margin-left: 1em;
      }

无间隙效果：

有间隙效果：

这里涉及到一个属性float浮动：CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。

/* 元素向左浮动排列 */
float：left；
/* 清除浮动： */
clear：both；
/* 或 */
folat：none；

等高列的设置方法 1：表格设置；

通过表格来将容器转换为 table 属性，table 不支持 margin 属性的设置；

display介绍：display 属性规定元素应该生成的框的类型

值	作用
`inline`	默认。此元素会被显示为内联元素，元素前后没有换行符。
`block`	此元素将显示为块级元素，此元素前后会带有换行符。
`list-item`	此元素会作为列表显示。
`run-in`	此元素会根据上下文作为块级元素或内联元素显示。
`table`	此元素会作为块级表格来显示（类似 `<table>`），表格前后带有换行符。
`inline-table`	此元素会作为内联表格来显示（类似 `<table>`），表格前后没有换行符。
`table-row-group`	此元素会作为一个或多个行的分组来显示（类似 `<tbody>`）。
`table-header-group`	此元素会作为一个或多个行的分组来显示（类似 `<thead>`）。
`table-footer-group`	此元素会作为一个或多个行的分组来显示（类似 `<tfoot>`）。
`table-row`	此元素会作为一个表格行显示（类似 `<tr>`）。
`table-column-group`	此元素会作为一个或多个列的分组来显示（类似 `<colgroup>`）。
`table-column`	此元素会作为一个单元格列显示（类似 `<col>`）
`table-cell`	此元素会作为一个表格单元格显示（类似 `<td>` 和 `<th>`）
`table-caption`	此元素会作为一个表格标题显示（类似 `<caption>`）
`inherit`	规定应该从父元素继承 `display` 属性的值。

border-spacing：表格列间距。列与列之间的距离或间隙。

/* border-spacing:第一个值代表水平上（左右）的距离，第二个值代表垂直上（上下）的距离。 */
border-spacing：1.5em 0;

等高列案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>等高列实现</title>
    <style>
      body {
        background-color: aliceblue;
        color: blueviolet;
      }
      .header {
        background-color: aquamarine;
        border-radius: 0.5em;
      }
      .container {
        /* 先将容器container转换为表格 */
        display: table;
        /* 设置宽度为100%，占满整个父级容器 */
        width: 100%;
        /* 表格中的列间隔 */
        border-spacing: 1.5em 0;
      }
      .main,
      .aside {
        /* 将这两项转为单元格 */
        display: table-cell;
        background-color: aquamarine;
      }
      .wrapper {
        /* 这里两侧多出来的margin是表格的列间距 */
        margin-left: -1.5em;
        margin-right: -1.5em;
      }
    </style>
  </head>
  <body>
    <header class="header">
      <h1>表格等高实现：</h1>
    </header>
    <!-- 给容器container设置一个外套，方便去掉两侧的margin，使页面更美观 -->
    <div class="wrapper">
      <div class="container">
        <main class="main">
          <span
            >使用表格实现等高：<br />表格不支持margin的设置，也不支持浮动</span
          >
        </main>
        <aside class="aside">
          <div class="box">和左侧等高</div>
        </aside>
      </div>
    </div>
  </body>
</html>