【01】htmlcssgit网络基础知识

一、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.rhkb.cn/news/279058.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习-04-分类算法-03KNN算法

总结 本系列是机器学习课程的系列课程,主要介绍机器学习中分类算法,本篇为分类算法与knn算法部分。 本门课程的目标 完成一个特定行业的算法应用全过程: 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化…

【计算机网络篇】物理层(2)传输方式

文章目录 🍔传输方式⭐串行传输和并行传输⭐同步传输和异步传输🎈同步传输🎈异步传输 ⭐单向通信,双向交替通信和双向同时通信 🍔传输方式 在物理层中,传输方式是指数据在传输介质中传输的方式和方法。常见…

js判断对象是否有某个属性

前端判断后端接口是否返回某个字段的时候 <script>var obj { name: "John", age: 30 };console.log(obj.hasOwnProperty("name")); // 输出 trueconsole.log(obj.hasOwnProperty("email")); // 输出 falselet obj11 { name: "Joh…

小土堆深度学习笔记

pytorch安装&#xff0c;请查看上篇博客。 读取图片操作 from PIL import Imageimg_path "D:\\pythonProject\\learn_pytorch\\dataset\\train\\ants\\0013035.jpg" img Image.open(img_path) img.show()dir_path"dataset/train/ants" import os img_pa…

使用jQuery的autocomplete实现数据查询一次,联想自动补全

书接上回&#xff0c;上次说到在jsp页面中&#xff0c;通过监听输入框的数值变化&#xff0c;实时查询数据库&#xff0c;得到返回值使用autocomplete属性自动补全&#xff0c;实现一个联想补全辅助操作&#xff0c;链接&#xff1a;使用jquery的autocomplete属性实现联想补全操…

【黑马程序员】Python高阶

文章目录 闭包定义nonlocal关键字作用优缺点优点缺点 装饰器装饰器闭包写法 设计模式单例模式工厂模式优点代码示例 多线程基本概念threading模块 网络编程服务端开发socketsocket服务端编程 客户端开发 正则表达式正则的三个基础方法matchsearchfindAll 元字符匹配单字符匹配数…

Springboot 博客_002 项目环境配置

引入相关依赖 mysqlmybatis <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-…

idea远程试调jar、远程试调war

idea远程试调jar、远程试调war 目的&#xff1a;测试运行时与ide开发时是否一致。 配置jar Maven中添加 <packaging>jar</packaging>将其打包为jar。 设置运行入口main 编译jar 看到jar输出 配置试调 添加jar运行 远程试调 先在源码中打好断点试调 debug运行…

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

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

【异常处理】SpringMVC无法跳转视图问题

浏览器发送请求给控制器&#xff0c;但是结果是404报错&#xff0c;又试了一下返回json字符串&#xff0c;json可以获取到&#xff0c;所以应该springmvc出了问题。 查看controller&#xff0c;发现无法加载视图

基于FPGA的光纤通信系统的实现的优化技巧与方法

逻辑电路基本框架回顾 跨时钟域同步技术 读写操作相互独立时钟域 A 和 B 不需要一致的相位由专门逻辑控制读写操作的切换 高速数据的乒乓缓存技术

深入理解模板进阶:掌握C++模板的高级技巧

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…

分析基于解析物理模型的E模式p沟道GaN高电子迁移率晶体管(H-FETs)

来源&#xff1a;Analyzing E-Mode p-Channel GaN H-FETs Using an Analytic Physics-Based Compact Mode&#xff08;TED 24年&#xff09; 摘要 随着近期对用于GaN互补技术集成电路&#xff08;ICs&#xff09;开发的p沟道GaN器件研究兴趣的激增&#xff0c;一套全面的模型…

ssh免密登陆更换目标主机后无法连接

在进行hadoop分布式环境搭建时&#xff08;三台机&#xff0c;master&#xff0c;slave1&#xff0c;slave2&#xff09;&#xff0c;后期slave2系统出现问题&#xff0c;更换新机后&#xff0c;master与slave2文件传输失败&#xff1a; 以为是秘钥过期的问题&#xff0c;更换…

【C语言】C语言内存函数

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《C语言》 &#x1f389;道阻且长&#xff0c;行则将至 前言 这篇博客是关于C语言内存函数(memcpy,memmove,memset,memcmp)的使用以及部分的模拟实现 memcpy,memmove,memset,memc…

DHCP在企业网的部署及安全防范

学习目标&#xff1a; 1. DHCP能够解决什么问题&#xff1f; 2. DHCP服务器如何部署&#xff1f; 3. 私接设备会带来什么问题以及如何防范&#xff1f; 给DHCP服务器配置地址&#xff1a; 地址池&#xff1a; DHCP有2种分配模式&#xff1a;全局分配和接口分配 DHCP enable

Unity在UGUI上通过绘制网格顶点自由画线

该插件的实现是使用UI组件的绘图API来动态生成和修改几何形状&#xff0c;可自由动态更改画线的粗细、拐角圆滑度、颜色&#xff0c;自由增减节点&#xff0c;不额外增加gameobject&#xff0c;并且在原生的UGUI上以ScreenSpace-Overlay的状态下&#xff0c;显示效果如下所示 …

Vue2(七):超详细vue开发环境搭建(win7),nodejs下载与安装,安装淘宝镜像(报错已解决),配置脚手架

一、安装node.js 本来想粗略写一下的&#xff0c;但是搭建脚手架的时候&#xff0c;遇到了很多问题&#xff0c;浪费快两天时间&#xff0c;记录一下自己的解决办法希望对你们有帮助&#xff01; 1.下载nodejs 安装包下载链接【CNPM Binaries Mirror】 下载我划线的这个&am…

HTML案例-1.标签练习

效果 源码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head&g…

蓝桥杯-Sticks-DFS搜索

题目 样例输出是 6 5 题目中给错了&#xff0c;不知道什么时候会改。 思路 --剪枝&#xff0c;否则时间复杂度和空间复杂度过大&#xff0c;会超时。 --注意有多组测试样例时&#xff0c;需要将bool数组重新赋值为false。 --函数类型不是void&#xff0c;return语句不能省…