当前位置: 首页 > news >正文

CSS学习小结

css的两种使用方式:

①内嵌样式表

②导入外部样式表(实际开发常用)<link href="...." rel="stylesheet"/>

选择器:

①标签选择器:通过标签种类决定

②类选择器:class="..."

③id选择器:id="..."

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>div {font-family: serif;/*字体*/font-style: italic;/*斜体*/text-decoration: lightblue line-through;/*字体装饰*/line-height: 10px;/*行高*/letter-spacing: normal;/*字符之间的距离*/text-indent: 2em;/* 缩进 */text-align: center;/* 居中 */}</style></head><body><div>据介绍,ChatGPT 新增的语音功能由一个新文本到语音模型提供支持,能够仅通过文本和几秒钟的语音样本生成“类似人类的音频”,OpenAI 也请了专业配音演员合作创作了 5 种声音。与此同时,OpenAI还用了其开源语音识别系统 Whisper 将语音转录为文本。</div></body>
</html>
伪类:

表示标签一种特殊状态。

语法:

选择器:hover 鼠标悬停状态

选择器:active 鼠标点击后状态

选择器:focus 向拥有键盘输入状态

CSS列表修饰:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>li {list-style-type: square;/* 列表图标样式square/none *//list-style-image: url();/* 列表图标图片样式 */list-style-position: inside;/* 图标位置 */list-style: ;/* 简写 */}</style></head><body><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></body>
</html>
盒子模型(box-model)

CSS处理网页时,他认为每个标签都存在盒子里。

盒子结构组成:内容区,外边距,内边距,边框

标签实际大小:内容区大小+内边距大小+边框

 内边距padding:l r t b

外边距margin:

标签居中方式margin:auto

边框:标签最外层,也计算在标签大小之内。

border-radius:边框弧度

border: 0px 线条 颜色;

outline:none

浮动

float:none/left/right

浮动后的标签会脱离原来的文档流,不占用原来的空间。

因为不再占用原来的空间,那么当有文档流占用时,浮动的标签可能会遮挡文档流,该如何解决呢?

解决办法:

①为浮动的标签的父标签添加宽高,撑开父标签。

②clear清除浮动clear:left/right/both

CSS定位(position)

①相对定位relative:

相对于起点定位(文档流)

不设置偏移量,标签不会移动,不脱离文档流

②绝对定位absolute:

脱离文档流浮动。

相对于离他最近的开启了定位的父级标签(position:relative)进行定位,否则相对于浏览器窗口进行定位。

相关文章:

CSS学习小结

css的两种使用方式&#xff1a; ①内嵌样式表 ②导入外部样式表&#xff08;实际开发常用&#xff09;<link href"...." rel"stylesheet"/> 选择器&#xff1a; ①标签选择器&#xff1a;通过标签种类决定 ②类选择器&#xff1a;class"..…...

数据挖掘实验(一)数据规范化【最小-最大规范化、零-均值规范化、小数定标规范化】

一、数据规范化的原理 数据规范化处理是数据挖掘的一项基础工作。不同的属性变量往往具有不同的取值范围&#xff0c;数值间的差别可能很大&#xff0c;不进行处理可能会影响到数据分析的结果。为了消除指标之间由于取值范围带来的差异&#xff0c;需要进行标准化处理。将数据…...

C++17中std::filesystem::directory_entry的使用

C17引入了std::filesystem库(文件系统库, filesystem library)。这里整理下std::filesystem::directory_entry的使用。 std::filesystem::directory_entry&#xff0c;目录项&#xff0c;获取文件属性。此directory_entry类主要用法包括&#xff1a; (1).构造函数、…...

C/C++跨平台构建工具CMake入门

文章目录 1.概述2.环境准备2.1 安装编译工具2.2 安装CMake 3.编译一个示例程序总结 1.概述 本人一直对OpenGL的3d渲染很感兴趣&#xff0c;但是苦于自己一直是Android开发&#xff0c;没有机会接触这方面的知识。就在最近吗&#xff0c;机会来了&#xff0c;以前一个做3D渲染的…...

【CFD小工坊】浅水方程的离散及求解方法

【CFD小工坊】浅水方程的离散及求解方法 前言基于有限体积法的方程离散界面通量与源项计算干-湿网格的处理数值离散的稳定性条件参考文献 前言 我们模型的控制方程&#xff0c;即浅水方程组的表达式如下&#xff1a; ∂ U ∂ t ∂ E ( U ) ∂ x ∂ G ( U ) ∂ y S ( U ) U…...

第十四章 类和对象——C++对象模型和this指针

一、成员变量和成员函数分开存储 在C中&#xff0c;类内的成员变量和成员函数分开存储 只有非静态成员变量才属于类的对象上 class Person {public:Person() {mA 0;}//非静态成员变量占对象空间int mA;//静态成员变量不占对象空间static int mB; //函数也不占对象空间&#…...

