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.hqwc.cn/news/539845.html

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

相关文章

Java代码审计安全篇-XXE(XML外部实体注入)漏洞

前言&#xff1a; 堕落了三个月&#xff0c;现在因为被找实习而困扰&#xff0c;着实自己能力不足&#xff0c;从今天开始 每天沉淀一点点 &#xff0c;准备秋招 加油 注意&#xff1a; 本文章参考qax的网络安全java代码审计&#xff0c;记录自己的学习过程&#xff0c;还希望各…

Spring Bean的生命周期流程

前言 Java 中的公共类称之为Java Bean&#xff0c;而 Spring 中的 Bean 指的是将对象的生命周期&#xff0c;交给Spring IoC 容器来管理的对象。所以 Spring 中的 Bean 对象在使用时&#xff0c;无需通过 new 来创建对象&#xff0c;只需要通过 DI&#xff08;依赖注入&#x…

【Java设计模式】二十一、访问者模式

文章目录 1、访问者模式2、案例&#xff1a;宠物喂食3、总结 1、访问者模式 封装一些作用于某种容器中各个元素的操作。相关角色&#xff1a; 抽象访问者&#xff1a;定义了对每一类元素访问的行为。方法个数等于具体元素类的个数&#xff0c;方法形参是可访问的元素。具体访…

固态硬盘有缓存和没缓存有什么区别

固态硬盘&#xff08;SSD&#xff09;已经成为现代计算机的重要组成部分&#xff0c;它们提供了比传统机械硬盘更快的读写速度&#xff0c;从而显著提升了操作系统的运行速度和应用程序的加载效率。 其中&#xff0c;缓存&#xff08;Cache&#xff09;是固态硬盘中一个重要的…

留学生课设|R语言|研究方法课设

目录 INSTRUCTIONS Question 1. Understanding Quantitative Research Question 2. Inputting data into Jamovi and creating variables (using the dataset) Question 3. Outliers Question 4. Tests for mean difference Question 5. Correlation Analysis INSTRUCTIO…

idea如何使用,从激活开始

idea到期后激活使用 如何使用 点击阅读 idea分享

边缘计算与物联网的核心 —— 低功耗芯片

一、低功耗芯片 在边缘计算与物联网&#xff08;IoT&#xff09;中&#xff0c;低功耗芯片扮演了至关重要的角色&#xff0c;主要体现在以下几个方面&#xff1a; 延长设备寿命&#xff1a;物联网设备通常需要部署在难以更换电池或不方便进行频繁维护的环境中&#xff0c;比如…

【FPGA】DDR3学习笔记(二)丨从SDRAM到DDR3的IP核设计

本篇文章包含的内容 一、DDR SDRAM1.1 基本概述1.2 工作时序&#xff08;以读取为例&#xff09; 二、DDR2 SDRAM2.1 基本概述2.2 工作时序 三、DDR3 SDRAM3.1 基本概述3.2 硬件设计3.3 读写时序3.4 MIG IP核设计3.5 读写代码设计 开发板&#xff1a;正点原子的达芬奇开发板&am…

PlantUML Integration 编写短信服务类图

PlantUML Integration 写一个类图&#xff0c;主要功能为 1、编写一个serviceSms短信服务类&#xff1b; 2、需要用到短信的地方统一调用基建层的服务即可&#xff1b; 3、可以随意切换、增加短信厂商&#xff0c;不需要更改场景代码&#xff0c;只需要更改application.yml 里面…

【OpenCV】手写字符分割

OpenCV 是一个开源的计算机视觉&#xff08;Computer Vision&#xff09;与机器学习软件库&#xff0c;提供了多种图像处理算法与接口。在 OCR 技术中&#xff0c;字符分割用于提取图像中的文字信息&#xff0c;可以应用于车牌识别、身份证识别、文档扫描等场景。本文主要记录如…

【Flutter学习笔记】9.6 动画切换组件(AnimatedSwitcher)

参考资料&#xff1a;《Flutter实战第二版》9.6 动画切换组件&#xff08;AnimatedSwitcher&#xff09; 9.6.1 AnimatedSwitcher AnimatedSwitcher 可以同时对其新、旧子元素添加显示、隐藏动画&#xff0c;在需要切换新旧元素的场景广泛使用。也就是说在AnimatedSwitcher的子…

Java操作Sql语句 出现迭代死循环 (Bug排查)

目录 1. 问题所示2. 原理分析3. 解决方法4. 彩蛋1. 问题所示 Java执行Sql语句来查询一些数据的时候 虽说数据量很大,但是查询过程中一直迭代查询 截图如下所示: 2. 原理分析 至于迭代死循环,可能是不满足的条件也进入查询(本身我的数据量就很大) 主要可能引起的两个原…