css初入门：网页布局之网格布局-grid

news2024/7/11 17:20:53

文章目录

  • 网格布局-grid
    • 1、设置网格布局
    • 2、网格布局介绍
    • 3、网格容器
      • grid-template-columns属性
      • grid-template-rows 属性
      • justify-content 属性
      • justify-items属性
      • align-content 属性
    • 4、网格项目
      • grid-column-start、grid-column-start、grid-column属性
      • grid-row-start、grid-row-end、grid-row属性
      • grid-area 属性
      • justify-self 属性
      • 通过媒体查询改变表格项目的位置
    • 5、对比flex

网格布局-grid

CSS 网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。

1、设置网格布局

.container{
	display:grid;
}

或者

.container{
	display:inline-grid;
}

这两者的区别是：
一个是块级；一个是行内块级

2、网格布局介绍

网格列（Grid Columns）
在这里插入图片描述
网格行（Grid Rows）
在这里插入图片描述
网格间隙（Grid Gaps）
在这里插入图片描述

通过以下属性来调整网格间隙。

column-gap:10px;  // 竖直间隙
row-gap:10px;  // 水平间隙
gap:10px 10px;  // 是 row-gap 和column-gap 属性的简写属性

列线与竖线
列之间的线称为列线（column lines）。
行之间的线称为行线（row lines）。
在这里插入图片描述

3、网格容器

grid-template-columns属性

grid-template-columns：定义网格布局中的列数，并可定义每列的宽度。

* {
  margin: 0px;
}
.container {
  /* 设置为网格布局，并且占据页面一整行 */
  display: grid;
  /* 设置网格列数 这里设置为4列，每一列宽度为100px */
  grid-template-columns: 100px 100px 100px 100px;
  /* 设置网格项目间间隙 */
  gap: 10px 10px;
  background-color: #7bddf6;
  padding: 10px;
}

.container > div {
  border: 1px solid white;
  text-align: center;
  font-size: 20px;
  background-color: #b5f1f7;
}

<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>

在这里插入图片描述
通过设置grid-template-columns: auto auto auto auto;可以让每一列自动分配宽度来填满表格容器。
在这里插入图片描述

grid-template-rows 属性

grid-template-rows 属性定义每列的高度。

<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>

* {
  margin: 0px;
}
.container {
  /* 设置为网格布局，并且占据一行 */
  display: grid;
  /* 设置网格列数 这里设置为4行，宽度自动 */
  grid-template-columns: auto auto auto auto;
  /* 设置第一行和第二行中每一列的高度 */
  grid-template-rows: 100px 200px;
  /* TODO:把高度设为100%或者auto试试 */
  /* 设置网格项目间间隙 */
  gap: 10px 10px;
  background-color: #7bddf6;
  padding: 10px;
}

.container > div {
  border: 1px solid white;
  text-align: center;
  font-size: 20px;
  background-color: #b5f1f7;
}

justify-content 属性

justify-content 属性用于在容器内对齐整个网格。网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效。

<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>

* {
  margin: 0;
}
.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px 10px;
  /* justify-content: space-evenly; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  /* justify-content: center; */
  /* justify-content: start; */
  justify-content: end;
  background-color: #99deef;
}

.container > div {
  padding: 10px;
  text-align: center;
  font-size: 20px;
  border: 1px solid white;
  background-color: #d1f3f5;
}

该属性下常用的取值有：

justify-content: space-evenly;
该取值会在列之间以及列周围留出相等的空间。
在这里插入图片描述
justify-content: space-around;
在列周围留出相等的空间
在这里插入图片描述

justify-content: space-between;
该取值会在列之间留出相等的空间。
在这里插入图片描述
justify-content: center;
该取值在容器中间对齐网格。
在这里插入图片描述
justify-content: start;
该取值会在容器开头对齐网格。
在这里插入图片描述
justify-content: end;
该取值会在容器末尾对齐网格。
在这里插入图片描述

justify-items属性

该属性规定网格项在行内方向的对齐方式。在网格容器上设置。
在这里插入图片描述

justify-items: start;效果如下：
在这里插入图片描述

justify-items: center效果如下：
在这里插入图片描述
其他的就不写了…

align-content 属性

align-content 属性用于垂直方向上对齐容器内的整个网格。网格的总高度必须小于容器的高度，这样 align-content 属性才能生效。

<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>