计算机竞赛 深度学习卫星遥感图像检测与识别 -opencv python 目标检测

文章目录 0 前言1 课题背景2 实现效果3 Yolov5算法4 数据处理和训练5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **深度学习卫星遥感图像检测与识别 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐…...

java web+Mysql e-life智能生活小区物业管理系统

本项目为本人自己书写&#xff0c;主要服务小区业主和管理人员。 e-life智能生活小区涉及多个方面的智能化和便利化服务&#xff1a; 1. 用户模块&#xff1a;包含基本的登入登出操作&#xff0c;查看个人信息中用户可以查看 自己的个人资料但不可以修改个人信息。 a) 用户…...

AttributeError: module ‘dgl‘ has no attribute ‘batch_hetero‘

DGLWarning: From v0.5, DGLHeteroGraph is merged into DGLGraph. You can safely replace dgl.batch_hetero with dgl.batch...

Vue项目搭建图文详解教程

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 预备工作 请在本地创建文件夹用于存放Vue项目&#xff0c;例如&#xff1a;创建HelloWorld文件夹存放即将创建的Vue新项目。 创建Vue项目 首先&#xff0c;请在DOS中将目录…...

SpringMVC处理请求核心流程

一、前言 SpringMVC是一个基于Java的Web框架&#xff0c;它使用MVC&#xff08;Model-View-Controller&#xff09;设计模式来处理Web请求。在SpringMVC中&#xff0c;请求处理的核心流程主要包括以下几个步骤&#xff1a; 1、用户发送请求到前端控制器&#xff08;Dispatche…...

SoloX:Android和iOS性能数据的实时采集工具

SoloX&#xff1a;Android和iOS性能数据的实时采集工具 github地址&#xff1a;https://github.com/smart-test-ti/SoloX 最新版本&#xff1a;V2.7.6 一、SoloX简介 SoloX是开源的Android/iOS性能数据的实时采集工具&#xff0c;目前主要功能特点&#xff1a; 无需ROOT/越狱…...

【知识点随笔分析 | 第五篇】简单介绍什么是QUIC

前言&#xff1a; 随着互联网的快速发展&#xff0c;传统的基于TCP的协议开始显现出一些局限性。TCP在连接建立和拥塞控制方面存在一定的延迟&#xff0c;这可能导致用户在访问网页、观看视频或玩网络游戏时感受到不必要的等待时间。而QUIC作为一种新兴的传输协议&#xff0c;试…...

vscode ssh 远程免密登录开发

存放代码的机器运行 sshd, vscode 所在机器保证可以通过 ssh 登录服务器vscode 机器通过 ssh-keygen 生成 ssh 公私钥对(已有可以忽略)将客户端的 id_rsa.pub 加入到服务器的鉴权队列 cat id_rsa.pub >> authorized_keysvscode 配置ssh登录即可.ctrlp, remote-ssh: open …...

辅助驾驶功能开发-测试篇(2)-真值系统介绍

1 真值系统概述 1.1 真值评测系统核心应用 快速构建有效感知真值,快速完成感知性能评估,快速分析感知性能缺陷。 主要应用场景包括: 1. 感知算法开发验证: 在算法开发周期中,评测结果可以作为测试报告的一部分,体现算法性能的提升。 2. 遴选供应…...

运行程序时msvcr110.dll丢失的解决方法,msvcr110.dll丢失5的个详细解决方法

在使用电脑的过程中&#xff0c;我们经常会遇到各种问题&#xff0c;其中之一就是 msvcr110.dll 丢失的问题。msvcr110.dll 是 Microsoft Visual C Redistributable 的一个组件&#xff0c;用于支持使用 Visual C 编写的应用程序。如果您的系统中丢失了这个文件&#xff0c;您可…...

已解决 Bug——IndexError: index 3 is out of bounds for axis 0 with size 3问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…...

WEB3 solidity 带着大家编写测试代码 操作订单 创建/取消/填充操作

好 在我们的不懈努力之下 交易所中的三种订单函数已经写出来了 但是 我们只是编译 确认了 代码没什么问题 但还没有实际的测试过 这个测试做起来 其实就比较的麻烦了 首先要有两个账号 且他们都要在交易所中有存入 我们还是先将 ganache 的虚拟环境启动起来 然后 我们在项目…...

c++-vector

文章目录 前言一、vector介绍二、vector使用1、构造函数2、vector 元素访问3、vector iterator 的使用4、vector 空间增长问题5、vector 增删查改6、理解vector<vector< int >>7、电话号码的字母组合练习题 三、模拟实现vector1、查看STL库源码中怎样实现的vector2…...

十四天学会C++之第二天(函数和库)

