DAY05 CSS

文章目录

  • 1 CSS选择器(Selectors)
    • 8. 后代(包含)选择器
    • 9. 直接子代选择器
    • 10. 兄弟选择器
    • 11. 相邻兄弟选择器
    • 12. 属性选择器
  • 2 伪元素
  • 3 CSS样式优先级
    • 1. 相同选择器不同样式
    • 2. 相同选择器相同样式
    • 3. 继承现象
    • 4. 选择器不同权值的计算
  • 4 CSS中的值和单位
    • 1. 颜色表示法
    • 2. 尺寸表示法
  • 5 页面元素的显示模式
  • 6 流与文档流
  • 7 CSS盒子模型
  • 拓展
  • 作业

1 CSS选择器(Selectors)

8. 后代(包含)选择器

接续第四天的 DAY04CSS…
选中某个元素内的儿子、孙子、重孙子…元素
祖先选择器 后代选择器 { }
例如 div span { } 选中div下的所有span
易错点:空格别忘记写!
使用场景: 内容结构比较简单,没有那么多相同标签

9. 直接子代选择器

选中元素下面的直接儿子元素
div>span { } 选中div下的所有儿子span
直接子代选择器也可以多层逐级向下选择需要的元素

10. 兄弟选择器

选中元素后面的所有兄弟元素——不要前面的兄弟,也不要子代
p~span { }` 选中p后面的所有的span兄弟元素

11. 相邻兄弟选择器

选中元素后面紧挨着的相邻兄弟元素——不要前面的,也不要有间隔的,最多选中1个
p+span { }` 选中p元素后面的紧挨着的那一个span兄弟元素

12. 属性选择器

[html标签的属性名]{ } 选中包含指定属性名的元素
[html标签的属性名="值"]{ } 选中包含指定属性名与属性值的元素
在这里插入图片描述

2 伪元素

伪元素就是我们给指定元素内部的前面/后面添加的内容,我们还可以对添加的内容进行样式设置
::before { } 表示在元素内部的最前面位置插入内容
::after { } 表示在元素内部的最后面位置插入内容
注意:content属性必须写,如果暂时没有具体内容,可以写成content:'';

3 CSS样式优先级

1. 相同选择器不同样式

当多个选择器选中了同一个元素,想要渲染不同的样式,会叠加效果
p { color: red; }
.txt { background-color: yellow; }

2. 相同选择器相同样式

相同选择器选中同一个元素,而且要设置相同的属性,会采用顺序读取的原则,后面覆盖前面的
.txt {background-color: yellow;}
.txt {background-color: green;}

3. 继承现象

在CSS中,有一些属性是具有继承特性的,也就是父元素的CSS属性会传递给子元素
在这里插入图片描述
最近的祖先样式比其他祖先样式优先级高,就近原则
在这里插入图片描述
指定样式的优先级大于继承样式
在这里插入图片描述

4. 选择器不同权值的计算

在这里插入图片描述

原则:
权值大的优先渲染
!important > 行内样式 > ID选择器>(类选择器=伪类选择器)>标签名选择器>通用选择器>继承
权值会累加,但是不会越级!
比如11个类选择器,值不是10*11=110,而是99.9不会越级到下一级
选择器优先级诀窍:控制范围越大的,优先级越低

4 CSS中的值和单位

1. 颜色表示法

在这里插入图片描述
注意:rgba(255,0,0,1)表示红色 ,最后一位的含义 1是完全不透明 0是完全透明 0.5半透明,如果是小数可以简写为 .小数部分。如0.5可以简写为 .5。

2. 尺寸表示法

在这里插入图片描述

5 页面元素的显示模式

一个HTML元素可以有多种显示模式
块级元素——display:block;
常见标签:div h1~h6 p form table ul li…
排列方式:按照书写的顺序,从上往下依次排列
独占一行(一行指的是占父级元素宽度的100%),还可以自设宽高

行内元素——display:inline;
常见标签:span a i b …
排列方式:按照书写顺序从左往右依次排列,可以和其他内容同行,一行放不下才显示在下一行,无法设置宽度和高度,行内元素的大小是靠内容撑起来的
img元素是特殊的行内元素,它自己有宽高,还可以修改宽高

行内块元素——display:inline-block;
常见标签:input button
既有行内元素的特点,也有块级元素的特点:
可以与其他元素共处一行(行内)
可以设置宽度与高度(块级)

6 流与文档流

