2024-3-13,14(CSS)

1.复合选择器

有两个或者多个基础选择器,通过不同的方式组合而成。

目的是更加准确高效的选择目标元素(标签)

分类:

后代选择器:选中某个元素的所有后代元素

写法:父选择器 子选择器 {CSS属性},父子之间用空格隔开

子代选择器:选中某个元素的子代元素(最近的儿子)

选择器写法:父代选择器 > 子代选择器 {CSS属性},父子之间用>隔开

并集选择器:选择多组标签设置相同的样式

写法:选择器1,选择器2,选择器3.......选择器n {CSS属性},,选择器之间用,隔开

伪类选择器:伪类表示元素状态,可以选中元素的某个状态设置样式

鼠标悬停状态写法:选择器:hover{CSS属性}

2.CSS特性:继承性,层叠性,优先级

继承性:子级默认继承父级的文字控制属性。

层叠性:

相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加:不同的CSS属性都生效。

优先级:当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important

选中标签的范围越大,优先级越低) 

3.结构伪类选择器

根据标签的结构关系来查找标签

nth-child括号里面可以写公式,来多选

4.伪元素选择器

创建虚拟元素(伪元素),用来摆放装饰性的内容。

其实就是在一个标签内部再放置一个标签。

5.盒子模型

作用:布局网页,摆放盒子和内容。

盒子模型的构成:

内容区域:width,height

内边距:padding

边框线:border

外边距:margin(盒子外面)

6.标准流:也叫文档流,指的是标签在页面中默认的排布规则,例如块元素默认独占一行,行内元素默认一行可以显示多个。 

7.flex布局:display:flex 属性可以把父容器变为弹性容器,容器中的子标签变为弹性盒子

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

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

相关文章

【导论】数据可信流通 从运维信任到技术信任

信任 信任概念由于其抽象性和结构复杂性&#xff0c;在社会学、心理学、营销学、经济学、管理学等不同 的领域定义是不同的&#xff0c;但是达成共识的观点是&#xff1a;信任是涉及交易或交换关系的基础。 信任的基石 ①身份可确认&#xff0c;②利益可依赖&#xff0c;③能…

内网渗透学习-环境搭建

1、环境搭建测试 虚拟机网络环境配置&#xff0c;模拟外网和内网 主机操作系统网络内网ip外网ip物理主机window10vmnet8192.168.70.1攻击机kali Linuxvmnet8192.168.70.134域控主机win server 2008 r2vmnet0192.168.52.138域成员主机win server 2k3vmnet0192.168.52.141服务器…

ThingsBoard Edge 安装部署

文章目录 一、概述1.官方文档2.部署说明3.安装准备3.1. 克隆服务器3.2.安装 Docker3.3.安装 Java 113.4.安装 PostgreSQL3.5.下载安装包 二、安装部署1.创建 Edge 实例2.创建数据库3.Edge 服务安装3.1.安装服务3.2.配置 Edge3.3.运行安装脚本3.4.重新启动服务 4.访问 Edge5.故障…

C#,图论与图算法,图着色问题(Graph Coloring)的威尔士-鲍威尔(Welch Powell Algorithm)算法与源代码

Welsh, D.J.A. and Powell, M.B. (1967) An Upper Bound for the Chromatic Number of a Graph and Its Application to Timetabling Problems. 《The Computer Journal》, 10, 85-86. 《The Computer Journal》 1 图着色算法概述 1967年,Welsh和Powell算法引入了图色数的上…

linux最佳入门(笔记)

1、内核的主要功能 2、常用命令 3、通配符&#xff1a;这个在一些启动文件中很常见 4、输入/输出重定向 意思就是将结果输出到别的地方&#xff0c;例如&#xff1a;ls标准会输出文件&#xff0c;默认是输出到屏幕&#xff0c;但是用>dir后&#xff0c;是将结果输出到dir文…

golang面试题总结

零、go与其他语言 0、什么是面向对象 在了解 Go 语言是不是面向对象&#xff08;简称&#xff1a;OOP&#xff09; 之前&#xff0c;我们必须先知道 OOP 是啥&#xff0c;得先给他 “下定义” 根据 Wikipedia 的定义&#xff0c;我们梳理出 OOP 的几个基本认知&#xff1a; …

房屋租赁系统|基于JSP技术+ Mysql+Java+ B/S结构的房屋租赁系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…

软考 系统架构设计师系列知识点之系统性能(1)

所属章节&#xff1a; 第2章. 计算机系统基础知识 第9节. 系统性能 系统性能是一个系统提供给用户的所有性能指标的集合。它既包括硬件性能&#xff08;如处理器主频、存储器容量、通信带宽等&#xff09;和软件性能&#xff08;如上下文切换、延迟、执行时间等&#xff09;&a…