1. 函数的定义和调用 在C中&#xff0c;函数是组织和结构化代码的关键工具之一。它们允许您将一段代码封装成一个可重复使用的模块&#xff0c;这有助于提高代码的可读性和维护性。 为什么使用函数&#xff1f; 函数在编程中的作用不可小觑。它们有以下几个重要用途&#xf…...

模电小白必看:3种基本放大电路实战对比(附电路图+避坑指南)

模电入门实战&#xff1a;三大基础放大电路深度解析与避坑指南 刚接触模拟电路时&#xff0c;面对共射极、共集极和共基极这三种基本放大电路&#xff0c;很多初学者都会感到困惑——它们看起来相似&#xff0c;但特性却大不相同。本文将用面包板搭建的真实电路和示波器实测波形…...

深入解析服务器License管理:从基础命令到实战应用

1. 服务器License管理&#xff1a;为什么它比你想的更重要 如果你管理过服务器&#xff0c;尤其是那些运行着像CAD、EDA、仿真分析这类专业软件的服务器&#xff0c;那你肯定对“License”这个词不陌生。它就像软件的“通行证”&#xff0c;没有它&#xff0c;再强大的硬件也只…...

MATLAB App Designer实战:如何用按钮优雅终止死循环(附完整代码)

MATLAB App Designer实战&#xff1a;用按钮优雅控制循环的5个关键技巧 在MATLAB App Designer开发中&#xff0c;循环控制是每个开发者都会遇到的经典问题。想象一下这样的场景&#xff1a;你精心设计的界面正在运行一个数据处理循环&#xff0c;突然发现参数设置有误&#xf…...

PostgreSQL(OpenGauss/MogDB) 大小写转换实战:批量处理表名与字段名的自动化方案

1. 为什么PostgreSQL的大小写问题让人头疼&#xff1f; 第一次用PostgreSQL的时候&#xff0c;我就被它的大小写规则坑惨了。明明在Oracle里运行好好的SQL语句&#xff0c;搬到PostgreSQL就报"relation does not exist"错误。后来才发现&#xff0c;原来PostgreSQL对…...

终极RPG Maker解密工具:3分钟学会提取游戏资源

终极RPG Maker解密工具&#xff1a;3分钟学会提取游戏资源 【免费下载链接】RPGMakerDecrypter Tool for extracting RPG Maker XP, VX and VX Ace encrypted archives. 项目地址: https://gitcode.com/gh_mirrors/rp/RPGMakerDecrypter 还在为RPG Maker加密文件无法提取…...

微带贴片天线基础计算

2GHz微带阵列天线&#xff0c;HFSS仿真模型&#xff0c;介质板为FR4&#xff0c;增益4.5dBi&#xff0c;驻波小于1.5。最近在捣鼓2GHz频段的微带阵列天线设计&#xff0c;用HFSS建模仿真时遇到不少有意思的问题。FR4板材这玩意儿看着普通&#xff0c;实际用在天线设计里真得小心…...

华为新机散热“封神”:拆解仿生羽翼涡扇,看“小翅膀”如何颠覆手机温控

&#x1f393;作者简介&#xff1a;科技自媒体优质创作者 &#x1f310;个人主页&#xff1a;莱歌数字-CSDN博客 &#x1f48c;公众号&#xff1a;莱歌数字&#xff08;B站同名&#xff09; &#x1f4f1;个人微信&#xff1a;yanshanYH 211、985硕士&#xff0c;从业16年 从…...

别再只算理论了!聊聊直流稳压电源设计中那些容易被忽略的‘坑’:从二极管热损耗到MOSFET驱动

直流稳压电源实战避坑指南&#xff1a;从二极管选型到PCB布局的工程细节 在实验室里搭建一个能正常工作的直流稳压电源原型并不难&#xff0c;但要让它在工业现场稳定运行上千小时&#xff0c;完全是另一回事。我曾见过太多电源设计在测试台上表现完美&#xff0c;却在量产阶段…...

考研数学二必备:多元函数极值最值实战技巧(附拉格朗日乘数法详解)

考研数学二多元函数极值最值实战指南&#xff1a;从基础到高阶解题策略 多元函数极值与最值问题在考研数学二中占据重要地位&#xff0c;每年真题中至少出现1-2道大题。许多考生在面对这类问题时容易陷入"知道概念但不会解题"的困境。本文将打破传统教材的讲解顺序&a…...

告别Keil?STM32CubeIDE环境搭建全记录:附JAVA安装与汉化资源指北

从Keil到STM32CubeIDE&#xff1a;嵌入式开发环境迁移实战指南 当ST官方逐渐将重心转向HAL库生态时&#xff0c;许多传统开发者正面临工具链升级的抉择。作为一款集成了STM32CubeMX功能的Eclipse-based IDE&#xff0c;STM32CubeIDE不仅代表着开发模式的转变&#xff0c;更预示…...