* {
  margin: 0;
}
.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px 10px;
  /* 设置容器高度 */
  height: 300px;
  /* align-content: space-evenly; */
  /* align-content: space-between; */
  /* align-content: space-around; */
  /* align-content: center; */
  /* align-content: start; */
  align-content: end;
  background-color: #99deef;
}

.container > div {
  padding: 10px;
  text-align: center;
  font-size: 20px;
  border: 1px solid white;
  background-color: #d1f3f5;
}

align-content:start
对齐容器开头的行。
在这里插入图片描述
align-content:end
对齐容器末尾的行。
在这里插入图片描述

align-content: center;
该取值会让所有子元素在容器水平居中对齐。
在这里插入图片描述
align-content: space-evenly;
该取值使行之间以及行周围具有相等的空间
在这里插入图片描述
align-content: space-around;
将使行周围具有相等的空间
在这里插入图片描述
align-content: space-between;
该取值使行之间具有相等的空间。
在这里插入图片描述
align-content：stretch;
将行拉伸以占据剩余空间。
在这里插入图片描述
align-content：inherit;
从其父元素继承此属性。

4、网格项目

容器中的子元素也叫做项目。
通常容器在每一行的每一列都有一个网格项目，但是可以通过设置网格项目的样式，让它们跨越多个列或多个行。

grid-column-start、grid-column-start、grid-column属性

这三个属性用来控制列的合并（应该可以这么理解）

* {
  margin: 0;
}
.container {
  display: grid;
  /* 设置列数,每行6列 */
  grid-template-columns: auto auto auto auto auto auto;
  /* grid-template-rows: ; */
  /* 设置项目间隙 */
  gap: 10px 10px;
  background-color: #abd9f4;
}
.container > div {
  background-color: #cce7f0;
  text-align: center;
  font-size: 20px;
}
/* 表示网格项目放在列线 1，并在 列线 5 结束它，注意是列线，不是第一个表格*/
.item1 {
  grid-column-start: 1;
  grid-column-end: 5;
}

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
    <div class="item9">9</div>
    <div class="item10">10</div>
    <div class="item11">11</div>
    <div class="item12">12</div>
    <div class="item13">13</div>
    <div class="item14">14</div>
    <div class="item15">15</div>
  </div>

在这里插入图片描述

grid-column属性
该属性是 grid-column-start，grid-column-end的结合。

grid-column-start: 1; /*从第1个列线开始*/
grid-column-end: 5; /*到第5个列线之前的列*/

可以用grid-column代替为：
grid-column：1 / 5;

或者：
/* 表示从第一列开始，跨越 4 列*/
grid-column: 1 / span 4;

/* 从第 2 列开始，并跨越 3 列 */
grid-column: 2 / span 3;

grid-row-start、grid-row-end、grid-row属性

这几个属性用来控制行的合并。

* {
  margin: 0;
}
.container {
  display: grid;
  /* 设置列数,每行6列 */
  grid-template-columns: auto auto auto auto auto auto;
  /* grid-template-rows: ; */
  /* 设置项目间隙 */
  gap: 10px 10px;
  background-color: #abd9f4;
}
.container > div {
  background-color: #cce7f0;
  text-align: center;
  font-size: 20px;
}
/* 合并行第1列（item1）中第1行线到第4行线之间的值 */
.item1 {
  grid-row-start: 1;
  grid-row-end: 4;
}

/*或者:表示合并第1列（item1）中第1行线到第4行线之间的值*/
/*
.item1{
	grid-row:1 / 4;
}
*/
/* 或者：表示从第1行线开始跨越3行*/
/*
.item1{
	grid-row:1 / span3;
}
*/

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item15">16</div>
</div>

在这里插入图片描述

grid-area 属性

该属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

表示使 “item8” 从 row-line 1 和 column-line 2 开始，在 row-line 5 和 column line 6 结束

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

表示使 “item8” 从 row-line 2 和 column-line 1开始，并跨越 2 行和 3 列

