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

Web前端学习:二

二一:文字font-size样式

font-size:**px
控制文字大小,可精准控制大小
默认样式medium,中等的
large,大一号
x-large,再大一号
xx-large,再大一号
small,小一号

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.myb{color: aqua;font-size: 20px;}.myc{color: darksalmon;font-size: 50px;}.myd{color: olive;font-size: large;}</style></head><body><p class="mya">文字一</p><p class="myb">文字二</p><p class="myc">文字三</p><p class="myd">文字四</p></body>
</html>

二二:文字Fong-weight样式

fong-weight:
控制字体粗细,支持1-1000
bold-粗一号
bolder-在粗一号
light-细一点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p{color: maroon;font-size: 20px;}.mya{font-weight: bold;}.myb{font-weight: bolder;}.myc{font-weight: lighter;}.myd{font-weight: 900;}</style></head><body><p class="mya">文字一</p><p class="myb">文字二</p><p class="myc">文字三</p><p class="myd">文字四</p></body>
</html>

二三:文字font-family样式

font-family:“SimSun”
给予字体类型
电脑上右相应字体才会显示出来,没有就无法显示
eg:
宋体(SimSun)
微软雅黑(“Microsoft Yahei”)
Arial
Tahoma
Verdana
华文黑体(STHeiti)、华文细黑(STXihei)
黑体-简(Heiti SC)

写法:

普通写法:
.mya{font-family: "SimSun";}
特殊写法:
如果没有STHeiti,就PingFang SC,
PingFang SC也没有就SimSun,可无限叠加
.myd{font-family:"STHeiti","PingFang SC","SimSun" ;}

二四:文字line-height样式

html中,有些元素有默认样式
*号:通配符,选取所有元素,层级最低

line-height:
设定内容在内部的高度位置
当line-height的大小为元素大小时,内容在中心