在这里插入图片描述

7 CSS盒子模型

在这里插入图片描述
一个HTML元素,需要占用页面的空间,内容、边框、内容与边框之间的距离、不同元素之间的距离都需要占用页面空间,所以我们需要了解具体的计算方式。
content: 内容区域
padding:内间距—指的是内容与边框之间的距离
border: 边框
margin:外间距——指的是元素与元素之间的距离
涉及到四个方向:lef左 right右 top上 bottom下

一个元素在水平方向上占用的总空间:中英文都要
一个元素在竖直方向上占用的总空间:中英文都要

拓展

面试题:如果两张图片中间想要留一点空白,可以有哪些实现方案?哪种好?为什么?

作业

1.自行总结并记忆HTML元素的三种显示模式和他们的特点
2.自行总结归纳 默认盒子模型总大小的计算公式
3.面试题还未讲完,先总结好刚刚讲到的3种方案
4.完成汉唐首页导航栏
5.完成"华硕无双"商品卡片
尽量做到高仿,不一样没关系,明天会讲,先尝试自己解决问题

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

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

相关文章

2024.7.22 作业

1.将双向链表和循环链表自己实现一遍&#xff0c;至少要实现创建、增、删、改、查、销毁工作 循环链表 looplinklist.h #ifndef LOOPLINKLIST_H #define LOOPLINKLIST_H#include <myhead.h>typedef int datatype;typedef struct Node {union {int len;datatype data;}…

41 QOS技术(服务质量)

1 QOS 产生背景 对于网络业务&#xff0c;影响服务质量的因素包括传输的带宽、传送的时延、数据的丢包率等。网络资源总是有限的&#xff0c;只要存在抢夺网络资源的情况&#xff0c;就会出现服务质量的要求网络总带宽固定的情况下&#xff0c;如果某类业务占用的带宽越多&am…

2024导游资格考试,这些材料提前准备✅

2024年导游考试报名本月开始&#xff01; &#x1f499;大家提前准备好报名材料 1、个人近期白底1寸证件照。 2、身份证照片 3、学历照片 4、健康证明或健康承诺书 5、其他需要上传的材料 &#x1f499;照片文件不通过原因汇总&#xff0c;记得避开这些坑&#xff01; &#x1…

深入浅出理解 C 语言中的 qsort 函数

目录 引言 一、什么是qsort 二、函数原型 1.qsort函数 2.比较函数 三、qsort函数使用示例 1.使用qsort排序整形数据 2.使用qsort排序结构数据 总结 引言 在编程中&#xff0c;排序是一个常见且重要的操作。C 语言标准库提供了一系列排序函数&#xff0c;其中 qsort 函…

嵌入式C++、STM32、树莓派4B、OpenCV、TensorFlow/Keras深度学习:基于边缘计算的实时异常行为识别

1. 项目概述 随着物联网和人工智能技术的发展,智能家居安全系统越来越受到人们的关注。本项目旨在设计并实现一套基于边缘计算的智能家居安全系统,利用STM32微控制器和树莓派等边缘设备,实时分析摄像头数据,识别异常行为(如入侵、跌倒等),并及时发出警报,提高家庭安全性。 系…

HALSTM32 SPI/ABZ/PWM方式读取MT6816磁编码器数据

HALSTM32 SPI方式读取MT6816磁编码器数据 &#x1f4da;MT6816相关资料&#xff08;来自商家的相关资料&#xff09;&#xff1a; 资料&#xff1a;https://pan.baidu.com/s/1CAbdLBRi2dmL4D7cFve1XA?pwd8888 提取码&#xff1a;8888&#x1f4cd;驱动代码编写&#xff0c;可…

【HarmonyOS】HarmonyOS NEXT学习日记:六、渲染控制、样式结构重用

【HarmonyOS】HarmonyOS NEXT学习日记&#xff1a;六、渲染控制、样式&结构重用 渲染控制包含了条件渲染和循环渲染&#xff0c;所谓条件渲染&#xff0c;即更具状态不同&#xff0c;选择性的渲染不同的组件。 而循环渲染则是用于列表之内的、多个重复元素组成的结构中。 …

yolo5图片视频、摄像头推理demo