vulnhub-----SickOS靶机

文章目录 1.信息收集2.curl命令反弹shell提权利用POC 1.信息收集 ┌──(root㉿kali)-[~/kali/vulnhub/sockos] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:10:3c:9b, IPv4: 10.10.10.10 Starting arp-scan 1.9.8 with 256…

十四、GPT

在GPT-1之前&#xff0c;传统的 NLP 模型往往使用大量的数据对有监督的模型进行任务相关的模型训练&#xff0c;但是这种有监督学习的任务存在两个缺点&#xff1a;预训练语言模型之GPT 需要大量的标注数据&#xff0c;高质量的标注数据往往很难获得&#xff0c;因为在很多任务…

SSL---VPN

文章目录 目录 一.SSL-VPN概述 优点 二.SSL协议的工作原理 三.虚拟网关技术 用户认证方式 本地认证 服务器认证&#xff1a; 证书匿名认证 Web代理 Web-link和Web改写 端口转发 网络扩展&#xff08;允许UDP协议&#xff09; 总结 一.SSL-VPN概述 SLL VPN是一种基于HTTPS&am…

如何在尽量不损害画质的前提下降低视频占内存大小?视频格式科普及无损压缩软件推荐

大家好呀&#xff0c;相比大家都有对视频画质和体积的追求和取舍&#xff0c;那么&#xff0c;如何才能在不牺牲画质的前提下&#xff0c;尽可能的将视频大小降低到极致呢&#xff1f; 首先我们要了解视频的构成&#xff0c;要想降低视频的体积大小&#xff0c;我们可以从以下几…

在centOS服务器安装docker,并使用docker配置nacos

遇到安装慢的情况可以优先选择阿里镜像 安装docker 更新yum版本 yum update安装所需软件包 yum install -y yum-utils device-mapper-persistent-data lvm2添加Docker仓库 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.rep…

JavaScript中对象属性的顺序问题

我们首先需要了解的是&#xff0c;在JavaScript中&#xff0c;对象的属性名只能是字符串或者symbol。假设我们给将属性名设置为非string和symbol类型&#xff0c;都会被隐式转换成字符串。 let a {1: 1,true: true, } // 等同于 let a {1: 1,true: true, }a[{}] {} a[()>…

【Elasticsearch】windows安装elasticsearch教程及遇到的坑

一、安装参考 1、安装参考&#xff1a;ES的安装使用(windows版) elasticsearch的下载地址&#xff1a;https://www.elastic.co/cn/downloads/elasticsearch ik分词器的下载地址&#xff1a;https://github.com/medcl/elasticsearch-analysis-ik/releases kibana可视化工具下载…

vue 基于elementUI/antd-vue, h函数实现message中嵌套链接跳转到指定路由 (h函数点击事件的写法)

效果如图&#xff1a; 点击message 组件中的 工单管理&#xff0c; 跳转到工单管理页面。 以下是基于vue3 antd-vue 代码如下&#xff1a; import { message } from ant-design-vue; import { h, reactive, ref, watch } from vue; import { useRouter } from vue-router; c…

将FastSAM中的TextPrompt迁移到MobileSAM中

本博文简单介绍了SAM、FastSAM与MobileSAM,主要关注于TextPrompt功能的使用。从性能上看MobileSAM是最实用的,但其没有提供TextPrompt功能,故而参考FastSAM中的实现,在MobileSAM中嵌入TextPrompt类。并将TextPrompt能力嵌入到MobileSAM官方项目提供的gradio.py部署代码中,…

算法体系-11 第十一节:二叉树基本算法(上)

一 两链表相交 1.1 题目描述 给定两个可能有环也可能无环的单链表&#xff0c;头节点head1和head2。请实现一个函数&#xff0c;如果两个链表相交&#xff0c;请返回相交的 第一个节点。如果不相交&#xff0c;返回null 【要求】 如果两个链表长度之和为N&#xff0c;时间复杂…

强化PaaS平台应用安全:关键策略与措施

PaaS&#xff08;平台即服务&#xff0c;Platform-as-a-Service&#xff09;是一种云计算服务模式&#xff0c;可以为客户提供一个完整的云平台&#xff08;硬件、软件和基础架构&#xff09;以用于快捷开发、运行和管理项目&#xff0c;从而降低了企业云计算应用的高成本和复杂…

.NET高级面试指南专题十七【 策略模式模式介绍,允许在运行时选择算法的行为】

介绍&#xff1a; 策略模式是一种行为设计模式&#xff0c;它允许在运行时选择算法的行为。它定义了一系列算法&#xff0c;将每个算法封装到一个对象中&#xff0c;并使它们可以互相替换。这使得算法可独立于使用它的客户端变化。 原理&#xff1a; 策略接口&#xff08;Strat…