search

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

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

G
G原创
2020年10月24日 17:22:191045浏览

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

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

  • CSS 变量的使用
  1. :root{
  2.     /* 声明这是一个CSS变量：用“--”来声明 */
  3.     --background-color:red
  4. }
  5. .header{
  6.     /* 引用变量：   属性：var(变量名) */
  7.     background-color:var(--background-color)
  8. }

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

  • CSS 计算
  1. /* 设置一个页面宽度为70% */
  2. .box{
  3.     width:70%
  4. }
  5. /* 另外一个设置为30%，同时左侧设置一个1em的列间隙 */
  6. .box2{
  7.     width:calc(30% - 1em)
  8. }

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

  • CSS 中的 @media 查询
    可以查询的媒体类型：
值 描述
all 用于所有设备
print 用于打印或打印预览
screen 用于电脑屏幕、平板电脑、智能手机等
speech 应用于屏幕阅读器等发声设置

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

  1. /* 通过媒体查询当前页面最小宽度等于800px时改变:root字号 */
  2. @media screen and (min-width:800px){
  3.     :root{
  4.         font-size:0.8em;
  5.     }
  6. }
  7. 通过媒体查询当前页面最小宽度等于1000px时改变:root字号
  8. @media screen and (min-width:1000px){
  9.     :root{
  10.         font-size:1.5em;
  11.     }
  12. }

列间距的设置：

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

  1. 通过百分比设置
  2. 通过百分比 - em 来实现（推荐使用）
  • 通过百分比来设置：
  1. <style>
  2.       body {
  3.         background-color: antiquewhite;
  4.         color: blueviolet;
  5.       }
  6.       .main,
  7.       .aside {
  8.         /* 转为IE盒子 */
  9.         box-sizing: border-box;
  10.         /* 使用浮动来实现页面布局 */
  11.         float: left;
  12.         /* 盒子颜色aqua */
  13.         background-color: aqua;
  14.       }
  15.       /* 设置左侧main的宽度 */
  16.       .main {
  17.         width: 70%;
  18.       }
  19.       /* 设置右侧.aside的宽度 */
  20.       .aside {
  21.         width: 30%;
  22.       }
  23.       /* 通过margin在盒子aside左侧来设置间隙 */
  24.       .aside {
  25.         /* 设置列间隙为1% */
  26.         margin-left: 1%;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <header class="header">
  32.       <h1>列间距的设置方案</h1>
  33.       <main class="main">
  34.         <p>这是第一个盒子</p>
  35.       </main>
  36.       <aside class="aside">
  37.         <div class="div">这是第二个盒子</div>
  38.       </aside>
  39.     </header>
  40.   </body>
  • 通过百分比 - em 来设置列间隙：
  1.       body {
  2.         background-color: antiquewhite;
  3.         color: blueviolet;
  4.       }
  5.       .main,
  6.       .aside {
  7.         /* 转为IE盒子 */
  8.         box-sizing: border-box;
  9.         /* 使用浮动来实现页面布局 */
  10.         float: left;
  11.         /* 盒子颜色aqua */
  12.         background-color: aqua;
  13.       }
  14.       /* 设置左侧main的宽度 */
  15.       .main {
  16.         width: 70%;
  17.       }
  18.       /* 设置右侧.aside的宽度 */
  19.       .aside {
  20.         width: 30%;
  21.       }
  22.       /* 通过margin在盒子aside左侧来设置间隙 */
  23.       .aside {
  24.         /* 通过CSS计算盒子aside最终宽度，避免宽度超过100%溢出 */
  25.         width: calc(30% - 1em);
  26.         /* 设置列间隙为1em */
  27.         margin-left: 1em;
  28.       }

无间隙效果：

有间隙效果：

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

  1. /* 元素向左浮动排列 */
  2. float：left；
  4. /* 清除浮动： */
  5. clear：both；
  6. /* 或 */
  7. 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：表格列间距。列与列之间的距离或间隙。
  1. /* border-spacing:第一个值代表水平上（左右）的距离，第二个值代表垂直上（上下）的距离。 */
  2. border-spacing：1.5em 0;

等高列案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>等高列实现</title>
  7.     <style>
  8.       body {
  9.         background-color: aliceblue;
  10.         color: blueviolet;
  11.       }
  12.       .header {
  13.         background-color: aquamarine;
  14.         border-radius: 0.5em;
  15.       }
  16.       .container {
  17.         /* 先将容器container转换为表格 */
  18.         display: table;
  19.         /* 设置宽度为100%，占满整个父级容器 */
  20.         width: 100%;
  21.         /* 表格中的列间隔 */
  22.         border-spacing: 1.5em 0;
  23.       }
  24.       .main,
  25.       .aside {
  26.         /* 将这两项转为单元格 */
  27.         display: table-cell;
  28.         background-color: aquamarine;
  29.       }
  30.       .wrapper {
  31.         /* 这里两侧多出来的margin是表格的列间距 */
  32.         margin-left: -1.5em;
  33.         margin-right: -1.5em;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <header class="header">
  39.       <h1>表格等高实现：</h1>
  40.     </header>
  41.     <!-- 给容器container设置一个外套，方便去掉两侧的margin，使页面更美观 -->
  42.     <div class="wrapper">
  43.       <div class="container">
  44.         <main class="main">
  45.           <span
  46.             >使用表格实现等高：<br />表格不支持margin的设置，也不支持浮动</span
  47.           >
  48.         </main>
  49.         <aside class="aside">
  50.           <div class="box">和左侧等高</div>
  51.         </aside>
  52.       </div>
  53.     </div>
  54.   </body>
  55. </html>

效果展示：

上一条：em的原理与实现下一条：1022作业 1. 实例演示列间隙的二种设置方案,并比较异同 2. 参考课堂案例,自己实现一个等高列的案例(不得抄源码)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多