yolo5图片、视频推理demo 图片 import torch# 加载预训练模型 model torch.hub.load(./yolo5, custom, pathyolov5s.pt, sourcelocal)# 加载图片 img 1.jpg# 进行推理 results model(img)# 解析结果 detections results.xyxy[0].cpu().numpy() # [x1, y1, x2, y2, confid…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【29】Sentinel

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【29】Sentinel 简介熔断降级什么是熔断什么是降级相同点不同点 整合Sentinel自定义sentinel流控返回数据使用Sentinel来保护feign远程调用自定义资源给网关整合Sentinel参考 简介 熔断降…

C++的UI框架和开源项目介绍

文章目录 1.QT2.wxWidgets3.Dear ImGui 1.QT QT的开源项目&#xff1a;QGIS&#xff08;地理信息系统&#xff09; https://github.com/qgis/QGIS?tabreadme-ov-file 2.wxWidgets wxWidgets的开源项目&#xff1a;filezilla https://svn.filezilla-project.org/svn/ wxWidg…

【复习】软件工程

软件危机是指在计算机软件的开发和维护过程中所遇到的一系列严重问题。 典型表现&#xff1a; 开发成本和进度的估计常常很不准确 用户对已完成的软件系统不满意&#xff0c;闭门造车 软件质量&#xff08;quality&#xff09;不可靠 软件常常是不可维护的 软件产品供不应…

二次元手游《交错战线》游戏拆解

交错战线游戏拆解案 游戏亮点即核心趣味 一、关键词&#xff1a; 回合制游戏、二次元、机甲、横板、剧情、养成、异星探索。 二、游戏亮点&#xff1a; 符合目标群体审美的原画。 三、核心趣味&#xff1a; 抽卡、肝或者氪金解锁新皮肤。 核心玩法及系统规则 核心玩法&…

el-menu弹出菜单样式不生效

1. 使用 ruoyi 项目时出现的问题。 <template><el-menu:default-active"activeMenu":collapse"false":unique-opened"true"class"container":collapse-transition"true"mode"horizontal"><sideba…

websocket状态机

websocket突破了HTTP协议单向性的缺陷&#xff0c;基于HTTP协议构建了双向通信的通道&#xff0c;使服务端可以主动推送数据到前端&#xff0c;解决了前端不断轮询后台才能获取后端数据的问题&#xff0c;所以在小程序和H5应用中被广泛使用。本文主要集合报文分析对于websocket…

linux、windows、macos清空本地DNS缓存

文章目录 Linux&#xff1a;Windows&#xff1a;macOS&#xff1a; Linux&#xff1a; 对于使用systemd的操作系统&#xff08;如CentOS 7、Ubuntu 16.04&#xff09;&#xff0c;可以使用以下命令重启systemd-resolved服务来清除缓存&#xff1a; sudo systemctl restart sys…

高精度-----乘法

找规律&#xff0c;对于第i为有贡献的东西就是a&#xff0c;b下标和为i的数字的乘积。主要是得去模拟。 #include <bits/stdc.h>using namespace std; typedef long long ll; typedef double db; typedef long double ldb; typedef pair<int, int> pii; typedef p…

【线性代数】矩阵变换

一些特殊的矩阵 一&#xff0c;对角矩阵 1&#xff0c;什么是对角矩阵 表示将矩阵进行伸缩&#xff08;反射&#xff09;变换&#xff0c;仅沿坐标轴方向伸缩&#xff08;反射&#xff09;变换。 2&#xff0c;对角矩阵可分解为多个F1矩阵&#xff0c;如下&#xff1a; 二&a…

【Docker】Docker Desktop - WSL update failed

问题描述 Windows上安装完成docker desktop之后&#xff0c;第一次启动失败&#xff0c;提示&#xff1a;WSL update failed 解决方案 打开Windows PowerShell 手动执行&#xff1a; wsl --set-default-version 2 wsl --update

CentOS 7 yum官方源失效

问题 2024年7月&#xff0c;官方对centos 7停止了维护&#xff0c;yum的源网址mirror.centos.org也已经无法访问。 在此情况下&#xff0c;无法正常使用yum进行安装和更新工具。 在尝试了更换阿里源之后&#xff0c;仍然有部分工具库无法访问。 通用解决方案 1. 打开/etc/y…

如何创建线程池?

//使用Executors工具类 ExecutorService poll1 Executors.newCachedThreadPool();//创建无上限线程池&#xff0c;默认上限是INTEGER.MAX ExecutorService poll2 Executors.newFixedThreadPool(3);//创建指定上限的线程池 ​ //自定义创建 ThreadPoolExecutor threadPoolExec…