div{height: 200px;line-height: 200px;}`

可以控制行内元素,但是控制不了块状元素。
支持%比,继承父级的高度来控制
支持数字,但不支持负数

二五:文字font-style样式

italic:使用字体的斜体
oblique:让字体倾斜
在这里插入图片描述

二六:文字font-variant样式及font缩写手法

font-variant:small-caps
把段落设置为小型字体大写字母形式
在这里插入图片描述

二七:相对定位

position: relative;
相对定位:
1、相对自己进行定位
2、不会影响原来的位置,显示的元素会改变位置
left:从左往右移动
right
top
bottom
左右2选1,上下2选1
z-index:z轴,代表层级,支持负数
在这里插入图片描述

二八:绝对定位

position:absolute
绝对定位:
1、脱离标准流
2、元素的位置被后续元素占据,元素显示在后续元素上方
3、根据有定位的父元素进行定位
4、如果父元素没有定位,就会找外层元素直到html
在这里插入图片描述

二九:窗口定位(固定定位)

position: fixed;
根据窗口进行定位
只看窗口,不看父级(页面窗口)
跟着窗口走
在这里插入图片描述

三十:继承定位及默认定位

position: inherit;
继承父级的定位

static:
默认值,即没有定位

三一:元素的display的显示与隐藏

display: none;
让原来的元素消失,位置不会保留
display:block;
让人任何元素变成块状元素的样子
float也可以把元素变成块状元素

三二:display样式深入,inline属性

display:inline;
让任何元素转成行内元素
在这里插入图片描述

三三:display样式深入inline-block属性

display:
显示,控制元素的显示
none – 隐藏
block – 以块状元素进行显示
inline – 以行内元素进行显示
inline-block:行内块元素

行内元素:横着放
块状元素:支持宽高,独占一行
行内块元素:支持宽高设置,可以横着放
在这里插入图片描述

三四:元素百分比单位

单位:
px – 像素 – 绝对单位
% – 百分比 – 相对单位(根据浏览器宽高不一样,显示大小也不一样),常用于全屏,有拉升情况时

%如何计算:
看父级元素,最后会计算折合成像素显示
eg:
设置父级宽度300px,子级宽度50%,则子级宽度为150px
在这里插入图片描述

相关文章:

Web前端学习:二

二一&#xff1a;文字font-size样式 font-size&#xff1a;**px 控制文字大小&#xff0c;可精准控制大小 默认样式medium&#xff0c;中等的 large&#xff0c;大一号 x-large&#xff0c;再大一号 xx-large&#xff0c;再大一号 small&#xff0c;小一号 <!DOCTYPE html…...

【第一章 计算机网络体系结构,标准化工作相关组织,性能指标,分层结构,OSI参考模型】

第一章 计算机网络体系结构&#xff0c;标准化工作相关组织&#xff0c;性能指标&#xff0c;分层结构&#xff0c;OSI参考模型 1.计算机网络&#xff1a; &#xff08;1&#xff09;概念&#xff1a; ①计算机网络是将一个分散的、具有独立功能的计算机系统&#xff0c;通过通…...

SpringIOC源码解析

Spring深度学习&#xff08;一&#xff09;——IOC的设计理念Spring的核心思想——IOCSpring流程图DEMO编写Spring IoC容器的加载过程实例化化容器&#xff1a;AnnotationConfigApplicationContext实例化建BeanDefinition读取器&#xff1a; AnnotatedBeanDefinitionReaderBean…...

【Jupyter Notebook的简单入门使用】

【Jupyter Notebook的简单入门使用】简单介绍安装与配置简单使用Markdown关闭简单介绍 Jupyter官网 Jupyter Notebook 介绍 简单来讲&#xff0c;它是一个网页应用&#xff0c;可以进行文档编写&#xff0c;甚至运行 py 代码等功能 安装与配置 下载合适版本的 python &#…...

@Component@Import@Bean加载顺序解析

【前言】 我们在使用Spring注入Bean对象时&#xff0c;会使用不同注解&#xff0c;比如Component Service Controller Import Bean等。由于Service Controller 等都可以归为Component&#xff0c;那么Component 和Import 、Bean是何时被加载的&#xff0c;以及他们之间的顺序呢…...

二极管温度补偿电路工作原理分析

众所周知&#xff0c;PN结导通后有一个约为0.6V&#xff08;指硅材料PN结&#xff09;的压降&#xff0c;同时PN结还有一个与温度相关的特性&#xff1a;PN结导通后的压降基本不变&#xff0c;但不是不变&#xff0c;PN结两端的压降随温度升高而略有下降&#xff0c;温度愈高其…...

【C语言】多线程之条件竞争

多线程&#xff08;三&#xff09;条件竞争并发程序引起的共享内存的问题死锁互斥锁机制生产者消费者模型信号量机制解决&#xff1a;条件竞争 #include<stdio.h> #include<stdlib.h> #include<pthread.h> void* Print(char* str){printf("%s ",s…...

UE NavigationSystem的相关实现

导航数据的构建流程导航数据的收集导航系统中绑定了Actor、Component注册完成以及取消时的委托&#xff0c;通过这些委托把数据及时更新到导航系统的八叉树结构中导航系统的辅助结构DefaultOctreeController、DefaultDirtyAreasController分别承担了空间数据查询和置脏区域重新…...

Java 继承

文章目录1. 继承概述2. 变量的访问特点3. super 关键字4. 构造方法的访问特点5. 成员方法的访问特点6. 方法重写7. 继承案例1. 继承概述 继承是面向对象三大特征之一。可以使得子类具有父类的属性和方法&#xff0c;还可以在子类中重新定义&#xff0c;追加属性和方法。 publ…...

Python学习笔记8:异常

异常 一些内置的异常类 类名描述Exception几乎所有的异常类都是从它派生而来的AttributeError引用属性或给它赋值失败时引发OSError操作系统不能执行指定的任务&#xff08;如打开文件&#xff09;时引发&#xff0c;有多个子类IndexError使用序列中不存在的索引时引发&#…...

python保留小数函数总结

python保留小数——‘%f’‘%.nf’% x&#xff08;定义的变量&#xff09; 例子&#xff1a;a 82.16332 print(%.1f% a) print(%.2f% a) print(%.3f% a) print(%.4f% a) print(%.10f% a)输出结果python保留小数——format&#xff08;&#xff09;函数Python2.6 开始&#xff…...

狐狸优化算法(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5;&#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密…...

浏览器自动化框架沦为攻击者的工具

5月27日消息&#xff0c;安全公司Team Cymru的研究人员表示&#xff0c;越来越多的威胁参与者正在使用免费的浏览器自动化框架作为其攻击活动的一部分。 研究人员表示&#xff0c;该框架的技术准入门槛故意保持在较低水平&#xff0c;以创建一个由内容开发者和贡献者组成的活跃…...

SQL必备知识(自用)

数据库基础知识sql和mysql的区别&#xff1a;数据库查询大全&#xff08;select&#xff09;1、select 字段名 from 表&#xff1b;2、In查询&#xff1a;用于过滤你所需要查询的内容3、范围查询&#xff1a;between4、模糊查询&#xff1a;like5、查询空值/非空&#xff1a;is…...

BI工具术语表大全:从字母A-Z全面收录

谈到商业智能行业&#xff0c;变革是不可避免的。为了跟上步伐&#xff0c;各种各样的BI 解决方案正在快速迭代更新&#xff0c;以满足企业的数字化需求&#xff0c;那么市场上BI 工具种类繁杂&#xff0c;到底如何选择适合功能全面、满足自己企业运转情况的、合适的BI 工具呢&…...

vue3 + vite + ts 集成mars3d

vue3 vite ts 集成mars3d 文章目录vue3 vite ts 集成mars3d前言一、创建一个vue3 vite ts项目二、引入mars3d相关依赖三、vite.config.ts 相关配置四、 新建DIV容器 创建地图前言 使用mars3d过程中&#xff0c;需要集成mars3d到自己的项目中&#xff0c;mars3d开发教程…...

跨境卖家必看的沃尔玛Walmart商家入驻教程

沃尔玛Walmart作为作为全球连锁超市的鼻祖&#xff0c;有不可比拟的知名度。当沃尔玛从线下延伸到线上后&#xff0c;就成为一个自带IP与流量的线上平台&#xff0c;在全世界都拥有数量庞大的消费者群体。所以龙哥就结合自己注册Walmart的过程给大家详细讲解一下。 Walmart卖家…...

【GANs】什么是饱和损失函数 Non-Saturating LossFunction

Saturating VS Non-Saturating Loss functions in GANs【GANs】什么是饱和损失函数 Non-Saturating LossFunctionSaturating VS Non-Saturating Loss functions in GANs 饱和Loss 普通GAN loss是生成器希望最小化被判断为假的概率。x取值范围是[0,1]&#xff0c;所以图中函数…...

USB接口虚拟网卡

1 基本概念 1.1 USB转以太网 - ASIX 4-byte length header before every ethernet packet. - Microchip LAN7800 128x32 bit Descriptor RAM, 32 bits DP_DATA address offset 030h for Descriptor RAM access. - Windows CMD参数格式&#xff1a; route /? -> Linux -h …...

基于SpringBoot的外卖项目的优化

基于SpringBoot的外卖项目的优化1、缓存优化1.1、缓存短信验证码问题分析代码改造1.2、缓存菜品数据实现思路1.3、Spring Cache介绍常用注解CachePutCacheEvictCacheable使用方式1.4、缓存套餐数据实现思路代码改造2、读写分离2.1、主从复制存在的问题介绍配置配置主库--master…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...