【01】htmlcssgit网络基础知识

news2025/2/26 20:41:11

一、html&css

防脱发神器

一图胜千言
在这里插入图片描述

使用border-box控制尺寸更加直观,因此,很多网站都会加入下面的代码

* {
   
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

颜色的 alpha 通道

颜色的 alpha 通道标识了色彩的透明度,它是一个 0~1 之间的取值,0 标识完全透明,1 标识完全不透明

在 css 中使用 rgba 可以为颜色添加 alpha 通道

.alpha {
   
  /* 一个完全透明的颜色,等同于 transparent */
  color: rgba(0, 0, 0, 0);
  /* 一个完全不透明的颜色,等同于rgb */
  color: rgba(0, 0, 0, 1);
  /* 一个半透明的颜色 */
  color: rgba(0, 0, 0, 0.5);
}

rgba 还可以有多种书写方式,例如rgba(0, 0, 0, 0.5)还可以写为:

  • rgb(0 0 0 / 50%)
  • #00000080

尺寸的百分比

绝大部分可以书写尺寸的地方,都可以书写百分比

百分比是一个相对单位,其相对于元素的参考系,比如:

  • 普通元素的参考系为父元素的内容区域
  • 绝对(固定)定位元素的参考系为父元素中第一个定位元素的 padding 区域

下面罗列常见的百分比情况

css 属性 百分比相对于 备注
width 参考系的宽度
height 参考系的高度 参考系高度受本身宽度影响时,设置无效
padding 参考系的宽度
border 参考系的宽度
margin 参考系的宽度

最大最小宽高

  • 最大宽度:max-width,最大高度:max-height
  • 最小宽度:min-width,最小高度:min-height

当一个元素的尺寸会自动变化时,设置最大最小宽高,可以让它不至于变得过小或过大。

在实际开发中,我们通常为 PC 端的页面设置一个最小宽度,通常此宽度为设计稿的宽度

html {
   
  min-width: 1226px;
}

又或者,我们会为页面中的所有图片设置一个最大宽度,让其不至于超过容器

img {
   
  max-width: 100%;
}

什么时候使用绝对定位

下面三个条件满足任何一个时,使用绝对定位:

  1. 元素出现在一个天马行空的位置
  2. 元素是否存在,不影响其他元素的排列
  3. 单个元素在某个区域内水平垂直居中

fixed 和 absolute 的区别

fixed 是绝对定位的一种特殊情况,它们的参考系不一样

  • absolute 参考有定位的父元素
  • fixed 参考视口(viewport)

伪类选择器

css 伪类选择器大全:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

伪类 含义
:link 选中未访问过的超链接
:visited 选中已访问过的超链接
:hover 选中鼠标移入的元素
:active 选中鼠标按下的元素
:focus 选中聚焦的表单元素
:disabled 选中被禁用的表单元素
:checked 选中被选中的表单元素
:first-child 选中第一个子元素
:last-child 选中最后一个子元素
:nth-child(an+b) 选中第「an+b」个子元素
a 和 b 是常量,n 的值会从 0 开始依次递增
:first-of-type 选中第一个指定类型的子元素
:last-of-type 选中最后一个指定类型的子元素
:nth-of-type(an+b) 选中第「an+b」个指定类型的子元素
a 和 b 是常量,n 的值会从 0 开始依次递增

contenteditable 属性

该属性是一个布尔属性,可以设置到任何元素上,它可以让该元素变为可编辑的状态

在实际开发中,通常用于制作富文本框

在这里插入图片描述

table 元素

table 元素用于表达一个表格,受 CSS3 的影响,现在已经很少使用了

二、git 常用命令

工欲善其事,必先利其器,Git可以帮助开发人员在项目开发过程中进行代码的版本管理,协作开发和分支管理。

创建 SSH Key

$ ssh-keygen -t rsa -C "youremail@example.com"

配置用户信息

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

仓库

在当前目录新建一个 Git 代码库

$ git init

新建一个目录,将其初始化为 Git 代码库

$ git init [project-name]

下载一个项目和它的整个代码历史

$ git clone [url]

增加/删除文件

添加指定文件到暂存区

$ git add [file1] [file2] ...

添加指定目录到暂存区,包括子目录

$ git add [dir]

添加当前目录的所有文件到暂存区

$ git add .

添加每个变化前,都会要求确认
对于同一个文件的多处变化,可以实现分次提交

$ git add -p

删除工作区文件,并且将这次删除放入暂存区

$ git rm [file1] [file2] ...

停止追踪指定文件,但该文件会保留在工作区

$ git rm --cached [file]

改名文件,并且将这个改名放入暂存区

$ git mv [file-original] [file-renamed]

代码提交

提交暂存区到仓库区

$ git commit -m [message]

提交工作区自上次 commit 之后的变化,直接到仓库区

$ git commit 

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

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

相关文章

vue2(vue3也可以使用)移动端h5网页实现扫一扫功能

一、效果 可以看调起了我们的摄像头&#xff0c;点击允许过后就打开了扫码界面 二、实现过程 1.安装包 zxing/library 2.构建页面 <template><div class"scan"><div class"video-container"><div class"scan-box">&…

图论03-所有可能路径(Java)

3.所有可能路径 题目描述 给你一个有 n 个节点的 有向无环图&#xff08;DAG&#xff09;&#xff0c;请你找出所有从节点 0 到节点 n-1 的路径并输出&#xff08;不要求按特定顺序&#xff09; graph[i] 是一个从节点 i 可以访问的所有节点的列表&#xff08;即从节点 i 到…

TypeScript(六)条件类型,函数,装饰器

条件类型 TypeScript 中的条件类型是一种高级类型&#xff0c;它使我们根据不同的条件创建更复杂的类型。 TS中的条件类型就是在类型中添加条件分支&#xff0c;以支持更加灵活的泛型 条件类型允许我们根据某个类型的属性是否满足某个条件&#xff0c;来确定最终的类型。 type…

【海贼王的数据航海】排序——冒泡|快速|归并排序|总结

目录 1 -> 交换排序 1.1 -> 冒泡排序 1.1.1 -> 代码实现 1.2 -> 快速排序 1.2.1 -> hoare版本 1.2.2 -> 挖坑法 1.2.3 -> 前后指针法 1.2.4 -> 快速排序(递归版) 1.2.5 -> 快速排序(非递归版) 2 -> 归并排序 2.1 -> 归并排序 2.…

泛微 OA - 根据流程 requestid 获取流程中的附件

泛微 OA - 根据流程 requestid 获取流程中的附件 在泛微 OA 流程中&#xff0c;附件是通过加密上传的&#xff0c;如果在第三方系统想要调用 OA 系统获取 OA 附件&#xff0c;暂时没有很好的方法实现。但是可以在本地进行调用&#xff0c;得到附件 url 地址、附件 id、附件上传…

蓝桥杯练习02随机数生成器

随机数生成器 介绍 实际工作中随机数的使用特别多&#xff0c;比如随机抽奖、随机翻牌。通过随机数还能实现很多有趣的效果&#xff0c;比如随机改变元素的位置或颜色。 本题需要在已提供的基础项目中使用JS知识封装一个函数&#xff0c;该函数可以根据需要&#xff0c;生成指…

01. 【Android教程】系统背景及结构概述

1. Android 的历史 Android 一词的本意指“人形机器人”&#xff0c;安迪•鲁宾 (Andy Rubin) 在 2003 年以此名创办了 Android 公司并开始召集团队研发 Android 系统。后于 2005 年被 Google 收购&#xff0c;安迪•鲁宾随后任 Google 工程部副总裁&#xff0c;继续负责 Andr…

数据可信流通:从运维信任到技术信任

1.数据可信流通概念 "数据可信流通"通常指的是确保数据在不同系统、应用程序或者组织之间的传输和交换过程中的可信性、完整性和安全性。在数据流通的过程中&#xff0c;确保数据的真实性、完整性和保密性是非常重要的&#xff0c;尤其是涉及到敏感信息或者重要数据…

大数据开发--01.初步认识了解

一.环境准备 1.使用虚拟机构建至少三台linux服务器 2.使用公有云来部署服务器 二.大数据相关概念 大数据是指处理和分析大规模数据集的一系列技术、工具和方法。这些数据集通常涉及海量的数据&#xff0c;包括结构化数据&#xff08;如关系型数据库中的表格&#xff09;以及…

Verdaccio部署及基础使用

1. Verdaccio 简介 Verdaccio&#xff0c;是一个轻量级的 npm 私有仓库的开源解决方案。npm是一个基于http的协议&#xff0c;用来存放软件包并且维护版本和依赖&#xff0c;利用 http 提供的 url路径 来对软件包进行增删改查。所以 Verdaccio 这款软件的核心就是实现 npm协议…

机器人路径规划:基于双向A*算法(bidirectional a star)的机器人路径规划(提供Python代码)

一、双向A*算法简介 传统A*算法是一种静态路网中求解最短路径最有效的方法&#xff0c; 它结合了BFS 算法和迪杰斯特拉算法(Dijkstra)的优点。 和迪杰斯特拉算法(Dijkstra)一样&#xff0c; A*算法能够用于 搜索最短路径&#xff1b; 和BFS 算法一样&#xff0c; A*算法可以用…

从头手搓一台ros2复合机器人(带机械臂)

一.前言 大家好呀&#xff0c;从本小节开始我们就步入了仿真篇&#xff0c;主要对机器人仿真进行介绍与操作&#xff0c;当然仿真有优点也有缺陷&#xff0c;基于对此学习&#xff0c;我们可以对上几小节创建的小车模型模拟硬件的特性&#xff0c; 比如&#xff1a; 有多重…

打开磁盘清理工具的9种方法,总有一种适合你

前言 你可以在Windows 10和11上使用许多第三方磁盘清理工具来进行清理。但是,别忘了Windows包含自己的磁盘清理工具,你可以使用该工具释放硬盘存储空间。一些第三方替代方案可能有更广泛的清理选项和功能,但磁盘清理仍然是消除多余文件的完美工具。 每个用户都应该不时地进…

vue 部署 abap BSP

How to Create a Vue.Js App with VS Code and Deploy... - SAP Community 详情见上面这个教程连接 Open VS Code and open a terminal window and run npm install -g vue/cli restart vscode. Open a terminal window again and go to your workspace folder to create the…

使用echart绘制拓扑图,树类型,自定义tooltip和label样式,可收缩

效果如图&#xff1a; 鼠标移上显示 vue3 - ts文件 “echarts”: “^5.4.3”, import { EChartsOption } from echarts import * as echarts from echarts/core import { TooltipComponent } from echarts/components import { TreeChart } from echarts/charts import { C…

VR历史建筑漫游介绍|虚拟现实体验店|VR设备购买

VR历史建筑漫游是一种利用虚拟现实技术&#xff0c;让用户可以身临其境地参观和探索历史建筑的体验。通过VR头显和相关设备&#xff0c;用户可以在虚拟环境中自由移动和互动&#xff0c;感受历史建筑的真实氛围和文化内涵。 在VR历史建筑漫游中&#xff0c;您可以选择不同的历史…

拿捏指针(三)

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱博客 所属栏目&#xff1a;C语言 &#xff08;感谢您的光临&#xff0c;您的光临蓬荜生辉&#xff09; 前言 在这之前我们学习了《拿捏指针&#xff08;一&#xff09;》&#xff0c;《拿…

Centos7部署使用TELEMAC-MASCARET

Background TELEMAC-MASCARET是一款研究水动力学和水文学领域的高性能数值仿真开源软件。MASCARET&#xff08;1980&#xff09;和 TELEMAC&#xff08;1987&#xff09;最初是由法电集团所属的法国国立水利与环境实验室开发&#xff0c;随后整合为TELEMAC-MASCARET并由法英德三…

后端系统开发之——创建注册接口

原文地址&#xff1a;后端系统开发之——创建注册接口 - Pleasure的博客 下面是正文内容&#xff1a; 前言 这是一篇SpringBoot项目的实践篇。 主要用于介绍如何从零开始搭建某一种类型的系统。 个人认为&#xff0c;只要后端逻辑完善了&#xff0c;纵使前端页面千变万化都可…

【DL经典回顾】激活函数大汇总(二十四)(Absolute附代码和详细公式)

激活函数大汇总&#xff08;二十四&#xff09;&#xff08;Absolute附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可或缺的…