grid-area 属性也可以用于为网格项目分配名称，通过网格容器的 grid-template-areas 属性来引用命名的网格项目，使用如下：

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 命名*/
      .item1 {
        grid-area: header;
      }
      .item2 {
        grid-area: menu;
      }
      .item3 {
        grid-area: main;
      }
      .item4 {
        grid-area: right;
      }
      .item5 {
        grid-area: footer;
      }

      /* 定义容器 */
      .container {
        display: grid;
        grid-template-areas:
          "header header header header header header"
          "menu main main main right right"
          "menu footer footer footer footer footer";
        grid-gap: 10px;
        background-color: #84d7ee;
        padding: 10px;
      }

      /* 定义项目 */
      .container > div {
        background-color: rgba(190, 235, 246, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">Header</div>
      <div class="item2">Menu</div>
      <div class="item3">Main</div>
      <div class="item4">Right</div>
      <div class="item5">Footer</div>
    </div>
  </body>
</html>

在这里插入图片描述
让命名的项目跨越五列网格布局中的两列（英语句号代表没有名称的项目，与句号数量无关，就是3个句号），如下：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .item1 {
        grid-area: myArea;
      }

      .container {
        display: grid;
        grid-template-areas: "myArea myArea . . .";
        grid-gap: 10px;
        background-color: #9ccdf5;
        padding: 10px;
      }

      .container > div {
        background-color: rgba(176, 235, 245, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
      <div class="item7">7</div>
      <div class="item8">8</div>
      <div class="item9">9</div>
    </div>
  </body>
</html>

在这里插入图片描述
“item1” 跨越两列和两行，如下：

.item1 {
  grid-area: myArea;
}

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  /* 注意这里的引号，空格将引号包裹的值而分开了*/
}

justify-self 属性

规定网格项在行内方向的对齐方式。在网格项上设置。优先级比justify-items高。
在这里插入图片描述

<div class="container">
    <div class="item1">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

* {
  margin: 0;
}
.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px 10px;
  /* 设置容器高度 */
  height: 300px;
  /* justify-items: center; */
  justify-items: start;
  /* justify-items: end; */
  /* justify-items: left; */
  /* justify-items: right; */
  /* justify-items: end; */
  /* justify-items: stretch; */
  /* justify-items:overflow-alignment; */

  background-color: #99deef;
}

.container > div {
  padding: 10px;
  text-align: center;
  font-size: 20px;
  border: 1px solid white;
  background-color: #d1f3f5;
}

.item1{
  justify-self: end;
}

在这里插入图片描述

通过媒体查询改变表格项目的位置

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #2196f3;
        padding: 10px;
      }

      .container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
	/* 当屏幕宽度设置为500px，表格项目位置开始改变*/
      @media only screen and (max-width: 500px) {
        .item1 {
          /* 表示从第1行线开始，到第2行线结束，跨三列，到第4列线*/
          grid-area: 1 / span 3 / 2 / 4;
        }
        .item2 {
          grid-area: 3 / 3 / 4 / 4;
        }
        .item3 {
          grid-area: 2 / 1 / 3 / 2;
        }
        .item4 {
          grid-area: 2 / 2 / span 2 / 3;
        }
        .item5 {
          grid-area: 3 / 1 / 4 / 2;
        }
        .item6 {
          grid-area: 2 / 3 / 3 / 4;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
    </div>
  </body>
</html>

在这里插入图片描述
当屏幕宽度为500px时，变为如下：
在这里插入图片描述

5、对比flex

1、和flex布局相比之下的区别
Grid网格布局和flexbox的主要区别：flexbox是一维布局（沿横向或者纵向），Grid是二维布局（同时沿着横向和纵向）

举例：当使用flexbox布局，设置了flex-wrap :
nowrap;之后，换行后的元素并不会与上一行的元素对齐，当使用了nowrap之后，每个新行都变成了一个新的弹性容器，空间分布只在行内进行。

2、什么情况下选择grid布局还是flexbox布局？
可参考以下三点：
（1）换行需要与上一行元素对齐？选择Grid
（2）需要同时按行和列控制布局？选择Grid
（3）只需要按行或者列控制布局？选择flexbox

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/458976.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ChatGPT来了，必须紧跟时代潮流！

ChatGPT来了，必须紧跟时代潮流！

大家好&#xff0c;我是瓜叔。 正如标题所示&#xff0c;最近几周令人难以置信的兴奋。几乎每天都有surprise的新AI产品发布&#xff0c;特别是ChatGPT-4和AI绘画。这是一种科幻即将成为现实的感觉。例如&#xff0c;看看下面的网络图像&#xff0c;它是由AI生成的。当我看到它…
阅读更多...
我的HackerOne漏洞赏金平台漏洞挖掘流程

我的HackerOne漏洞赏金平台漏洞挖掘流程

简介 高强度在hackerone平台挖了一周的漏洞&#xff0c;在这里分享一下经验 选定目标 hackerone有两种src&#xff0c;一种是给钱的&#xff0c;一种是免费的&#xff0c;我一般都是选的有钱的去挖 假如我选择了这个作为今天的挖洞目标 首先需要往下滑&#xff0c;看他不收…
阅读更多...
银行系统【GUI/Swing+MySQL】（Java课设）

银行系统【GUI/Swing+MySQL】（Java课设）

系统类型 Swing窗口类型Mysql数据库存储数据 使用范围 适合作为Java课设&#xff01;&#xff01;&#xff01; 部署环境 jdk1.8Mysql8.0Idea或eclipsejdbc 运行效果 ​​​​​​​ 本系统源码地址&#xff1a;​​​​​​​https://download.csdn.net/download/qq_50…
阅读更多...
科大讯飞的2022：夯实“根据地”业务，以技术创新点燃大模型产业落地的“星星之火”...

科大讯飞的2022：夯实“根据地”业务，以技术创新点燃大模型产业落地的“星星之火”...

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 4月20日晚&#xff0c;科大讯飞正式公布2022年度及2023年度第一季度业绩报告。财报数据显示&#xff0c;公司2022年度实现营业收入188.20亿元&#xff0c;同比增长2.77%&#xff0c;实现毛利76.84亿元&#xff0c;较上年增长…
阅读更多...
局域网 - CSMA/CD

局域网 - CSMA/CD

文章目录 1 概述1.1 局域网的拓扑结构 2 CSMA/CD2.1 三种监听算法2.2 冲突检测原理2.3 二进制指数后退算法 3 扩展3.1 网工软考真题 1 概述 1.1 局域网的拓扑结构 2 CSMA/CD 对 总线型、星型 和 树型 拓扑访问控制协议是 CSMA/CD&#xff08;Carrier Sense Multiple Access/ …
阅读更多...
Android硬件通信之 WIFI通信

Android硬件通信之 WIFI通信

一&#xff0c;简介 1.1 随着网络的普及和通信技术的发展&#xff0c;网络的传输速度也越来越快&#xff0c;wifi技术也还成为手机设备最基本的配置。我们可以通过wifi实现手机与手机之前的信息传输&#xff0c;当然也可以与任意一台有wifi模块的其它设备传输。 1.2 wifi与蓝…
阅读更多...
mysql 命令集

mysql 命令集

数据库操作 查看库命令 show databases; 使用某个库&#xff08;可以不用分号 &#xff1b;&#xff09; use 库名 查看库下所有的表 show tables; 显示一个表下的所有字段和类型 desc user(表名); 查看一个表的建表语句 show create table user\G 创建数据库db1 cre…
阅读更多...
gitee教程精简版

gitee教程精简版

$ git config --global user.name "Your Name" $ git config --global user.email "emailexample.com" 设置名字和邮箱 初始化 git init git add test.txt 将文件预先添加到git仓库 git commit -m "刚刚我创建了一个文本"提交给git仓库&#x…
阅读更多...
Android硬件通信之 蓝牙Mesh通信

Android硬件通信之 蓝牙Mesh通信

一&#xff0c;简介 蓝牙4.0以下称为传统蓝牙&#xff0c;4.0以上是低功耗蓝牙&#xff0c;5.0开始主打物联网 5.0协议蓝牙最重要的技术就是Mesh组网&#xff0c;实现1对多&#xff0c;多对多的无线通信。即从点对点传输发展为网络拓扑结构&#xff0c;主要领域如灯光控制等&…
阅读更多...
物联仓储系统ZigBee组网原理

物联仓储系统ZigBee组网原理

在嵌入式项目物联仓储系统中&#xff0c;使用cortexM0模拟仓库&#xff0c;cortex-A9模拟服务器&#xff0c;两块开发板之间使用ZigBee技术实现数据接收和发送&#xff0c;本文就介绍一下ZigBee组网的原理和相关步骤。 1.组网概述 组建一个完整的zigbee网状网络包括两个步骤&am…
阅读更多...
VSCode连接远程服务器调试代码详细流程

VSCode连接远程服务器调试代码详细流程

文章目录 1.远程连接服务器2. 打开项目文件目录3. 配置调试环境 在研究人工智能项目时&#xff0c;很多时候本地机器性能不够&#xff0c;只能把代码拉倒服务器上&#xff0c;然后利用服务器资源来运行代码。遇到问题时需要调试&#xff0c;本文详细介绍利用VScode来调试远程服…
阅读更多...
简述docker镜像制作：阿里云私服使用说明

简述docker镜像制作：阿里云私服使用说明

阿里云私服使用说明 使用阿里云容器镜像服务 在使用docker时&#xff0c;为了方便管理docker镜像和版本迭代&#xff0c;咱们推荐有一个镜像服务器。这里我们比较推荐使用服务商提供的容器镜像服务&#xff0c;一来不用自己搭建私服&#xff0c;节省维护成本&#xff0c;二来带…
阅读更多...
【算法学习】—n皇后问题(回溯法)

【算法学习】—n皇后问题(回溯法)

【算法学习】—n皇后问题(回溯法) 1. 什么是回溯法&#xff1f; 相信"迷宫"是许多人儿时的回忆&#xff0c;大家小时候一定都玩过迷宫游戏。我们从不用别人教&#xff0c;都知道走迷宫的策略是&#xff1a; 当遇到一个岔路口&#xff0c;会有以下两种情况&#xf…
阅读更多...
vue组件之间的数据共享

vue组件之间的数据共享

1.组件之间的关系 在项目开发中&#xff0c;组件之间的最常见的关系分为如下两种: ① 父子关系 ② 兄弟关系 1.父向子传值---使用自定义属性 父组件向子组件共享数据需要使用自定义属性。示例代码如下: 父组件&#xff1a; <Son :msg"message" :user"…
阅读更多...
使用AI优化慢SQL，开发秒变DBA

使用AI优化慢SQL，开发秒变DBA

“AI不会替代他们&#xff0c;但善用AI的人会” 慢 SQL 经常会让应用程序响应变慢&#xff0c;轻者影响用户体验&#xff0c;严重的时候可能会导致服务不可用。如果&#xff0c;每次遇到慢 SQL 都求助于 DBA&#xff0c;一方面效率很低&#xff0c;另一方面也会很没面子。所以…
阅读更多...
PowerShell批量修改、替换大量文件的文件名

PowerShell批量修改、替换大量文件的文件名

本文介绍基于PowerShell语言&#xff0c;对文件夹中全部文件的名称加以批量替换、修改的方法。 在之前的文章基于Python一次性批量修改多个文件的文件名&#xff08;https://blog.csdn.net/zhebushibiaoshifu/article/details/115869725&#xff09;中&#xff0c;我们介绍了基…
阅读更多...
为什么重写equals时必须重写hashCode()

为什么重写equals时必须重写hashCode()

不重写equals和不重写 hashCode()之前&#xff1a;equals()比较的是对象的内存地址&#xff0c;hashCode()比较的其实也是内存地址(内存地址输入到哈希函数中得到的整数) 重写了之后&#xff0c;equals()比较的是对象的内容值&#xff0c;如果hashCode()不重写&#xff0c;还是…
阅读更多...
log是什么文件可以删除吗？log文件被删怎么恢复？

log是什么文件可以删除吗？log文件被删怎么恢复？

在工作和生活中&#xff0c;我们难免会遇到因操作失误、软件崩溃或病毒攻击等原因导致重要文件被误删的情况&#xff0c;这其中包括log文件。如果您不幸遇到log文件被误删的情况&#xff0c;不要过于担心&#xff0c;本文将为您介绍几种方法&#xff0c;帮助您找回被误删除的lo…
阅读更多...
【hello Linux】动静态库

【hello Linux】动静态库

目录 1. 了解动静态库 1. ldd 命令的使用 2. C语言库与C语言库 3. 库的分类 4. 库的命名 5. 库的内容 2. 静态库的制作和使用 1. 静态库的制作 2. 静态库的使用 3.动态库的制作和使用 1. 动态库的制作 2. 动态库的使用 Linux&#x1f337; 1. 了解动静态库 1. ldd 命令的使用 …
阅读更多...
JavaScript 鼠标事件监听触发时机触发顺序

JavaScript 鼠标事件监听触发时机触发顺序

有时间整理下鼠标的监听事件&#xff0c;目前汇总到的鼠标监听事件以下10个&#xff1a; 目录 1. click 2. dblclick 3.contextmenu 4.mousedown 5.mouseup 6.mouseenter 7.mouseleave 8.mouseover 9.mouseout 10.mousemove 先说下触发时机和作用键&#xff08;左键…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023