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

选择器、pxcook软件、盒子模型

news 文章来源：https://blog.csdn.net/lan_da_wang/article/details/138312095 2024/10/24 7:28:02

结构伪类选择器

定义：根据结构的元素关系来查找元素。

 <title>Document</title><style>li:first-child{color:aqua ;}li:last-child{color: aqua;}li:nth-child(3){color: aqua;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>85</li><li>8</li><li>32</li><li>23</li><li>34</li><li>56</li></ul></body>

nth-child（公式）

默认n是从0开始的。

 li:nth-child(2n){color: brown;}li:nth-child(2n+1){color: aqua;}li:nth-child(5n){color: black;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>85</li><li>8</li><li>32</li><li>23</li><li>34</li><li>56</li></ul></body>

伪元素选择器

必须加content!

    <title>Document</title><style>div{width: 300px;height: 300px;background-color: pink;}div::before{content: "老鼠";}div::after{content: "大米";}</style>
</head>
<body><div>爱</div>
</body>

盒子模型

width、height、

padding、内边距

border、边框线：solid: 边框的样式，这里是实线。

magin外边距：出现在盒子外面，拉开两个盒子之间的距离。

padding、border：内容与盒子边缘之间。

盒子边框线：bd

    <title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;/* border: 1px solid #000; *//* border: dashed;*/border: dotted;}</style>
</head>
<body><div>biaoqian </div>
</body>

单边框线

  border-top: 4px solid #111;border-bottom: 4px dashed #777;border-left: 4px dotted #456789;border-right: 4px solid #599898;

盒子模型：内边距padding（多值属性）

盒子模型：尺寸计算

   <style>div{width: 200px;height: 200px;background-color: pink;padding: 20px;/* 内减模式 ，加padding和border也不会增大盒子面积*/box-sizing: border-box;}</style>
</head>
<body><div>jhdjkasd</div>
</body>

盒子模型外边距

版心居中

要求：必须设定盒子的宽度，如果没有宽度做不了自动算法。

  <style>div{width: 1000px;height: 200px;background-color: pink;margin: auto;}</style>
</head>
<body><div>版新内容</div>

清除标签默认样式

清楚li标签前面的圆点

在最开始会设置自动算法。

盒子模型——内容溢出

overflow: hidden：内容隐藏

  overflow: auto：框框有滚动条，右下都有

   overflow: scroll：框框有滚动条，右边才有

  <style>div{width: 200px;height: 200px;background-color: pink;/* overflow: hidden;*//* overflow: auto; */overflow: scroll;}</style>
</head>

外边距问题：合并和塌陷。

外边距合并现象

外边距塌陷问题

行内元素，内外边距

margin：边缘。

没有办法改变垂直方向的距离，如果非要改变加行高： line-height

 <style>span{margin: 50px;padding: 20px;line-height: 100px;}</style>
</head>
<body><span>标签</span><span>标签</span>

盒子模型-圆角

radius：半径。

盒子有四个角，border-radius: 后面可以跟四个值。

  <title>Document</title><style>div{background-color: pink;height: 200px;width: 200px;border-radius: 5px;}</style>
</head>
<body><div>sdas</div>
</body>

圆角取值：最大50%。超过50%就没有效果了。

盒子模型的阴影

  div{height: 200px;width: 200px;margin: 20px auto;background-color: pink;box-shadow: 20px 10px 5px 1px rgb(0, 0, 0.8) inset;}

书写案例

相关文章：

选择器、pxcook软件、盒子模型

结构伪类选择器 定义&#xff1a;根据结构的元素关系来查找元素。 <title>Document</title><style>li:first-child{color:aqua ;}li:last-child{color: aqua;}li:nth-child(3){color: aqua;}</style> </head> <body><ul><li>…...

编程日记 2024/5/6 16:39:37

商城系统秒杀功能设计思想

业务特点 1、瞬时并发量大&#xff0c;秒杀时会有大量用户在同一时间进行抢购&#xff0c;瞬时并发访问量突增几倍、甚至几十倍以上 2、库存量少&#xff0c;一般秒杀活动商品量很少&#xff0c;这就导致了只有极少量用户能成功购买到。 3、业务和流程较为常见&#xff0c;一般…...

编程日记 2024/5/6 16:36:51

#初始化列表

1.再谈构造函数 1.1构造函数的组成 构造函数包括函数体赋值与初始化列表初始化。 1.2函数体赋值 class Date { public:Date(int year, int month, int day){_year year;_month month;_day day;} private:int _year;int _month;int _day; };虽然上述构造函数调用之后&…...

编程日记 2024/5/6 16:35:43

Vue-组件中的data

一个组件的data选项必须是一个函数。保证每个组件实例&#xff0c;维护独立的一份数据对象。如下图&#xff1a; 组件一旦封装好了&#xff0c;可以使用多次&#xff0c;比如数字框组件使用了三次&#xff1a; 每次创建新的组件实例&#xff0c;都会重新执行一次data函数&#…...

编程日记 2024/5/6 16:34:10

抖音小店达人佣金应该怎么结算呢？给达人设置多少佣金合适？

大家好&#xff0c;我是电商小V 咱们在运营抖音小店的时候一定会遇到被达人催促结算佣金的情况&#xff0c;咱们给达人合作的时候都会遇到过新手达人&#xff0c;就是给咱们直播带货之后催促咱们赶紧结算商品的佣金&#xff0c; 但是咱们都需要知道一点&#xff0c;那就是小店的…...

编程日记 2024/5/6 16:33:00

水稻病害检测（YOLO数据集，多分类，稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫）

是自己利用LabelImg工具进行手工标注&#xff0c;数据集制作不易&#xff0c;请尊重版权&#xff08;稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫&#xff09; 如果需要yolv8检测模型和数据集放在一起的压缩包&#xff0c;可以关注&#xff1a;最新最…...

编程日记 2024/5/6 16:31:29

MYSQL数据库专业术语及创建数据表详细讲解{sql语句创建数据库语句及条件子句解析，编码格式解析，创建数据表解析，表定义字段解析，主键约束解析}

MYSQL数据库中的专业术语 数据库&#xff08;Database&#xff09;&#xff1a;存储数据的集合&#xff0c;是数据的逻辑容器。 表&#xff08;Table&#xff09;&#xff1a;数据库中存储数据的结构&#xff0c;由行&#xff08;记录&#xff09;和列&#xff08;字段&#x…...

编程日记 2024/5/6 16:28:57

Kubernetes的13个常用命令，你都熟悉吗

Kubernetes&#xff08;K8s&#xff09;是一个容器编排和管理工具&#xff0c;用于部署、管理和扩展容器化应用程序。下面是一些常用的 Kubernetes 命令及其含义&#xff1a; kubectl create: 创建一个资源对象&#xff0c;如 Pod、Deployment、Service 等。kubectl apply: 应…...

编程日记 2024/5/6 16:27:46

python从0开始学习（三）

目录 前言 1、类型转换 1.1 隐式类型转换 1.2 显式类型转换 2、eval函数 总结 前言 上篇我们讲了python中的变量与常量&#xff0c;以及变量类型。本篇文章将接着往下讲。 1、类型转换 python中的数据类型转换包括两种&#xff1a;隐式类型转换和显式类型转换。 1.1 隐式…...

编程日记 2024/5/6 16:26:34

golang判断通道chan是否关闭的2种方式

chan通道在go语言的办法编程中使用频繁&#xff0c;我们可以通过以下2种方式来判断channel通道是否已经关闭&#xff0c;1是使用 for range循环&#xff0c;另外是通过 for循环中if 简短语句的 逗号 ok 模式来判断。 示例代码如下&#xff1a; //方式1 通过for range形式判断…...

编程日记 2024/5/6 16:21:49

npm install 会报错npm audit错误，会提示你有多少个漏洞需要结局等

npm install 会报错 npm audit… 错误&#xff0c;会提示你有多少个漏洞需要结局&#xff0c;对应的包版本不应该低于多少等等问题 当使用npm i 命令的时候会出现以下问题 如果是个新手的话&#xff0c;建议直接关闭npm的audit检查。这样可以保证npm的audit不会影响你的初始…...

编程日记 2024/5/6 16:20:44

揭秘磁盘参数错误：数据恢复的黄金法则与预防策略

磁盘参数错误&#xff0c;这是一个让人头疼的电脑问题&#xff0c;可能会导致重要数据的丢失。不过别担心&#xff0c;本文将为你详细解析磁盘参数错误的来龙去脉&#xff0c;以及提供有效的数据恢复方法和预防措施。 一、什么是磁盘参数错误 磁盘参数错误通常指的是在读取或写…...

编程日记 2024/5/6 16:18:24

oracle常见操作

修改字段长度 ALTER TABLE my_table MODIFY my_column VARCHAR2(new_length);修改字段名称 ALTER TABLE my_table RENAME COLUMN old_column TO new_column;修改字段非空属性 -- 由非空改成允许为空 ALTER TABLE my_table MODIFY my_column NULL; -- 由允许为空改成非空 ALT…...

编程日记 2024/5/6 16:17:12

SkyWalking 自定义Span并接入告警

图容易被CSDN吞掉&#xff0c;我在掘金也发了&#xff1a;https://juejin.cn/post/7361821913398837248 我就是这么膨胀 最近在做 OpenAI API 套壳&#xff0c;当我使用 okhttp-sse 这个库进行流式内容转发的时候&#xff0c;我发现有些回调方法 SkyWalking 不能抓取到。这就…...

编程日记 2024/5/6 16:15:39

代理IP，助力海外社媒运营！

社交媒体在营销中的作用不仅仅是传播信息&#xff0c;更是明确品牌定位、建立品牌形象、加强用户互动、提升市场竞争力的重要途径。因此很多外贸从业人员都会使用海外社媒平台进行客户的寻找和开发&#xff0c;这也意味着他们需要深入了解目标市场的文化、价值观、语言习惯和消…...

编程日记 2024/5/6 16:11:41

手撕spring框架（3）

手撕spring框架&#xff08;3&#xff09; 相关系列 手撕spring框架&#xff08;1&#xff09; 手撕spring框架&#xff08;2&#xff09; 手撕spring框架&#xff08;4&#xff09; InitializingBean 接口详解 什么是 InitializingBean 接口&#xff1f; InitializingBean 接…...

编程日记 2024/5/6 16:07:35

Swift手撸轮播效果

一、创建ScrollView objcMembers class LSLottieAnimView: UIView, UIScrollViewDelegate {private var scrollView: UIScrollView UIScrollView()func addScrollView() {scrollView.showsHorizontalScrollIndicator falsescrollView.isPagingEnabled true// 自定义framesc…...

编程日记 2024/5/6 16:05:40

数据分析——业务数据描述

业务数据描述 前言一、数据收集数据信息来源企业内部数据源市场调查数据源公共数据源和第三方数据源 二、公司内部数据客户资料数据销售明细数据营销活动数据 三、市场调查数据观察法提问法实验法 四、公共数据五、第三方数据六、数据预处理七、数据清洗丢弃部分数据补全缺失的…...

编程日记 2024/5/6 16:03:09

【哈希表】Leetcode 14. 最长公共前缀

题目讲解 14. 最长公共前缀 算法讲解 我们使用当前第一个字符串中的与后面的字符串作比较&#xff0c;如果第一个字符串中的字符没有出现在后面的字符串中&#xff0c;我们就直接返回&#xff1b;反之当容器中的所有字符串都遍历完成&#xff0c;说明所有的字符串都在该位置…...

编程日记 2024/5/6 15:59:10

(三)JVM实战——对象的内存布局与执行引擎详解

对象的内存布局 对象的实例化 对象的创建方式 - new的方式 - Class的newInstance():反射的方式 - Construct的newInstance() - clone:实现Cloneable接口,默认浅拷贝 - 使用反序列化&#xff1a;将二进制流转化为内存对象 创建对象的步骤 - 判断对象对应的类是否加载、链接、初…...

编程日记 2024/5/6 15:57:41

微信视频号如何变现呢，视频号涨粉最快方法

今天给大家带来的是视频号分成计划 视频号流量主这个项目&#xff0c;可以说这是目前的一个蓝海赛道&#xff0c;做的人也少&#xff0c;外面开的培训也很少&#xff0c;作为副业还是比较适合个人的&#xff0c;如果想批量操作这个项目&#xff0c;也比较适合工作室的。而且这…...

编程日记 2024/5/6 15:56:29

数智先锋 | 多场景数据治理案例，释放数据要素生产力

数据作为第五大生产要素&#xff0c;成为释放新质生产力的关键基础。 当前各个行业数字化建设如火如荼&#xff0c;全力挖掘数据价值以驱动行业高质量应用发展。数据治理成为数据要素价值发挥的重要基础和前提。 数据治理不单是技术问题&#xff0c;不是依赖工具就能解决的&a…...

编程日记 2024/5/6 15:54:20

UE5 audio capture 回声问题 ||在安卓上有爆鸣声

参考视频 0.基本步骤 【UE4_蓝图】录制麦克风声音/系统声音并输出保存WAV文件_ue4录音-CSDN博客 1.步骤 1.创建Sound Submix A 2. 右键新建Sound Submix B 3.把B的两个参数调为-96 4.audio capture的Base Submix&#xff0c;把前面提到的A赋值进去 5.开始录制输出和完成录制…...

编程日记 2024/5/6 15:53:16

第 10 场蓝桥杯小白入门赛题解

1.五一礼物【算法赛】 - 蓝桥云课 (lanqiao.cn) #include <iostream> using namespace std; int main() {cout<<"51"<<endl;return 0; }2.合成贤者之石【算法赛】 - 蓝桥云课 (lanqiao.cn) 假设黄水晶的个数是 x x x,那蓝水晶个数肯定是 x − 1 …...

编程日记 2024/5/6 15:50:48

抖音视频评论区用户采集 根据视频链接批量获取用户信息

要批量获取抖音视频评论区用户的信息&#xff0c;可以通过抖音开放平台的接口来实现。 首先&#xff0c;你需要在抖音开放平台注册开发者账号&#xff0c;并创建一个应用。然后&#xff0c;使用抖音开放平台提供的接口&#xff0c;可以根据视频链接获取视频的详细信息&#xf…...

编程日记 2024/5/6 15:48:43

C++ 多态（一）

一、多态定义 同一种操作作用于不同的对象时&#xff0c;可以产生不同的行为。在面向对象编程中&#xff0c;多态性是指通过继承和重写实现的&#xff0c;同一个方法在不同的子类中可以表现出不同的行为。多态性可以提高代码的灵活性和可扩展性&#xff0c;使得程序更易于维护…...

编程日记 2024/5/6 15:47:35

[Linux][网络][TCP][一][TCP基础][TCP报头]详细讲解

目录 1.TCP头部格式2.TCP协议的特点3.TCP如何封装与分用4.通过序列号和确认应答号提高可靠性1.32位序列号2.32位确认应答号3.保证可靠性4.为什么序列号和确认应答号是单独的字段 5.窗口大小1.TCP的发送和接收缓冲区2.窗口大小 6.连接管理机制 1.TCP头部格式 TCP全称为"传输…...

编程日记 2024/5/6 15:46:30

java-函数式编程-函数对象

定义 什么是合格的函数&#xff1f;无论多少次执行函数&#xff0c;只要输入一样&#xff0c;输出就不会改变 对象方法的简写 其实在类中&#xff0c;我们很多参数中都有一个this&#xff0c;被隐藏传入了 函数也可以作为对象传递&#xff0c;lambda就是很好的例子 函数式接口中…...

编程日记 2024/5/6 15:43:01

致远oa实时获取第三方自定义组件实现

背景 最近的一个需求不好处理&#xff0c;甲方没有准确的数据支撑&#xff0c;各种问题踢皮球&#xff0c;所以有时间实现一个实时获取数据的组件 需求 为了实现方便&#xff0c;封装了一个第三方数据实时展示的组件 只要修改配置&#xff0c;就可以实现字段的删除增加&…...

编程日记 2024/5/6 15:41:55

【Linux-点灯烧录-SD卡/USB烧写】

目录 1. 烧写方式2. 烧写之代码编译2.1 led.s->led.o2.2 led.o->led.elf2.3 led.elf->led.bin2.4 反汇编&#xff1a;led.elf->led.dis 3. 烧写之烧录到SD卡上&#xff1a;3.1 开启烧录软件权限&#xff1a;3.2 确定SD卡的格式&#xff1a;FAT323.3 烧录到SD卡上3.…...

编程日记 2024/5/6 15:40:48

移动网站套餐/汕头百度网站排名

2020年全国硕士研究生报考人数突破340万人&#xff0c;相对于2019年的290万人&#xff0c;增幅达18%左右。由这些数据可见&#xff0c;考研正逐渐成为一种提升学历、更好就业的一种新风向。当然&#xff0c;相伴而生的是考研成功的难度也在不断的提高&#xff0c;不出意外&…...

编程日记 2024/10/24 4:37:57

网站如何不让百度抓取/软文小故事200字

1、查找当前目录下所有以.tar结尾的文件然后移动到指定目录&#xff1a;find . -name “*.tar” -exec mv {}./backup/ ;注解&#xff1a;find –name 主要用于查找某个文件名字&#xff0c;-exec 、xargs可以用来承接前面的结果&#xff0c;然后将要执行的动作&#xff0c;一般…...

编程日记 2024/10/24 3:17:50

什么是wordpress静态化/数字营销软件

2019年3月27日 ——ACM宣布&#xff0c;深度学习之父Yoshua Bengio, Yann LeCun, 以及Geoffrey Hinton获得了2018年的图灵奖&#xff0c;被称为“计算机领域的诺贝尔奖”。其中Yoshua Bengio是《深度学习》作者之一。今天&#xff0c;深度学习已经成为了人工智能技术领域最重要…...

编程日记 2024/10/24 1:32:06

广州有哪些网站建设/正规接单赚佣金的平台

今天我们来看一看Linux中的gdb调试和Makefile命令。一。gdb:调试器。注&#xff1a;要用gdb调试&#xff0c;前提是在源代码生成时要加上-g选项才能应用&#xff0c;否则会失败。它的基本命令有&#xff1a;l行号&#xff1a;显示从第几行开始&#xff0c;屏幕每次只能显示10行…...

编程日记 2024/10/24 0:14:07

网站热力图工具/哪里有网络推广

开启防火墙systemctl start firewalld查看开放的端口和服务以及屏蔽的IPfirewall-cmd --zonepublic --list-all查看系统中查看系统中可用的服务firewall-cmd --get-services添加端口firewall-cmd --zonepublic --add-port8080/tcp --permanent添加端口段firewall-cmd --zonepub…...

编程日记 2024/10/24 0:10:05

培训机构设计/seo优化报价公司

是的&#xff0c;在 C 语言开发中&#xff0c;有一些工具可以帮助你自动地优化代码&#xff0c;使其能够更好地运行在不同的 CPU 指令集上。 其中一个常用的工具是 Intel C Compiler (ICC)&#xff0c;它能够自动地优化代码以使用特定的 CPU 指令集&#xff0c;提升性能。使用 …...

编程日记 2024/10/23 19:39:30